Echarts使用心得总结（二）

前言：

前一段时间一直都挺忙的，各种事，也没来得及每周的总结，趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下，趁着周末跟大家分享一下。之前写过一篇相关的文章，当时主要是讲了如何引入、使用Echart，最新的Echart版本已经发布，之前讲的很多文件都可以删除了，下边会一一给大家细讲。

为了更好的讲解如何使用这个图形渲染插件，我会通过创建一个解决方案的形式一点点给大家讲解清楚。

1.  EChart最新的文档目录。

首先创建一个解决方案，目录如下：

之前的一篇文章中讲到如果要使用Echarts还要下载相关的ZRender的渲染包，最新的版本已经将这些合并在一起了，只需要引用图中红框标注的echarts文件夹下的文件即可。各文件的作用如下：

l  Echarts-map.js :主要用来渲染跟地图相关

l  Echarts.js :基本的常规图形相关

l  Esl.js :图像引擎

Statics文件夹下的ECharts.js文件，为我自己抽象总结出来的用于Echarts的配置文件加载、数据处理、初始化各种图像类型的配置、图像渲染的一些方法。

2.  抽象之后的Echarts。

根据Echarts官网的讲解，我把Echarts的使用归结为一下的几个步骤，同时这些步骤相应的实现对应到Statics文件夹下的Echarts.js，该文件的主要代码目录如下：

[javascript] view plaincopy

1. Var ECharts={
2. ChartConfig:function(container,option){ …..},//加载Echarts配置文件
3. ChartDataFormate:{….},//数据格式化
4. ChartOptionTemplates:{….},//初始化常用的图表类型
5. Charts:{ RenderChart:function(option){….},//渲染图表
6. RenderMap:function(option){…}//渲染地图
7. }
8. }；

2.1 Echarts配置文件的引入

在开始使用时，首先需要引入Echarts 的配置文件，也就是要加载基本的图像类型，我们可以在每一个页面都引入，但是这样抽象化程度不高，重复使用率也不高，只需要有一个配置项在每次引用的时候加载一下即可，对应到具体的代码实现，如下：

[javascript] view plaincopy

1. ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置
2. var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径
3. var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径
4. require.config({//引入常用的图表类型的配置
5. paths: {
6. echarts: chart_path,
7. ‘echarts/chart/bar‘: chart_path,
8. ‘echarts/chart/pie‘: chart_path,
9. ‘echarts/chart/line‘: chart_path,
10. ‘echarts/chart/k‘: chart_path,
11. ‘echarts/chart/scatter‘: chart_path,
12. ‘echarts/chart/radar‘: chart_path,
13. ‘echarts/chart/chord‘: chart_path,
14. ‘echarts/chart/force‘: chart_path,
15. ‘echarts/chart/map‘: map_path
16. }
17. });
18. this.option = { chart: {}, option: option, container: container };
19. return this.option;
20. }

2.2 数据格式化

为了能够更好的展现各种的数据，在进行图表的option配置之前，需要先对从后台请求过来的数据进行格式化。后台返回的数据必须是json格式的数据，且数据类型只能为以下两种类型:

Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]

Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]

具体的代码实现如下：

[javascript] view plaincopy

1. ChartDataFormate: {
2. FormateNOGroupData: function (data) {//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
3. var categories = [];
4. var datas = [];
5. for (var i = 0; i < data.length; i++) {
6. categories.push(data[i].name || "");
7. datas.push({ name: data[i].name, value: data[i].value || 0 });
8. }
9. return { category: categories, data: datas };
10. },
11. FormateGroupData: function (data, type, is_stack) {//data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图
12. var chart_type = ‘line‘;
13. if (type)
14. chart_type = type || ‘line‘;
15. var xAxis = [];
16. var group = [];
17. var series = [];
18. for (var i = 0; i < data.length; i++) {
19. for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);
20. if (j == xAxis.length)
21. xAxis.push(data[i].name);
22. for (var k = 0; k < group.length && group[k] != data[i].group; k++);
23. if (k == group.length)
24. group.push(data[i].group);
25. }
26. for (var i = 0; i < group.length; i++) {
27. var temp = [];
28. for (var j = 0; j < data.length; j++) {
29. if (group[i] == data[j].group) {
30. if (type == "map")
31. temp.push({ name: data[j].name, value: data[i].value });
32. else
33. temp.push(data[j].value);
34. }
35. }
36. switch (type) {
37. case ‘bar‘:
38. var series_temp = { name: group[i], data: temp, type: chart_type };
39. if (is_stack)
40. series_temp = $.extend({}, { stack: ‘stack‘ }, series_temp);
41. break;
42. case ‘map‘:
43. var series_temp = {
44. name: group[i], type: chart_type, mapType: ‘china‘, selectedMode: ‘single‘,
45. itemStyle: {
46. normal: { label: { show: true} },
47. emphasis: { label: { show: true} }
48. },
49. data: temp
50. };
51. break;
52. case ‘line‘:
53. var series_temp = { name: group[i], data: temp, type: chart_type };
54. if (is_stack)
55. series_temp = $.extend({}, { stack: ‘stack‘ }, series_temp);
56. break;
57. default:
58. var series_temp = { name: group[i], data: temp, type: chart_type };
59. }
60. series.push(series_temp);
61. }
62. return { category: group, xAxis: xAxis, series: series };
63. },

[javascript] view plaincopy

2.3 各种图表类型的配置初始化

在通过2.2步骤将从后台获得的数据进行初始化之后，我们就可以进行图表的option的配置了，在这里我主要对常用的饼图、柱图（单一、分组、堆积柱图）、折线图（分组、堆积折线图）、柱图+折线（增幅）图、中国地图等图进行了配置项的初始化。具体实现如下：

[javascript] view plaincopy

1. ChartOptionTemplates: {
2. CommonOption: {//通用的图表基本配置
3. tooltip: {
4. trigger: ‘axis‘//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
5. },
6. toolbox: {
7. show: true, //是否显示工具栏
8. feature: {
9. mark: true,
10. dataView: { readOnly: false }, //数据预览
11. restore: true, //复原
12. saveAsImage: true //是否保存图片
13. }
14. }
15. },
16. CommonLineOption: {//通用的折线图表的基本配置
17. tooltip: {
18. trigger: ‘axis‘
19. },
20. toolbox: {
21. show: true,
22. feature: {
23. dataView: { readOnly: false }, //数据预览
24. restore: true, //复原
25. saveAsImage: true, //是否保存图片
26. magicType: [‘line‘, ‘bar‘]//支持柱形图和折线图的切换
27. }
28. }
29. },
30. Pie: function (data, name) {//data:数据格式：{name：xxx,value:xxx}...
31. var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);
32. var option = {
33. tooltip: {
34. trigger: ‘item‘,
35. formatter: ‘{b} : {c} ({d}/%)‘,
36. show: true
37. },
38. legend: {
39. orient: ‘vertical‘,
40. x: ‘left‘,
41. data: pie_datas.category
42. },
43. series: [
44. {
45. name: name || "",
46. type: ‘pie‘,
47. radius: ‘65%‘,
48. center: [‘50%‘, ‘50%‘],
49. data: pie_datas.data
50. }
51. ]
52. };
53. return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);
54. },
55. Lines: function (data, name, is_stack) { //data:数据格式：{name：xxx,group:xxx,value:xxx}...
56. var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, ‘line‘, is_stack);
57. var option = {
58. legend: {
59. data: stackline_datas.category
60. },
61. xAxis: [{
62. type: ‘category‘, //X轴均为category，Y轴均为value
63. data: stackline_datas.xAxis,
64. boundaryGap: false//数值轴两端的空白策略
65. }],
66. yAxis: [{
67. name: name || ‘‘,
68. type: ‘value‘,
69. splitArea: { show: true }
70. }],
71. series: stackline_datas.series
72. };
73. return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
74. },
75. Bars: function (data, name, is_stack) {//data:数据格式：{name：xxx,group:xxx,value:xxx}...
76. var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, ‘bar‘, is_stack);
77. var option = {
78. legend: bars_dates.category,
79. xAxis: [{
80. type: ‘category‘,
81. data: bars_dates.xAxis,
82. axisLabel: {
83. show: true,
84. interval: ‘auto‘,
85. rotate: 0,
86. margion: 8
87. }
88. }],
89. yAxis: [{
90. type: ‘value‘,
91. name: name || ‘‘,
92. splitArea: { show: true }
93. }],
94. series: bars_dates.series
95. };
96. return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
97. },
98. ……..//其他的图表配置，如柱图+折线、地图
99. ……..
100. }

2.4 图形的渲染

在配置好图表类型的option之后，就可进行图表的渲染了，具体的代码实现如下：

[javascript] view plaincopy

1. Charts: {
2. RenderChart: function (option) {
3. require([
4. ‘echarts‘,
5. ‘echarts/chart/line‘,
6. ‘echarts/chart/bar‘,
7. ‘echarts/chart/pie‘,
8. ‘echarts/chart/k‘,
9. ‘echarts/chart/scatter‘,
10. ‘echarts/chart/radar‘,
11. ‘echarts/chart/chord‘,
12. ‘echarts/chart/force‘,
13. ‘echarts/chart/map‘
14. ],
15. function (ec) {
16. echarts = ec;
17. if (option.chart && option.chart.dispose)
18. option.chart.dispose();
19. option.chart = echarts.init(option.container);
20. window.onresize = option.chart.resize;
21. option.chart.setOption(option.option, true);
22. });
23. },
24. ……..//渲染其他的图表类型，如：地图
25. ……..
26. }

3.  具体页面的使用

经过2步骤中的一些列的配置、处理、初始化，我们就可以具体的使用了，在每一个aspx页面使用之前，我们首先需要在页面的标题引入以下的文件：

[javascript] view plaincopy

1. <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
2. <script src="/Statics/echarts/esl.js" type="text/javascript"></script>
3. <script src="/Statics/ECharts.js" type="text/javascript"></script>

引入之后就可进行使用了，下面演示几个常用的图表的使用：

首页每个aspx页面上都有一个div用来做渲染图表的容器，如下：

<div id="echart" style="width:100%; height:400px;"></div>

3.1 饼图

3.1.1 实现代码

[javascript] view plaincopy

1. <script type="text/javascript">
2. $(
3. function () {
4. var data = [{ name: ‘olive‘, value: 20 }, { name: ‘only‘, value: 20 }, { name: ‘momo‘, value: 20}];
5. var option = ECharts.ChartOptionTemplates.Pie(data);
6. var container = $("#echart")[0];
7. opt = ECharts.ChartConfig(container, option);
8. ECharts.Charts.RenderChart(opt);
9. }
10. );
11. </script>

3.1.2 展示效果

3.2 柱图

3.2.1 实现代码

[javascript] view plaincopy

1. <script type="text/javascript">
2. $(
3. function () {
4. var data = [{ name: ‘olive‘, value: 20 }, { name: ‘only‘, value: 20 }, { name: ‘momo‘, value: 20}];
5. var option = ECharts.ChartOptionTemplates.Bar(data);
6. var container = $("#echart")[0];
7. opt = ECharts.ChartConfig(container, option);
8. ECharts.Charts.RenderChart(opt);
9. }
10. );
11. $(
12. function () {
13. var data = [{ name: ‘2014-01‘, value: 20, group: ‘A‘ }, { name: ‘2014-01‘, value: 40, group: ‘B‘ }, { name: ‘2014-02‘, value: 30, group: ‘A‘ }, { name: ‘2014-02‘, value: 10, group: ‘B‘ }, { name: ‘2014-03‘, value: 200, group: ‘A‘ }, { name: ‘2014-03‘, value: 60, group: ‘B‘ }, { name: ‘2014-04‘, value: 50, group: ‘A‘ }, { name: ‘2014-04‘, value: 45, group: ‘B‘ }, { name: ‘2014-05‘, value: 110, group: ‘A‘ }, { name: ‘2014-05‘, value: 80, group: ‘B‘ }, { name: ‘2014-06‘, value: 90, group: ‘A‘ }, { name: ‘2014-06‘, value: 60, group: ‘B‘}];
14. var option = ECharts.ChartOptionTemplates.Bars(data,‘Love‘);
15. var container = $("#echart")[0];
16. opt = ECharts.ChartConfig(container, option);
17. ECharts.Charts.RenderChart(opt);
18. var option = ECharts.ChartOptionTemplates.Bars(data, ‘Love‘, true);
19. var container = $("#echart1")[0];
20. opt = ECharts.ChartConfig(container, option);
21. ECharts.Charts.RenderChart(opt);
22. }
23. );
24. </script>

3.2.2展示效果

3.3 折线图

3.3.1 实现代码

[javascript] view plaincopy

1. <script type="text/javascript">
2. $(function () {
3. var data = [
4. { name: ‘2013-01‘, group: ‘olive‘, value: 116 },
5. { name: ‘2013-01‘, group: ‘momo‘, value: 115 },
6. { name: ‘2013-01‘, group: ‘only‘, value: 222 },
7. { name: ‘2013-01‘, group: ‘for‘, value: 324 },
8. { name: ‘2013-02‘, group: ‘olive‘, value: 156 },
9. { name: ‘2013-02‘, group: ‘momo‘, value: 185 },
10. { name: ‘2013-02‘, group: ‘only‘, value: 202 },
11. { name: ‘2013-02‘, group: ‘for‘, value: 34 },
12. { name: ‘2013-03‘, group: ‘olive‘, value: 16 },
13. { name: ‘2013-03‘, group: ‘momo‘, value: 51 },
14. { name: ‘2013-03‘, group: ‘only‘, value: 22 },
15. { name: ‘2013-03‘, group: ‘for‘, value: 84 }
16. ];
17. var opt = HighChart.ChartOptionTemplates.Line(data, ‘Love-Rate‘, "折线图示例");
18. var container = $("#container");
19. HighChart.RenderChart(opt, container);
20. });
21. $(
22. function () {
23. var data = [{ name: ‘2014-01‘, value: 20, group: ‘A‘ }, { name: ‘2014-01‘, value: 40, group: ‘B‘ }, { name: ‘2014-02‘, value: 30, group: ‘A‘ }, { name: ‘2014-02‘, value: 10, group: ‘B‘ }, { name: ‘2014-03‘, value: 200, group: ‘A‘ }, { name: ‘2014-03‘, value: 60, group: ‘B‘ }, { name: ‘2014-04‘, value: 50, group: ‘A‘ }, { name: ‘2014-04‘, value: 45, group: ‘B‘ }, { name: ‘2014-05‘, value: 110, group: ‘A‘ }, { name: ‘2014-05‘, value: 80, group: ‘B‘ }, { name: ‘2014-06‘, value: 90, group: ‘A‘ }, { name: ‘2014-06‘, value: 60, group: ‘B‘}];
24. var option = ECharts.ChartOptionTemplates.Lines(data,‘lines‘,false);
25. var container = $("#echart")[0];
26. opt = ECharts.ChartConfig(container, option);
27. ECharts.Charts.RenderChart(opt);
28. var option = ECharts.ChartOptionTemplates.Lines(data, ‘lines‘, true);
29. var container = $("#echart1")[0];
30. opt = ECharts.ChartConfig(container, option);
31. ECharts.Charts.RenderChart(opt);
32. }
33. );
34. </script>

3.3.2展示效果

3.4 柱图+折线（增幅）图

3.4.1 展示效果

3.5 地图

3.5.3 展示效果

到这里，基本就把echart的抽象跟使用讲完了，因为时间的关系，还有一些图形的配置、数据处理没有列出代码，但是基本上实现都差不多。希望能给大家带来一些帮助和启发。后续会继续推出HightCharts的抽象使用，敬请期待。