Go语言视频零基础入门到精通

admin

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，该文件的主要代码目录如下：

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

复制代码

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

1. ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置
3.         var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径
5.         var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径
7.         require.config({//引入常用的图表类型的配置
9.             paths: {
11.                 echarts: chart_path,
13.                 "echarts/chart/bar": chart_path,
15.                 "echarts/chart/pie": chart_path,
17.                 "echarts/chart/line": chart_path,
19.                 "echarts/chart/k": chart_path,
21.                 "echarts/chart/scatter": chart_path,
23.                 "echarts/chart/radar": chart_path,
25.                 "echarts/chart/chord": chart_path,
27.                 "echarts/chart/force": chart_path,
29.                 "echarts/chart/map": map_path
31.             }
33.         });
35.         this.option = { chart: {}, option: option, container: container };
37.         return this.option;
39.     }
42. 　　
44. 2.2 数据格式化
46. 为了能够更好的展现各种的数据，在进行图表的option配置之前，需要先对从后台请求过来的数据进行格式化。后台返回的数据必须是json格式的数据，且数据类型只能为以下两种类型:
48.        Result1=[{name:XXX,value:XXX},{name:XXX,value:XXX}….]
50.        Result2=[{name:XXX,group:XXX,value:XXX},{name:XXX,group:XXX,value:XXX]
52. 具体的代码实现如下：
54. ChartDataFormate: {
56.         FormateNOGroupData: function (data) {//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
58.             var categories = [];
60.             var datas = [];
62.             for (var i = 0; i < data.length; i++) {
64.                 categories.push(data[i].name || "");
66.                 datas.push({ name: data[i].name, value: data[i].value || 0 });
68.             }
70.             return { category: categories, data: datas };
72.         },
74.         FormateGroupData: function (data, type, is_stack) {//data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack
75. 表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图
77.             var chart_type = "line";
79.             if (type)
81.                 chart_type = type || "line";
83.             var xAxis = [];
85.             var group = [];
87.             var series = [];
89.             for (var i = 0; i < data.length; i++) {
91.                 for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);
93.                 if (j == xAxis.length)
95.                     xAxis.push(data[i].name);
97.                 for (var k = 0; k < group.length && group[k] != data[i].group; k++);
99.                 if (k == group.length)
101.                     group.push(data[i].group);
103.             }
107.             for (var i = 0; i < group.length; i++) {
109.                 var temp = [];
111.                 for (var j = 0; j < data.length; j++) {
113.                     if (group[i] == data[j].group) {
115.                         if (type == "map")
117.                             temp.push({ name: data[j].name, value: data[i].value });
119.                         else
121.                             temp.push(data[j].value);
123.                     }
125.                 }
127.                 switch (type) {
129.                     case "bar":
131.                         var series_temp = { name: group[i], data: temp, type: chart_type };
133.                         if (is_stack)
135.                             series_temp = $.extend({}, { stack: "stack" }, series_temp);
137.                         break;
139.                     case "map":
141.                         var series_temp = {
143.                             name: group[i], type: chart_type, mapType: "china", selectedMode: "single",
145.                             itemStyle: {
147.                                 normal: { label: { show: true} },
149.                                 emphasis: { label: { show: true} }
151.                             },
153.                             data: temp
155.                         };
157.                         break;
159.                     case "line":
161.                         var series_temp = { name: group[i], data: temp, type: chart_type };
163.                         if (is_stack)
165.                             series_temp = $.extend({}, { stack: "stack" }, series_temp);
167.                         break;
169.                     default:
171.                         var series_temp = { name: group[i], data: temp, type: chart_type };
173.                 }
175.                 series.push(series_temp);
177.             }
179.             return { category: group, xAxis: xAxis, series: series };
181.         },

复制代码

　　
　　

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

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

1. ChartOptionTemplates: {
3.         CommonOption: {//通用的图表基本配置
5.             tooltip: {
7.                 trigger: "axis"//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
9.             },
11.             toolbox: {
13.                 show: true, //是否显示工具栏
15.                 feature: {
17.                     mark: true,
19.                     dataView: { readOnly: false }, //数据预览
21.                     restore: true, //复原
23.                     saveAsImage: true //是否保存图片
25.                 }
27.             }
29.         },
31.         CommonLineOption: {//通用的折线图表的基本配置
33.             tooltip: {
35.                 trigger: "axis"
37.             },
39.             toolbox: {
41.                 show: true,
43.                 feature: {
45.                     dataView: { readOnly: false }, //数据预览
47.                     restore: true, //复原
49.                     saveAsImage: true, //是否保存图片
51.                     magicType: ["line", "bar"]//支持柱形图和折线图的切换
53.                 }
55.             }
57.         },
59.         Pie: function (data, name) {//data:数据格式：{name：xxx,value:xxx}...
61.             var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);
63.             var option = {
65.                 tooltip: {
67.                     trigger: "item",
69.                     formatter: "{b} : {c} ({d}/%)",
71.                     show: true
73.                 },
75.                 legend: {
77.                     orient: "vertical",
79.                     x: "left",
81.                     data: pie_datas.category
83.                 },
85.                 series: [
87.                     {
89.                         name: name || "",
91.                         type: "pie",
93.                         radius: "65%",
95.                         center: ["50%", "50%"],
97.                         data: pie_datas.data
99.                     }
101.                 ]
103.             };
105.             return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);
107.         },
109. Lines: function (data, name, is_stack) { //data:数据格式：{name：xxx,group:xxx,value:xxx}...
111.             var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, "line", is_stack);
113.             var option = {
115.                 legend: {
117.                     data: stackline_datas.category
119.                 },
121.                 xAxis: [{
123.                     type: "category", //X轴均为category，Y轴均为value
125.                     data: stackline_datas.xAxis,
127.                     boundaryGap: false//数值轴两端的空白策略
129.                 }],
131.                 yAxis: [{
133.                     name: name || "",
135.                     type: "value",
137.                     splitArea: { show: true }
139.                 }],
141.                 series: stackline_datas.series
143.             };
145.             return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
147.         },
149. Bars: function (data, name, is_stack) {//data:数据格式：{name：xxx,group:xxx,value:xxx}...
151.             var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, "bar", is_stack);
153.             var option = {
155.                 legend: bars_dates.category,
157.                 xAxis: [{
159.                     type: "category",
161.                     data: bars_dates.xAxis,
163.                     axisLabel: {
165.                         show: true,
167.                         interval: "auto",
169.                         rotate: 0,
171.                         margion: 8
173.                     }
175.                 }],
177.                 yAxis: [{
179.                     type: "value",
181.                     name: name || "",
183.                     splitArea: { show: true }
185.                 }],
187.                 series: bars_dates.series
189.             };
191.             return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
193.         },
195.   ……..//其他的图表配置，如柱图+折线、地图
197. ……..
201. }

复制代码

　　

　　
  

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

1. Charts: {
3.         RenderChart: function (option) {
5.             require([
7.                 "echarts",
9.                 "echarts/chart/line",
11.                 "echarts/chart/bar",
13.                 "echarts/chart/pie",
15.                 "echarts/chart/k",
17.                 "echarts/chart/scatter",
19.                 "echarts/chart/radar",
21.                 "echarts/chart/chord",
23.                 "echarts/chart/force",
25.                 "echarts/chart/map"
27.               ],
29.               function (ec) {
31.                   echarts = ec;
33.                   if (option.chart && option.chart.dispose)
35.                       option.chart.dispose();
37.                   option.chart = echarts.init(option.container);
39.                   window.onresize = option.chart.resize;
41.                   option.chart.setOption(option.option, true);
43.               });
45.         },
47.         ……..//渲染其他的图表类型，如：地图
49.         ……..
51.         }

复制代码

　　

3.  具体页面的使用

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

     

1. <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
3.     <script src="/Statics/echarts/esl.js" type="text/javascript"></script>
5.     <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 实现代码

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

复制代码

　　
3.1.2 展示效果

3.2 柱图
3.2.1 实现代码

1. <script type="text/javascript">
3.     $(
5.       function () {
7.           var data = [{ name: "olive", value: 20 }, { name: "only", value: 20 }, { name: "momo", value: 20}];
9.           var option = ECharts.ChartOptionTemplates.Bar(data);
11.           var container = $("#echart")[0];
13.           opt = ECharts.ChartConfig(container, option);
15.           ECharts.Charts.RenderChart(opt);
17.       }
19. );
21. $(
23.       function () {
25.           var data = [{ name: "2014-01", value: 20, group: "A" }, { name: "2014-01", value: 40, group: "B" }, { name: "2014-02",
26. value: 30, group: "A" }, { name: "2014-02", value: 10, group: "B" }, { name: "2014-03", value: 200, group: "A" },
27. { name: "2014-03", value: 60, group: "B" }, { name: "2014-04", value: 50, group: "A" }, { name: "2014-04", value: 45, group: "B" },
28. { name: "2014-05", value: 110, group: "A" }, { name: "2014-05", value: 80, group: "B" }, { name: "2014-06", value: 90, group: "A" },
29. { name: "2014-06", value: 60, group: "B"}];
31.           var option = ECharts.ChartOptionTemplates.Bars(data,"Love");
33.           var container = $("#echart")[0];
35.           opt = ECharts.ChartConfig(container, option);
37.           ECharts.Charts.RenderChart(opt);
41.           var option = ECharts.ChartOptionTemplates.Bars(data, "Love", true);
43.           var container = $("#echart1")[0];
45.           opt = ECharts.ChartConfig(container, option);
47.           ECharts.Charts.RenderChart(opt);
49.       }
51.     );
55. </script>

复制代码

　　

3.2.2展示效果




3.3 折线图
3.3.1 实现代码

1. <script type="text/javascript">
3.         $(function () {
5.             var data = [
7.             { name: "2013-01", group: "olive", value: 116 },
9.             { name: "2013-01", group: "momo", value: 115 },
11.             { name: "2013-01", group: "only", value: 222 },
13.             { name: "2013-01", group: "for", value: 324 },
15.             { name: "2013-02", group: "olive", value: 156 },
17.             { name: "2013-02", group: "momo", value: 185 },
19.             { name: "2013-02", group: "only", value: 202 },
21.             { name: "2013-02", group: "for", value: 34 },
23.             { name: "2013-03", group: "olive", value: 16 },
25.             { name: "2013-03", group: "momo", value: 51 },
27.             { name: "2013-03", group: "only", value: 22 },
29.             { name: "2013-03", group: "for", value: 84 }
31.             ];
33.             var opt = HighChart.ChartOptionTemplates.Line(data, "Love-Rate", "折线图示例");
35.             var container = $("#container");
37.             HighChart.RenderChart(opt, container);
39.         });
41.        $(
43.       function () {
45.           var data = [{ name: "2014-01", value: 20, group: "A" }, { name: "2014-01", value: 40, group: "B" },
46. { name: "2014-02", value: 30, group: "A" }, { name: "2014-02", value: 10, group: "B" }, { name: "2014-03", value: 200, group: "A" },
47. { name: "2014-03", value: 60, group: "B" }, { name: "2014-04", value: 50, group: "A" }, { name: "2014-04", value: 45, group: "B" },
48. { name: "2014-05", value: 110, group: "A" }, { name: "2014-05", value: 80, group: "B" }, { name: "2014-06", value: 90, group: "A" },
49. { name: "2014-06", value: 60, group: "B"}];
51.           var option = ECharts.ChartOptionTemplates.Lines(data,"lines",false);
53.           var container = $("#echart")[0];
55.           opt = ECharts.ChartConfig(container, option);
57.           ECharts.Charts.RenderChart(opt);
61.           var option = ECharts.ChartOptionTemplates.Lines(data, "lines", true);
63.           var container = $("#echart1")[0];
65.           opt = ECharts.ChartConfig(container, option);
67.           ECharts.Charts.RenderChart(opt);
69.       }
71.     );
75.     </script>

复制代码

　　

3.3.2展示效果




3.4 柱图+折线（增幅）图
3.4.1 展示效果

3.5 地图
3.5.3 展示效果


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