Echarts Note

发表于 | 分类于

使用Echarts的总结

1、tooltip的使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    // ...
    tooltip: {
        // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
        trigger: 'axis',
        // 坐标轴指示器，坐标轴触发有效
        axisPointer: {
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
        // 可调整提示框的大小、背景、阴影等
        extraCssText:'min-width:120px;height:130px;box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3);',
        backgroundColor: 'rgb(255,255,255)',    // 提示背景颜色
        borderColor: '#f2f2f2', // 提示边框颜色
        borderRadius: 2,    // 提示边框圆角，单位px，默认为4
        borderWidth: 1, // 提示边框线宽，单位px，默认为0（无边框）
        padding: 15,    //默认值，提示内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css
        textStyle: {
            color: '#333',// 展示文字的颜色
            align:'left',   //展示文字的对齐方式
            fontSize: 14,   //展示文字的大小
        },
        formatter : function (params) {//自定义展示框内的内容
            let res = '<div class="fc_666 mb_10">'+ self.getToolTipTitle(params[0].axisValue) + '</div>';
            for(let i = 0;i < params.length; i++){
                if (params[i].data || params[i].data === 0) {
                    res += '<div style="">'+
                                '<span class="tool-box" style="background:'+ params[i].color +'"></span>'+ params[i].seriesName +
                                '<span class="pl_20">' +params[i].data+'</span>'+
                            '</div>';
                }
            }
            return res;
        },
    },

上述代码的展示效果为：

图片

2、取消y轴横线展示：

1
2
3
4
5
6
7
    // ...
    yAxis: {
        // ...
        splitLine:{
            show:false // 默认为true，true：展示、false：不展示
        },
    },

上述代码的展示效果为：

图片

3、折线和柱状图同时展示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
    // ...
    series: [{
        name: '召回订单',
        type: 'bar',
        barWidth:'25%',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient( // 柱状图的颜色为渐变
                    0, 0, 0, 1,
                    [
                        {offset: 1, color: '#83bff6'},
                        {offset: 0.5, color: '#188df0'},
                        {offset: 0, color: '#188df0'}
                    ]
                )
            },
            emphasis: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 1, color: '#2378f7'},
                        {offset: 0.7, color: '#2378f7'},
                        {offset: 0, color: '#83bff6'}
                    ]
                )
            }
        },
        data: orderArr
    },{
        name:'实付金额',
        type:'line',
        symbol: 'circle',
        symbolSize: 2,
        itemStyle : {// 线条样式
            normal : {
                color:'#FF9400',
                lineStyle:{
                    color:'#FF9400'
                }
            }
        },
        yAxisIndex: 1,
        data: priceArr
    }]

上述代码的展示效果为：

图片

4、横坐标隔一个显示：

1
2
3
4
5
6
7
8
// ...
xAxis:  {
    // ...
    axisLabel:{
        interval: 1
    },
    data: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
},

上述代码的展示效果为： 图片

5、直方图：

**这里有个非常重要的问题，官方的echarts-stat npm包存在一些缺陷，比如数据都是0或者其他数据会报错：

1
    "RangeError: toFixed() digits argument must be between 0 and 100"

RangeError是当一个只超出有效范围时发生的错误。

主要的有几种情况，第一是数组长度为负数，第二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。

1）数组长度为负数

1
    [].length = -5                        // Uncaught RangeError: Invalid array length

2）Number对象的方法参数超出范围

1
2
3
    var num = new Number(12.34);
    console.log(num.toFixed(-1));         // Uncaught RangeError: toFixed() digits argument must be between 0 and 20 at Number.toFixed
    // 说明: toFixed方法的作用是将数字四舍五入为指定小数位数的数字,参数是小数点后的位数,范围为0-20.

查看源码，发现是toFixed的参数为负数，因此调整npm包，引入echarts-stat-tofixed npm包，或者用cdn https://echarts.baidu.com/examples/vendors/echarts-stat/ecStat.min.js?v=1553896255267

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
renderItem(params, api) {
    let yValue = api.value(2);
    let start = api.coord([api.value(0), yValue]);
    let size = api.size([api.value(1) - api.value(0), yValue]);
    let style = api.style();
    return {
        type: 'rect',
        shape: {
            x: start[0] + 1,
            y: start[1],
            width: size[0] - 2,
            height: size[1]
        },
        style: style
    };
},
renderCharts(isEmpty) {
    //兼容获取空数据的展示
    isEmpty = isEmpty || !this.waveData.length;
    let girth = this.waveData;//[1.1, 1.2, 1.3, 1.4, 1.5,-0.9,-0.8,-0.7,-0.6,-0.5]
    if(isEmpty){
        girth = [0,1]
    }
    let bins = ecStat.histogram(girth);
    let interval;
    let min = Infinity;
    let max = -Infinity;
    let data = echarts.util.map(bins.data, (item, index) => {
        let x0 = bins.bins[index].x0.toFixed(2);
        let x1 = bins.bins[index].x1.toFixed(2);
        interval = x1 - x0;
        min = Math.min(min, x0);
        max = Math.max(max, x1);
        return [x0, x1, item[1]];
    });
    let option = {
        title: {
            text: '',
            textStyle: {
                color: '#fff'
            },
            left: 'left',
            left: 100,
            top: 10
        },
        color: ['rgb(25, 183, 207)'],
        grid: {
            top: 80,
            containLabel: true
        },
        xAxis: [{
            type: 'value',
            min: min,
            max: max,
            splitLine: {show: false},
            axisLine: {
                lineStyle: {color: '#fff'}
            }
        }],
        yAxis: [{
            type: 'value',
            splitLine: {show: false},
            axisLabel: {
                lineStyle: {color: '#fff'}
            }
        }],
        series: [{
            name: 'height',
            type: 'custom',
            renderItem: this.renderItem,
            label: {
                normal: {
                    show: true,
                    position: 'insideTop'
                }
            },
            encode: {
                x: [0, 1],
                y: 2,
                tooltip: 2,
                label: 2
            },
            data: isEmpty?[]:data
        }]
    };
    let quotaChart = echarts.init(document.getElementById('quotaCharts'));
    quotaChart.setOption(option);
}

6、K线图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
priceChart.setOption({
   animation: false,
   color:['#ff4500','#32cd32','#ffff00','#ff6347','#9acd32','#eeee00'],
   legend: {
       bottom: 10,
       left: 'center',
       data: ['车行168-价格', '汽车之家-价格', '易车网-价格', '车行168-报价量', '汽车之家-报价量', '易车网-报价量'],
       textStyle: {
           color: '#fff'
       }
   },
   tooltip: {
       trigger: 'axis',
       axisPointer: {type: 'cross'},
       backgroundColor: 'rgba(245, 245, 245, 0.8)',
       borderWidth: 1,
       borderColor: '#ccc',
       padding: 10,
       textStyle: {color: '#000'},
       position: function (pos, params, el, elRect, size) {
           let obj = {top: 10};
           obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
           return obj;
       }
   },
   axisPointer: {
       link: {xAxisIndex: 'all'},
       label: {
           backgroundColor: '#777'
       }
   },
   visualMap: {
       show: false,
       seriesIndex: 5,
       dimension: 2,
       pieces: [{
           value: 1,
           color: downColor
       }, {
           value: -1,
           color: upColor
       }]
   },
   grid: [{
       left: '10%',
       right: '8%',
       height: '50%'
   },
   {
       left: '10%',
       right: '8%',
       top: '63%',
       height: '16%'
   }],
   xAxis: [{
       type: 'category',
       data: data.date,
       scale: true,
       boundaryGap: false,
       axisLine: {
           onZero: false,
           lineStyle: {
               color: '#fff'
           }
       },
       splitLine: {show: false},
       splitNumber: 20,
       min: 'dataMin',
       max: 'dataMax',
       axisPointer: {z: 100}
   },{
       type: 'category',
       gridIndex: 1,
       data: data.date,
       scale: true,
       boundaryGap: false,
       axisLine: {onZero: false},
       axisTick: {show: false},
       splitLine: {show: false},
       axisLabel: {show: false},
       splitNumber: 20,
       min: 'dataMin',
       max: 'dataMax'
   }],
   yAxis: [{
       name: '价格(万元)',
       nameTextStyle: {color: '#fff'},
       scale: true,
       splitArea: {show: true},
       axisLabel: {
           textStyle: {color: '#fff'}
       }
   },{
       name: '报价量',
       nameTextStyle: {color: '#fff'},
       nameLocation: 'middle',
       nameRotate: 0,
       min: 0,
       offset: 50,
       scale: true,
       gridIndex: 1,
       splitNumber: 2,
       axisLabel: {show: false},
       axisLine: {show: false},
       axisTick: {show: false},
       splitLine: {show: false}
   }],
   dataZoom: [{
       type: 'inside',
       xAxisIndex: [0, 1],
       minValueSpan:10,
       startValue:startValue,
       endValue:endValue
   }, {
       show: true,
       xAxisIndex: [0, 1],
       type: 'slider',
       top: '85%',
       start: 90,
       end: 100,
       textStyle: {color: '#fff'}
   }],
   series: [{
       name: '车行168-价格',
       type: 'line',
       data: data['chehang168Prices'],
       smooth: true,
       lineStyle: {
           normal: {
               width: 3
           }
       }
   }, {
       name: '汽车之家-价格',
       type: 'line',
       data: data['che168Prices'],
       smooth: true,
       lineStyle: {
           normal: {
               width: 3
           }
       }
   }, {
       name: '易车网-价格',
       type: 'line',
       data: data['bitautoPrices'],
       smooth: true,
       lineStyle: {
           normal: {
               width: 3
           }
       }
   }, {
       name: '车行168-报价量',
       type: 'bar',
       xAxisIndex: 1,
       yAxisIndex: 1,
       data: data['chehang168Count']
   }, {
       name: '汽车之家-报价量',
       type: 'bar',
       xAxisIndex: 1,
       yAxisIndex: 1,
       data: data['che168Count']
   }, {
       name: '易车网-报价量',
       type: 'bar',
       xAxisIndex: 1,
       yAxisIndex: 1,
       data: data['bitautoCount']
   }]
}, true);
priceChart.dispatchAction({
   type: 'brush',
   areas: [
       {
           brushType: 'lineX',
           coordRange: ['2016-06-10', '2016-06-20'],
           xAxisIndex: 0
       }
   ]
});

参考文档： Echarts Demo