ECharts的使用与总结

时间:2020-03-24
本文章向大家介绍ECharts的使用与总结,主要包括ECharts的使用与总结使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

ECharts的使用与总结

一,介绍与需求

1.1,介绍

 ECharts商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现

1.2,需求

 可视化展示数据

二,常规使用

以常规饼图为例

第一步:获取 ECharts

1 cnpm install echarts --save

第二步:按需引入 ECharts

1 // 引入 ECharts 主模块
2 var echarts = require('echarts/lib/echarts');
3 // 引入饼图
4 require('echarts/lib/chart/pie');
5 // 引入提示框和标题组件
6 require('echarts/lib/component/tooltip');
7 require('echarts/lib/component/title');

第三步:图表的容器

必须设置宽高(width,height),否则没有效果

1  <div id='main' style={{ width: '100%', height: 360 }}></div>

第四步:绘制图表

配置数据选项:

1 var option={  
2                             title:{},//图表的标题
3                             tooltip:{},//应用的组件
4                             legend:{},//图例组件包括颜色、朝向、位置等
5                             xAxis:[{}],//直角坐标系中x轴需要配置的
6                             yAxis:[{}],//直角坐标系中y轴需要配置的
7                             series:[{}],//系列列表,包括列表类型、颜色、数据等
8             }

图表的绘制:

  1 let chartDate= [{
  2             value: 3661,
  3             name: '三角函数的图象与性质'
  4         }, {
  5             value: 5713,
  6             name: '空间向量及其运算'
  7         },
  8         {
  9             value: 4563,
 10             name: '直线与圆锥曲线的位置关系'
 11         }, {
 12             value: 9938,
 13             name: '复数代数形式的四则运算'
 14         }, {
 15             value: 17623,
 16             name: '集合'
 17         }, {
 18             value: 3299,
 19             name: '公式的联系'
 20         }] 
 21 var mainPieChart = eCharts.init(document.getElementById('main'));
 22         // 绘制图表
 23         mainPieChart .setOption({
 24             backgroundColor: '#fff',
 25             title: {
 26                 text: '三角函数',
 27                 x: 'center',
 28                 y: '38%',
 29                 textStyle: {
 30                     fontWeight: 'bold',
 31                     fontSize: 16
 32                 }
 33             },
 34             tooltip: {
 35                 show: true,
 36                 trigger: 'item',
 37                 formatter: "{b}: {c} ({d}%)"
 38             },
 39             legend: {
 40                 orient: 'horizontal',
 41                 top: '74%',
 42                 // data: ['<10w', '10w-50w', '50w-100w', '100w-500w', '>500w']
 43                 data: [{
 44                     name: '三角函数的图象与性质',
 45                     // 强制设置图形为圆。
 46                     icon: 'circle',
 47                 },
 48                 {
 49                     name:  '空间向量及其运算',
 50                     // 强制设置图形为圆。
 51                     icon: 'circle',
 52                 },
 53                 {
 54                     name:  '直线与圆锥曲线的位置关系',
 55                     // 强制设置图形为圆。
 56                     icon: 'circle',
 57                 },
 58                 {
 59                     name:'复数代数形式的四则运算',
 60                     // 强制设置图形为圆。
 61                     icon: 'circle',
 62                 },
 63                 {
 64                     name: '集合',
 65                     // 强制设置图形为圆。
 66                     icon: 'circle',
 67                 },
 68                 {
 69                     name: '公式的联系',
 70                     // 强制设置图形为圆。
 71                     icon: 'circle',
 72                 }],
 73             },
 74             series: [{
 75                 type: 'pie',
 76                 selectedMode: 'single',
 77                 zlevel:1,
 78                 center:['50%', '40%'],//饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
 79                 radius: ['36%', '58%'],
 80                 color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],
 81                 symbolOffset: [0, 120],
 82                 label: {
 83                     normal: {
 84                         position: 'outside',
 85                         formatter: '{d}%',
 86                         textStyle: {
 87                             color: '#999999',
 88                             fontWeight: 'bold',
 89                             fontSize: 14
 90                         }
 91                     },
 92                     emphasis: {
 93                         color: '#57B3FE',
 94                     }
 95                 },
 96                 labelLine: {
 97                     normal: {
 98                         show: false
 99                     }
100                 },
101                 data: chartDate
102             }]
103         });

选中第一个高亮

1  mainPieChart.dispatchAction({
2                 type: 'highlight',          //高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
3                 seriesIndex: 0,  // 可选,系列 index,可以是一个数组指定多个系列
4                 dataIndex: 0,          // 可选,数据的 index
5             });

效果如下:

三,特殊使用

3.1,多类图切换保存

 工具栏toolbox

1   toolbox: {//工具栏配置  默认不显示
2                 feature : {
3                     dataView : {show: true, readOnly: false},//数据类型
4                     magicType : {show: true, type: ['line', 'bar']},//图标类型切换
5                     restore : {show: true},//还原
6                     saveAsImage : {show: true}//保存图片
7                 },
8 },

渐变色配置: 

使用graphic.LinearGradient接口配置渐变色

1  color:new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
2                                 offset: 0,
3                                 color: '#FFCFCF'
4                             }, {
5                                 offset: 1,
6                                 color: '#F05353'
7                             }]),

绘制图表完整配置:

 1 main.setOption({
 2             title: {
 3                 text: '个人总分较班级/年级',
 4                 left: 'center',
 5             },
 6             legend: {
 7                 top: 30,
 8                 right: 120,
 9                 bottom: 30,
10                 data: ['我', '年级', '班级']
11             },
12             toolbox: {
13 
14                 feature : {
15                     dataView : {show: true, readOnly: false},
16                     magicType : {show: true, type: ['line', 'bar']},
17                     restore : {show: true},
18                     saveAsImage : {show: true}
19                 },
20 
21             },
22             calculable: true,
23             tooltip: {
24                 formatter: function (params) {
25                     return params.name + "<br/>" + '分数: ' + params.value;
26                 }
27             },
28             xAxis: [
29                 {
30                     type : 'category',
31                     data: ['最高分', '最低分', '平均分']
32                 }
33             ],
34             yAxis: [
35                 {
36                     type: 'value'
37                 }
38             ],
39             series: [
40                 {
41                     name: '我',
42                     type: 'bar',
43                     barWidth: '10%',
44                     itemStyle: {
45                         normal: {
46                             show: true,
47                             color:
48                             new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
49                                 offset: 0,
50                                 color: '#FFCFCF'
51                             }, {
52                                 offset: 1,
53                                 color: '#F05353'
54                             }]),
55                         }
56                     },
57                     data: [2.0, 4.9, 7.0],
58                 },
59                 {
60                     name: '年级',
61                     type: 'bar',
62                     barWidth: '10%',
63                     itemStyle: {
64                         normal: {
65                             show: true,
66                             color:
67                             new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
68                                 offset: 0,
69                                 color: '#1FE5BA'
70                             }, {
71                                 offset: 1,
72                                 color: '#18D0CE'
73                             }]),
74                         }
75                     },
76                     data: [2.6, 5.9, 9.0],
77 
78                 },
79                 {
80                     name: '班级',
81                     type: 'bar',
82                     barWidth: '10%',
83                     itemStyle: {
84                         normal: {
85                             show: true,
86                             color:
87                              new eCharts.graphic.LinearGradient(0, 0, 0, 1, [{
88                                 offset: 0,
89                                 color: '#909DD4'
90                             }, {
91                                 offset: 1,
92                                 color: '#9E88D3'
93                             }]),
94                         }
95                     },
96                     data: [2.6, 5.9, 9.0],
97                 }
98             ]
99         });

效果:

3.2,进度图

 graphic 是原生图形元素组件。

 1  graphic: [{
 2                 type: 'text',
 3                 left: '42%',
 4                 top: '48%',
 5                 style: {
 6                     text: '4',
 7                     fill: '#08A0E2',
 8                     fontSize: 24
 9                 }
10             }, {
11                 type: 'text',
12                 left: '46%',
13                 top: '48%',
14                 style: {
15                     text: ' /12',
16                     fill: '#999',
17                     fontSize: 24
18                 }
19             }],

   clockWise: true,//饼图的扇区是否是顺时针排布。默认是false

   startAngle:270,//起始角度,支持范围[0, 360]。默认为0

 绘制图表完整配置:

 1 main.setOption({
 2             backgroundColor: '#fff',
 3             title: {
 4                 text: '主观题',
 5                 left: 'center',
 6                 textStyle: {
 7                     color: '#333333',
 8                     fontWeight: 'normal'
 9                 },
10                 // subtextStyle: {
11                 //     color: '#57B3FE'
12                 // }
13             },
14             graphic: [{
15                 type: 'text',
16                 left: '42%',
17                 top: '48%',
18                 style: {
19                     text: '4',
20                     fill: '#08A0E2',
21                     fontSize: 24
22                 }
23             }, {
24                 type: 'text',
25                 left: '46%',
26                 top: '48%',
27                 style: {
28                     text: ' /12',
29                     fill: '#999',
30                     fontSize: 24
31                 }
32             }],
33             series: [
34                 {
35                     name: "",
36                     type: "pie",
37                     clockWise: true,//饼图的扇区是否是顺时针排布。
38                     startAngle:270,//起始角度,支持范围[0, 360]。
39                     radius: [55, 65],
40                     itemStyle: {
41                         normal: {
42                             label: {
43                                 show: false
44                             },
45                             labelLine: {
46                                 show: false
47                             },
48                         }
49                     },
50                     hoverAnimation: false,
51                     center: ['50%', '50%'],
52                     label: {
53                         normal: {
54                             show: false,
55                             position: "center"
56                         }
57                     },
58                     data: [{
59                         value: 4,
60                         name: "",
61                         label: {
62                             normal: {
63                                 show: false
64                             }
65                         },
66                         itemStyle: {
67                             normal: {
68                                 color:colorValue,
69                             }
70                         }
71                     },
72                     {
73                         value: 8,
74                         name: "",
75                         label: {
76                             normal: {
77                                 show: false
78                             }
79                         },
80                         itemStyle: {
81                             normal: {
82                                 color: "#E9EDF5"
83                             }
84                         }
85                     }
86                     ]
87                 }
88             ]
89         })

效果:

3.3,交互柱状图

鼠标事件包括 'click''dblclick''mousedown''mousemove''mouseup''mouseover''mouseout''globalout''contextmenu'

 组件交互的行为事件,主要通过 on 方法添加事件处理函数:

 1  main.on('click', setOptionAction);//点击选中 显示对应的name并高亮
 2         main.on('mouseover',setOptionAction);//鼠标移入选中 显示对应的name并高亮
 3         function setOptionAction(params) {
 4             main.setOption({
 5                 title: {
 6                     subtext: params.name,
 7                 },
 8                 series: [
 9                     {
10                         itemStyle: {
11                             normal: {
12                                  color: function (param){
13                                   return (params.value==chartData[param.dataIndex])?
14                                     '#57B3FE':
15                                     new eCharts.graphic.LinearGradient(
16                                 0, 0, 0, 1,
17                                 [
18                                     { offset: 0, color: '#909DD4' },
19                                     { offset: 1, color: '#9E88D3' }
20                                 ]
21                             );
22                               },            
23                             },
24                         },
25                     }
26                 ]
27             });
28         }

label字数太多时,显示点点,如下

 1  axisLabel: {
 2                         formatter: function (value) {
 3                             var ret = "";//拼接加\n返回的类目项
 4                             var maxLength = 6;//每项显示文字个数
 5                             var valLength = value.length;//X轴类目项的文字个数
 6                             var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
 7                             if (rowN > 1)//如果类目项的文字大于3,
 8                             {
 9                                 var temp = "";//每次截取的字符串
10                                 var start = 0;//开始截取的位置
11                                 var end = maxLength;//结束截取的位置
12                                 //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
13                                 temp = value.substring(start, end) + "......";
14                                 ret += temp; //凭借最终的字符串
15                                 return ret;
16                             }
17                             else {
18                                 return value;
19                             }
20                         }
21                     }

效果:

3.4,怀特图

 echarts没有直接画怀特图的配置,实现思路:创建两个坐标轴,隐藏两个X轴,去掉Y轴线,保留一个刻度。

完整配置如下:

  1  let yAxisMonth = ["NL-3A s1 t1 s1 t1 s3",
  2         "FE-5A",
  3         "FE-3AC",
  4         "GX6",
  5         "FE-S1",
  6         "FE-7A",
  7         "KC-1B",
  8         "KC-2HB(15TD)",
  9         "KC-2(15TD)",
 10         "FE-7",
 11         "FE-3AD",
 12         "KC-2HB",
 13         "FE-4KACK-2",
 14         "NL-3",
 15         "FE-6"
 16     ];
 17     let barData = [
 18         84,
 19         78,
 20         45,
 21         40,
 22         33,
 23         7,
 24         100,
 25         5,
 26         89,
 27         76,
 28         42,
 29         16,
 30         11,
 31         5,
 32         4
 33 
 34     ]; 
 35 let selectValue= 100,
 36  let ShowPosition= 'KC-1B',
 37 main.setOption({
 38             // backgroundColor: "#020e25",
 39             title: {
 40                 text: Charttitle,
 41                 left: 'center',
 42             },
 43             legend: null,
 44             tooltip: {
 45                 trigger: 'axis',
 46                 axisPointer: {
 47                     type: 'line',  // 默认为直线,可选为:'line' | 'shadow'
 48                     lineStyle: {          // 直线指示器样式设置
 49                         color: '#48b',
 50                         width: 2,
 51                         type: 'solid',
 52                         shadowOffsetX: -160,
 53                         shadowColor: '#48b'
 54                     },
 55                 },
 56                 formatter: function (params) {
 57                     return params[0].name + "<br/>" + '百分比: ' + params[0].value + '%';
 58                 }
 59             },
 60             grid: {
 61                 containLabel: true,
 62                 left: "2%",
 63                 right: "10%",
 64                 top: "10%",
 65                 bottom: "5%",
 66             },
 67             yAxis: [{
 68                 data: yAxisMonth,
 69                 inverse: true,
 70                 boundaryGap: true, // 类目起始和结束两端空白策略
 71                 axisLine: {
 72                     show: true,
 73                     onZero: true,
 74                     lineStyle: {        // 属性lineStyle控制线条样式
 75                         color: '#CFCFCF',
 76                         width: 0,
 77                         type: 'solid',
 78                     }
 79                 },
 80                 axisTick: {
 81                     show: false,
 82                     length: 8,
 83                     alignWithLabel: true,
 84                 },
 85                 axisLabel: {
 86                     margin: 60,
 87                     textStyle: {
 88                         fontSize: 12,
 89                         color: '#777777',
 90                     },
 91                 },
 92             },
 93             {
 94                 type: 'category',
 95                 silent: true,
 96                 position: 'left',// 文字位置
 97                 boundaryGap: true, // 类目起始和结束两端空白策略
 98                 offset: 1,
 99                 data: [0, 0.2, 0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2.0, 2.2, 2.40, 2.60, 2.8, 3],
100                 inverse: false,
101                 axisLine: {
102                     lineStyle: {        // 属性lineStyle控制线条样式
103                         color: '#CFCFCF',
104                         width: 0,
105                         type: 'solid',
106                     },
107                     show: true,
108                 },
109                 axisTick: {
110                     alignWithLabel: true,
111                     length: 12,
112                     // secondTick: {
113                     //     show: true,//是否显示二级刻度
114                     //     interval: 0,//二级刻度间间隔大小
115                     //     length: 12,//二级刻度线的长度
116                     //     lineStyle: { //刻度线的线条样式 
117                     //         color: 'red',
118                     //         width: 12,
119                     //         type: 'solid',
120                     //     }
121                     // }
122                     // lineStyle: {        // 属性lineStyle控制线条样式
123                     //     color: '#CFCFCF',
124                     //     width: 6,
125                     //     type: 'solid',
126                     // },
127                 },
128                 axisPointer: {
129                     show: false,
130                 },
131                 axisLabel: {
132                     margin: 20,
133                     width: 56,
134                     textStyle: {
135                         fontSize: 12,
136                         color: '#333333',
137                     },
138                     shadowOffsetX: -4,
139                     shadowColor: '#CFCFCF',
140                 },
141                 splitLine: {
142                     show:true,
143                     // interval:0,
144                     lineStyle: {
145                         color: '#fff',
146                         shadowOffsetX:-8,
147                         shadowColor:'#CFCFCF',
148                     }
149                 },
150             
151             },
152             ],
153 
154             xAxis: [{
155                 type: "value",
156                 splitLine: {
157                     show: false
158                 },
159                 axisLabel: {
160                     show: false
161                 },
162                 axisTick: {
163                     show: false
164                 },
165                 axisPointer: {
166                     show: false,
167                 },
168                 axisLine: {
169                     show: false
170                 }
171             },
172             {
173                 type: "value",
174                 splitLine: {
175                     show: false
176                 },
177                 axisLabel: {
178                     show: false
179                 },
180                 axisTick: {
181                     show: false
182                 },
183                 axisPointer: {
184                     show: false,
185                 },
186                 axisLine: {
187                     show: false
188                 }
189             },
190             ],
191             series: [{
192                 z: 10,
193                 type: 'pictorialBar',
194                 label: {
195                     normal: {
196                         show: true,
197                         formatter: function (param) {
198                             return (selectValue == param.value) ? '' : param.value + '%';
199                         },
200                         position: 'right',// 文字位置
201                         textStyle: {
202                             fontSize: 12,
203                             color: '#666666',
204                         }
205                     }
206                 },
207                 symbolRepeat: false,
208                 symbolSize: ['100%', 10],// 柱子大小
209                 symbolOffset: [10, 0],
210                 itemStyle: {
211                     normal: {
212                         color: '#FF8E71',
213                     },
214                     emphasis: {
215                         color: '#1790FF',
216                     }
217                 },
218                 symbolClip: true,
219                 symbolPosition: 'end',
220                 symbol: 'rect',
221                 markPoint: {
222                     symbolSize: 32,
223                     symbolOffset: [10, 0],//偏移量
224                     symbolRotate: 270,//旋转
225                     itemStyle: {
226                         normal: {
227                             borderColor: '#1790FF',
228                             borderWidth: 2, // 标注边线线宽,单位px,默认为1
229                             color: '#fff',
230                             label: {
231                                 position: 'insideRight',
232                                 fontSize: 12,
233                                 color: '#1790FF'
234                             }
235                         },
236                     },
237                     normal: {
238                         label: {
239                             position: 'insideRight',
240                         }
241                     },
242                     data: [
243                         { name: '最高', value: '我', xAxis: selectValue, yAxis: ShowPosition },//通过yAxis来控制markPoint的位置
244                         { name: '我', value: '我', xAxis: selectValue, yAxis: ShowPosition },
245                     ]
246                 },
247                 data: barData,
248             },
249             ]
250         });
251         main.dispatchAction({
252             type: 'highlight',          //高亮指定的数据图形。通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
253             dataIndex: 6,          // 可选,数据的 index
254         });

效果:

3.5,堆叠图

stack数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置。

 1  {
 2                     name: '「-3-2」',
 3                     type: 'bar',
 4                     barWidth: '30%',
 5                     stack: '总量',
 6                     color:'#9B65FF',
 7                     label: {
 8                         normal: {
 9                             show: true,
10                             formatter: function (param) {
11                                 return param.value + '%';
12                             },
13                             position: 'top'
14                         }
15                     },
16                     itemStyle: {
17                         normal: {
18                             barBorderRadius: [12, 0, 0,12]
19                         },
20                     },
21                     data: [32, 30]
22                 }

markPoint:图表标注。详细点击查看

效果:

 

$flag 上一页 下一页