echarts3实现柱状图和饼图详解

版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/xiaoxiaoluckylucky/article/details/79374055

本篇文章实现的是以下两种需求：

1，使用Echarts3实现柱状图；

2，使用Echarts3实现饼图；

包含Echarts使用过程中遇到的部分坑的解决办法。

先上效果图：

（PS：饼图实际上是圆的，以上图片是被压缩了）

进入正题，下面是具体实践：

图表实现使用的是Echarts，Echarts官网地址为：http://echarts.baidu.com/examples.html。

一，准备工作

1）获取Echarts

以下为官网推荐的几种获取 ECharts方式：

1. 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。

2. 在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。

3. 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

4. cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

我是采用的第一种方式，直接去官网下载的。下载页面为 http://echarts.baidu.com/download.html

2）引入Echarts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

下载后使用script标签引入：

[html]  view plain  copy

1. <script src="pages/asset/echarts.min.js"></script>  

二，具体实现

以我的demo为例，直接贴代码吧。

1）使用到的样式

[css]  view plain  copy

1. .canvas_pie_chart{  
2.     height: 90%;  
3.     width: 90%;  
4.     margin-left: 5%;  
5.     margin-right: 5%;  
6. }  
7.   
8. .asset_pie_back{  
9.     position: absolute;  
10.     width: 2rem;  
11.     height: 2rem;  
12.     top: 6.5rem;  
13.     left: 0.5rem;  
14.     z-index: 99;  
15.     display: none;  
16. }  

2）页面布局

[html]  view plain  copy

1. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
2. <div id="asset_chart_bar" style="width: 100%;height:90%;"></div>  
3. <div id="asset_chart_pie" style="width: 100%;height:90%;"></div>  
4. <img src="images/query/search_clear.png" class="asset_pie_back">  

3）js实现

[javascript]  view plain  copy

1. var assetStatics = function () {  
2.   
3.     var assetChartPie, assetChartBar, color_list;  
4.   
5.     function beforeInit(p) {  
6.         initData();  
7.     }  
8.   
9.     function init(p) {  
10.         // 基于准备好的dom，初始化echarts实例  
11.         assetChartPie = echarts.init(document.getElementById('asset_chart_pie'));  
12.   
13.         assetChartBar = echarts.init(document.getElementById('asset_chart_bar'));  
14.   
15.         $$('#asset_chart_pie').find("canvas").addClass('canvas_pie_chart');  
16.   
17.         bindEvent("on");  
18.     }  
19.   
20.     function destroy(p) {  
21.         bindEvent("off");  
22.     }  
23.   
24.     /* 
25.      * 获取数据 
26.      * */  
27.     function initData() {  
28.         color_list = ['#96CEEA', '#7BD6B1', '#4EA8F2', '#FF9566', '#F9E385', '#9C6448',  
29.             '#FFBC6C', '#9E96EA', '#9EEA42', '#A1B1BE', '#96CEEA', '#7BD6B1',  
30.             '#4EA8F2', '#FF9566', '#F9E385', '#9C6448', '#FFBC6C', '#9E96EA',  
31.             '#9EEA42', '#A1B1BE', '#96CEEA', '#7BD6B1', '#4EA8F2', '#FF9566',  
32.             '#F9E385', '#9C6448', '#FFBC6C', '#9E96EA', '#9EEA42', '#A1B1BE'];  
33.     }  
34.   
35.     /* 
36.      * 绑定事件 
37.      * */  
38.     function bindEvent(method) {  
39.         if (method == "on") {  
40.             /* 
41.             * 柱状图item项点击事件 
42.             * 从seriesId获取当前item项id，然后可根据此id获取需要的数据 
43.             * */  
44.             assetChartBar.on('click', function (params) {  
45.                 // console.log(params);  
46.                 var resource_ids = params.seriesId;  
47.                 var item_index = params.dataIndex;  
48.                 var resource_id = resource_ids.split(',')[item_index];  
49.                 switchToPieChart(resource_id);  
50.             });  
51.   
52.             /* 
53.              * 饼状图返回按钮 
54.              * 返回到柱状图 
55.              * */  
56.             $$(document).on('click', '.asset_pie_back', function () {  
57.                 $$('#asset_chart_bar').css("display", "block");  
58.                 $$('#asset_chart_pie').css("display", "none");  
59.                 $$('.asset_pie_back').css("display", "none");  
60.             });  
61.   
62.             assetChartPie.on('click', function (params) {  
63.             });  
64.   
65.             // 图例开关的行为只会触发 legendselectchanged 事件  
66.             assetChartPie.on('legendselectchanged', function (params) {  
67.                 // 获取点击图例的选中状态  
68.                 var isSelected = params.selected[params.name];  
69.                 // 在控制台中打印  
70.                 console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);  
71.                 // 打印所有图例的状态  
72.                 console.log(params.selected);  
73.             });  
74.   
75.             assetChartPie.on('legendselected', function (params) {  
76.   
77.             });  
78.   
79.             assetChartPie.on('legendunselected', function (params) {  
80.   
81.             });  
82.         }  
83.     }  
84.   
85.     /* 
86.      * 显示饼图 
87.      * */  
88.     function showPieChart(data) {  
89.         var option_pie_chart = {  
90.             // 全图默认背景  
91.             backgroundColor: 'rgba(0,0,0,0)',  
92.             // 默认色板  
93.             color: data.color_list,  
94.             // 图表标题  
95.             title: {  
96.                 show: false,  
97.                 x: 'center',                 // 水平安放位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）  
98.                 y: 45,                  // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）  
99.                 //textAlign: null          // 水平对齐方式，默认根据x设置自动调整  
100.                 backgroundColor: 'rgba(0,0,0,0)',  
101.                 borderColor: '#ccc',       // 标题边框颜色  
102.                 borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）  
103.                 padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css  
104.                 itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，  
105.                 textStyle: {  
106.                     fontSize: 18,  
107.                     fontWeight: 'bolder',  
108.                     color: '#333'          // 主标题文字颜色  
109.                 },  
110.                 subtextStyle: {  
111.                     color: '#aaa'          // 副标题文字颜色  
112.                 },  
113.                 text: data.title  
114.             },  
115.             // 图例  
116.             legend: {  
117.                 orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：'horizontal' ¦ 'vertical'  
118.                 x: 'center',               // 水平安放位置，默认为全图居中，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）  
119.                 y: 'bottom',                  // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）  
120.                 backgroundColor: 'rgba(0,0,0,0)',  
121.                 borderColor: '#ccc',       // 图例边框颜色  
122.                 borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）  
123.                 padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，  
124.                                            // 接受数组分别设定上右下左边距，同css  
125.                 itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，  
126.                                            // 横向布局时为水平间隔，纵向布局时为纵向间隔  
127.                 itemWidth: 20,             // 图例图形宽度  
128.                 itemHeight: 14,            // 图例图形高度  
129.                 textStyle: {  
130.                     color: '#333'          // 图例文字颜色  
131.                 },  
132.                 data: data.detail  
133.             },  
134.             // 提示框  
135.             tooltip: {  
136.                 trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'  
137.                 showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms  
138.                 hideDelay: 100,            // 隐藏延迟，单位ms  
139.                 transitionDuration: 0.4,  // 动画变换时间，单位s  
140.                 backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色  
141.                 borderColor: '#333',       // 提示边框颜色  
142.                 borderRadius: 4,           // 提示边框圆角，单位px，默认为4  
143.                 borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）  
144.                 padding: 5,                // 提示内边距，单位px，默认各方向内边距为5，  
145.                                            // 接受数组分别设定上右下左边距，同css  
146.                 axisPointer: {            // 坐标轴指示器，坐标轴触发有效  
147.                     type: 'line',         // 默认为直线，可选为：'line' | 'shadow'  
148.                     lineStyle: {          // 直线指示器样式设置  
149.                         color: '#48b',  
150.                         width: 2,  
151.                         type: 'solid'  
152.                     },  
153.                     shadowStyle: {                       // 阴影指示器样式设置  
154.                         width: 'auto',                   // 阴影大小  
155.                         color: 'rgba(150,150,150,0.3)'  // 阴影颜色  
156.                     }  
157.                 },  
158.                 textStyle: {  
159.                     color: '#fff'  
160.                 },  
161.                 formatter: "{a} <br/>{b}: {c} ({d}%)"  
162.             },  
163.             series: [  
164.                 {  
165.                     name: '植物分类统计',  
166.                     type: 'pie',  
167.                     center: ['50%', '50%'],    // 默认全局居中  
168.                     radius: ['40%', '55%'],     //环  
169.                     clockWise: false,          // 默认逆时针  
170.                     startAngle: 90,  
171.                     minAngle: 0,                // 最小角度改为0  
172.                     selectedOffset: 10,         // 选中是扇区偏移量  
173.                     itemStyle: {  
174.                         normal: {  
175.                             // color: 各异,  
176.                             borderColor: '#fff',  
177.                             borderWidth: 1,  
178.                             label: {  
179.                                 show: true,  
180.                                 position: 'outer'  
181.                                 // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE  
182.                             },  
183.                             labelLine: {  
184.                                 show: true,  
185.                                 length: 20,  
186.                                 lineStyle: {  
187.                                     // color: 各异,  
188.                                     width: 1,  
189.                                     type: 'solid'  
190.                                 }  
191.                             }  
192.                         },  
193.                         emphasis: {  
194.                             // color: 各异,  
195.                             borderColor: 'rgba(0,0,0,0)',  
196.                             borderWidth: 1,  
197.                             label: {  
198.                                 show: true,  
199.                                 position: 'outer'  
200.                                 // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE  
201.                             },  
202.                             labelLine: {  
203.                                 show: true,  
204.                                 length: 20,  
205.                                 lineStyle: {  
206.                                     // color: 各异,  
207.                                     width: 1,  
208.                                     type: 'solid'  
209.                                 }  
210.                             }  
211.                         }  
212.                     },  
213.                     data: data.detail  
214.                 }  
215.             ]  
216.         };  
217.         assetChartPie.showLoading();  
218.         //调整饼图参数  
219.         option_pie_chart = adjustPieChartOption(data, option_pie_chart);  
220.         assetChartPie.setOption(option_pie_chart, true);  
221.         assetChartPie.hideLoading();  
222.     }  
223.   
224.     /* 
225.      * 显示柱状图 
226.      * */  
227.     function showBarChart(data) {  
228.         var option_bar_chart = {  
229.             // 全图默认背景  
230.             backgroundColor: 'rgba(0,0,0,0)',  
231.             // 默认色板  
232.             color: data.color_list,  
233.             // 图表标题  
234.             title: {  
235.                 show: false,  
236.                 x: 'center',                 // 水平安放位置，默认为左对齐，可选为：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）  
237.                 y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）  
238.                 //textAlign: null          // 水平对齐方式，默认根据x设置自动调整  
239.                 backgroundColor: 'rgba(0,0,0,0)',  
240.                 borderColor: '#ccc',       // 标题边框颜色  
241.                 borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）  
242.                 padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距，同css  
243.                 itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，  
244.                 textStyle: {  
245.                     fontSize: 18,  
246.                     fontWeight: 'bolder',  
247.                     color: '#333'          // 主标题文字颜色  
248.                 },  
249.                 subtextStyle: {  
250.                     color: '#aaa'          // 副标题文字颜色  
251.                 },  
252.                 text: data.title  
253.             },  
254.             tooltip: {  
255.                 trigger: 'axis',  
256.                 axisPointer: {            // 坐标轴指示器，坐标轴触发有效  
257.                     type: 'line',        // 默认为直线，可选为：'line' | 'shadow'  
258.                     label: {  
259.                         show: false  
260.                     }  
261.                 }  
262.             },  
263.             calculable: true,  
264.             grid: {  
265.                 left: '3%',  
266.                 right: '4%',  
267.                 bottom: '3%',  
268.                 containLabel: true  
269.             },  
270.             xAxis: [  
271.                 {  
272.                     type: 'category',  
273.                     data: data.x_axis,  
274.                     axisTick: {  
275.                         alignWithLabel: true  
276.                     },  
277.                     axisLabel: {  
278.                         formatter: function (val) {  
279.                             //x轴标签文字纵向排列，解决x轴标签过长时，柱状图部分item项不显示  
280.                             return val.split("").join("\n");  
281.                         }  
282.                     }  
283.                 }  
284.             ],  
285.             yAxis: [  
286.                 {  
287.                     name: '树木数',  
288.                     type: 'value'  
289.                 }  
290.             ],  
291.             dataZoom: [  
292.                 {  
293.                     //是否显示左侧收缩提示条  
294.                     show: false,  
295.                     start: 0,  
296.                     end: 100  
297.                 },  
298.                 {  
299.                     type: 'inside',  
300.                     start: 0,  
301.                     end: 100  
302.                 },  
303.                 {  
304.                     //是否显示右侧收缩提示条  
305.                     show: false,  
306.                     yAxisIndex: 0,  
307.                     filterMode: 'empty',  
308.                     width: 30,  
309.                     height: '80%',  
310.                     showDataShadow: false,  
311.                     left: '93%'  
312.                 }  
313.             ],  
314.             series: [  
315.                 {  
316.                     name: '植物数',  
317.                     type: 'bar',  
318.                     center: ['50%', '50%'],    // 默认全局居中  
319.                     barWidth: '25%',  
320.                     barMaxWidth: 25,//最大宽度  
321.                     data: data.y_axis,  
322.                     id: data.id_arr,  
323.                     itemStyle: {  
324.                         //修改颜色  
325.                         normal: {  
326.                             color: function (params) {  
327.                                 return data.color_list[params.dataIndex]  
328.                             },  
329.                             //bar上显示的提示信息  
330.                             label: {  
331.                                 show: true,  
332.                                 position: 'top',  
333.                                 formatter: '{c}'  
334.                             }  
335.                         }  
336.                     }  
337.                 }  
338.             ]  
339.         };  
340.         assetChartBar.showLoading();  
341.         //调整柱状图参数  
342.         option_bar_chart = adjustBarChartOption(data, option_bar_chart);  
343.         //注意此处：echarts默认为merge，以下setOption会导致数据组合呈现，会同时显示本次和上次的数据  
344.         // assetChartBar.setOption(option_bar_chart);  
345.         //设置为true即可只使用新数据  
346.         assetChartBar.setOption(option_bar_chart, true);  
347.         assetChartBar.hideLoading();  
348.     }  
349.   
350.     /* 
351.      * 根据当前所选切换表格视图 
352.      * */  
353.     function switchChartView(type) {  
354.         if (type == 'bar') {  
355.             switchToBarChart();  
356.         } else {  
357.             switchToPieChart();  
358.         }  
359.     }  
360.   
361.     /* 
362.      * 切换到柱状图视图 
363.      * */  
364.     function switchToBarChart(data) {  
365.         $$('#asset_chart_bar').css("display", "block");  
366.         $$('#asset_chart_pie').css("display", "none");  
367.         $$('.asset_pie_back').css("display", "none");  
368.         assembleDataForBarChart(data, function (bar_data) {  
369.             console.log(bar_data);  
370.             showBarChart(bar_data);  
371.         });  
372.     }  
373.   
374.     /* 
375.      * 切换到饼状图视图 
376.      * */  
377.     function switchToPieChart(data) {  
378.         $$('#asset_chart_bar').css("display", "none");  
379.         $$('#asset_chart_pie').css("display", "block");  
380.         $$('.asset_pie_back').css("display", "block");  
381.         assembleDataForPieChart(data, function (pie_data) {  
382.             console.log(pie_data);  
383.             showPieChart(pie_data);  
384.         });  
385.     }  
386.   
387.     /* 
388.      * 为饼图组装数据 
389.      * 假数据 
390.      * */  
391.     function assembleDataForPieChart(data, _callback) {  
392.         var pie_detail = [  
393.             {  
394.                 name: '椰树',  
395.                 value: 85  
396.             },  
397.             {  
398.                 name: '榕树',  
399.                 value: 156  
400.             },  
401.             {  
402.                 name: '桂花树',  
403.                 value: 684  
404.             },  
405.             {  
406.                 name: '菠萝蜜',  
407.                 value: 48  
408.             },  
409.             {  
410.                 name: '木棉树',  
411.                 value: 62  
412.             },  
413.             {  
414.                 name: '四季树',  
415.                 value: 37  
416.             },  
417.             {  
418.                 name: '其他',  
419.                 value: 76  
420.             }  
421.         ];  
422.         var pie_data = {  
423.             title: '分类统计',  
424.             color_list: color_list,  
425.             detail: pie_detail  
426.         }  
427.         _callback(pie_data);  
428.     }  
429.   
430.     /* 
431.      * 为柱状图组装数据 
432.      * 假数据 
433.      * */  
434.     function assembleDataForBarChart(data, _callback) {  
435.         var bar_id_arr = ['0_1', '0_2', '0_3', '0_4', '0_5', '0_6', '0_7', '0_8', '0_9', '0_10', '0_11', '0_12'];  
436.         var bar_x_arr = ['园区1', '园区2', '园区3', '园区4', '园区5', '园区6', '园区7', '园区8', '园区9', '园区10', '园区11', '园区12'];  
437.         var bar_y_arr = [895, 652, 485, 785, 123, 584, 74, 555, 256, 888, 777, 520];  
438.         var bar_data = {  
439.             title: '植物统计',  
440.             color_list: color_list,  
441.             id_arr: bar_id_arr,  
442.             x_axis: bar_x_arr,  
443.             y_axis: bar_y_arr  
444.         };  
445.         _callback(bar_data);  
446.     }  
447.   
448.     /* 
449.      * 根据柱状图item项数量调整柱状图显示参数(柱状图item宽度、显示X轴item项显示数量、柱状图item项颜色等) 
450.      * 避免柱状图item项太少时柱状图item项宽度太大，柱状图item项太多时柱状图item项宽度太小，难看 
451.      * 这里是简单测试，可根据需求自行调整 
452.      * */  
453.     function adjustBarChartOption(data, option) {  
454.         var count = data.x_axis.length;  
455.         //柱状图item宽度  
456.         var percent_show = 100;  
457.         if (count < 11) {  
458.             percent_show = 100;  
459.         } else if (count > 10 && count < 21) {  
460.             percent_show = percent_show * 0.8;  
461.             option.series[0].barWidth = '40%';  
462.         } else if (count > 20 && count < 31) {  
463.             percent_show = percent_show * 0.45;  
464.             option.series[0].barWidth = '50%';  
465.         } else {  
466.             percent_show = percent_show * 0.3;  
467.             option.series[0].barWidth = '60%';  
468.             //预置色数组长度不够用  
469.             var color_list = [];  
470.             for (var i = 0; i < count; i++) {  
471.                 color_list[i] = '#96CEEA';  
472.             }  
473.             //设置柱状图item项颜色  
474.             option.color = color_list;  
475.         }  
476.         //设置柱状图X轴显示的item项数量  
477.         option.dataZoom[0].end = percent_show;  
478.         option.dataZoom[1].end = percent_show;  
479.   
480.         return option;  
481.     }  
482.   
483.     /* 
484.      * 根据饼图item项调整饼图参数(饼图圆心位置) 
485.      * 避免饼图item项太多时，legend和饼图重叠 
486.      * 这里是简单测试，可根据需求自行调整 
487.      * */  
488.     function adjustPieChartOption(data, option) {  
489.         var count = data.detail.length;  
490.         //饼图圆心高度  
491.         var percent_location = '45%';  
492.         if (count == 0) {  
493.             percent_location = '50%';  
494.             option.color = ['#BFBFBF'];  
495.             option.series[0].data = {name: '', value: 0};  
496.             option.series[0].itemStyle.normal.show = true;  
497.             option.legend.data = {name: '', value: 0};  
498.             option.legend.show = false;  
499.         } else if (count > 0 && count < 11) {  
500.             percent_location = '40%';  
501.         } else if (count > 10 && count < 21) {  
502.             percent_location = '35%';  
503.         } else if (count > 20 && count < 31) {  
504.             percent_location = '30%';  
505.         } else {  
506.             percent_location = '30%';  
507.             //预置色数组长度不够用  
508.             var color_list = [];  
509.             for (var i = 0; i < count; i++) {  
510.                 color_list[i] = '#96CEEA';  
511.             }  
512.             //设置饼图item项颜色  
513.             option.color = color_list;  
514.         }  
515.         //设置饼图圆心高度  
516.         option.series[0].center[1] = percent_location;  
517.   
518.         return option;  
519.     }  
520.   
521.     return {  
522.         beforeInit: beforeInit,  
523.         init: init,  
524.         destroy: destroy,  
525.         switchChartView: switchChartView  
526.     }  
527. }();  

4) 使用

1，在页面初始化时如下调用，初始化图表相关

[javascript]  view plain  copy

1. assetStatics.beforeInit();  
2. assetStatics.init();  

2，需要显示图标时如下调用

[javascript]  view plain  copy

1. assetStatics.switchChartView('bar');  

三，写在后面

1）以上为项目前期技术调研时写的demo，非常简陋，勿喷。后面实际项目中做了不少优化处理（包括样式、关联逻辑、异常处理等），欢迎交流讨论；

2）已在以上代码注释中体现了部分坑的解决办法，后面实际项目中还遇到了些坑并都已解决，马上要下班了，在这里就不写出来了，后面有空也许会完善。各位亲碰到了问题的话可以在评论里留言，说不定你遇到的坑我也遇到过；