195Echarts - 自定义系列(Error Scatter on Catesian)

简介: 195Echarts - 自定义系列(Error Scatter on Catesian)
效果图

源代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="dist/extension/dataTool.js"></script>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 1024px;height:768px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      var option;
// Prime Costs and Prices for ACME Fashion\nCollection "Spring-Summer, 2016"
// Data from https://playground.anychart.com/gallery/7.12.0/Error_Charts/Marker_Chart
var dimensions = [
    'name', 'Price', 'Prime cost', 'Prime cost min', 'Prime cost max', 'Price min', 'Price max'
];
var data = [
    ['Blouse "Blue Viola"', 101.88, 99.75, 76.75, 116.75, 69.88, 119.88],
    ['Dress "Daisy"', 155.8, 144.03, 126.03, 156.03, 129.8, 188.8],
    ['Trousers "Cutesy Classic"', 203.25, 173.56, 151.56, 187.56, 183.25, 249.25],
    ['Dress "Morning Dew"', 256, 120.5, 98.5, 136.5, 236, 279],
    ['Turtleneck "Dark Chocolate"', 408.89, 294.75, 276.75, 316.75, 385.89, 427.89],
    ['Jumper "Early Spring"', 427.36, 430.24, 407.24, 452.24, 399.36, 461.36],
    ['Breeches "Summer Mood"', 356, 135.5, 123.5, 151.5, 333, 387],
    ['Dress "Mauve Chamomile"', 406, 95.5, 73.5, 111.5, 366, 429],
    ['Dress "Flying Tits"', 527.36, 503.24, 488.24, 525.24, 485.36, 551.36],
    ['Dress "Singing Nightingales"', 587.36, 543.24, 518.24, 555.24, 559.36, 624.36],
    ['Sundress "Cloudy weather"', 603.36, 407.24, 392.24, 419.24, 581.36, 627.36],
    ['Sundress "East motives"', 633.36, 477.24, 445.24, 487.24, 594.36, 652.36],
    ['Sweater "Cold morning"', 517.36, 437.24, 416.24, 454.24, 488.36, 565.36],
    ['Trousers "Lavender Fields"', 443.36, 387.24, 370.24, 413.24, 412.36, 484.36],
    ['Jumper "Coffee with Milk"', 543.36, 307.24, 288.24, 317.24, 509.36, 574.36],
    ['Blouse "Blooming Cactus"', 790.36, 277.24, 254.24, 295.24, 764.36, 818.36],
    ['Sweater "Fluffy Comfort"', 790.34, 678.34, 660.34, 690.34, 762.34, 824.34]
];
function renderItem(params, api) {
    var children = [];
    var coordDims = ['x', 'y'];
    for (var baseDimIdx = 0; baseDimIdx < 2; baseDimIdx++) {
        var otherDimIdx = 1 - baseDimIdx;
        var encode = params.encode;
        var baseValue = api.value(encode[coordDims[baseDimIdx]][0]);
        var param = [];
        param[baseDimIdx] = baseValue;
        param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][1]);
        var highPoint = api.coord(param);
        param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][2]);
        var lowPoint = api.coord(param);
        var halfWidth = 5;
        var style = api.style({
            stroke: api.visual('color'),
            fill: null
        });
        children.push({
            type: 'line',
            shape: makeShape(
                baseDimIdx,
                highPoint[baseDimIdx] - halfWidth, highPoint[otherDimIdx],
                highPoint[baseDimIdx] + halfWidth, highPoint[otherDimIdx]
            ),
            style: style
        }, {
            type: 'line',
            shape: makeShape(
                baseDimIdx,
                highPoint[baseDimIdx], highPoint[otherDimIdx],
                lowPoint[baseDimIdx], lowPoint[otherDimIdx]
            ),
            style: style
        }, {
            type: 'line',
            shape: makeShape(
                baseDimIdx,
                lowPoint[baseDimIdx] - halfWidth, lowPoint[otherDimIdx],
                lowPoint[baseDimIdx] + halfWidth, lowPoint[otherDimIdx]
            ),
            style: style
        });
    }
    function makeShape(baseDimIdx, base1, value1, base2, value2) {
        var shape = {};
        shape[coordDims[baseDimIdx] + '1'] = base1;
        shape[coordDims[1 - baseDimIdx] + '1'] = value1;
        shape[coordDims[baseDimIdx] + '2'] = base2;
        shape[coordDims[1 - baseDimIdx] + '2'] = value2;
        return shape;
    }
    return {
        type: 'group',
        children: children
    };
}
option = {
    tooltip: {
    },
    legend: {
        data: ['bar', 'error']
    },
    dataZoom: [{
        type: 'slider',
        height: 8,
        bottom: 20,
        borderColor: 'transparent',
        backgroundColor: '#e2e2e2',
        handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
        handleSize: 20,
        handleStyle: {
            shadowBlur: 6,
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            shadowColor: '#aaa'
        }
    }, {
        type: 'inside'
    }],
    grid: {
        bottom: 80
    },
    xAxis: {},
    yAxis: {},
    series: [{
        type: 'scatter',
        name: 'error',
        data: data,
        dimensions: dimensions,
        encode: {
            x: 2,
            y: 1,
            tooltip: [2, 1, 3, 4, 5, 6],
            itemName: 0
        },
        itemStyle: {
            normal: {
                color: '#77bef7'
            }
        }
    }, {
        type: 'custom',
        name: 'error',
        renderItem: renderItem,
        dimensions: dimensions,
        encode: {
            x: [2, 3, 4],
            y: [1, 5, 6],
            tooltip: [2, 1, 3, 4, 5, 6],
            itemName: 0
        },
        data: data,
        z: 100
    }]
};
      myChart.setOption(option);
    </script>
  </body>
</html>
目录
相关文章
|
2月前
Echarts 热力图自定义开发
Echarts 热力图自定义开发
|
2月前
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
34 0
|
26天前
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
35 0
 ECharts 雷达图案例001-自定义节点动画
|
20天前
|
计算机视觉
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
Echarts饼图,自定义饼图图例的排列方式, formatter使用语法
|
20天前
|
JSON JavaScript 定位技术
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
Echarts自定义地图显示区域,可以显示街道,小区,学校等区域
|
2月前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
57 0
|
8月前
|
JSON 前端开发 数据格式
Echarts饼状图数据交互请求ajax自定义颜色
Echarts饼状图数据交互请求ajax自定义颜色
30 0
|
8月前
Echarts自定义tooltip显示内容(隐藏小圆点)
Echarts自定义tooltip显示内容(隐藏小圆点)
193 0
|
8月前
echarts自定义y轴刻度信息
echarts自定义y轴刻度信息
|
9月前
244Echarts - 3D 散点图(3D Scatter with Scatter Matrix)
244Echarts - 3D 散点图(3D Scatter with Scatter Matrix)
23 0