Echarts使用心得

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 plain  copy

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

　　

2.1 Echarts配置文件的引入

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

[javascript]  view plain  copy

1. ChartConfig: function (container, option) { //container:为页面要渲染图表的容器，option为已经初始化好的图表类型的option配置  
2.   
3.         var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径  
4.   
5.         var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径  
6.   
7.         require.config({ //引入常用的图表类型的配置  
8.   
9.             paths: {  
10.   
11.                 echarts: chart_path,  
12.   
13.                 'echarts/chart/bar': chart_path,  
14.   
15.                 'echarts/chart/pie': chart_path,  
16.   
17.                 'echarts/chart/line': chart_path,  
18.   
19.                 'echarts/chart/k': chart_path,  
20.   
21.                 'echarts/chart/scatter': chart_path,  
22.   
23.                 'echarts/chart/radar': chart_path,  
24.   
25.                 'echarts/chart/chord': chart_path,  
26.   
27.                 'echarts/chart/force': chart_path,  
28.   
29.                 'echarts/chart/map': map_path  
30.   
31.             }  
32.   
33.         });  
34.   
35.         this.option = { chart: {}, option: option, container: container };  
36.   
37.         return this.option;  
38.   
39.     }  
40.   
41.    

　　

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 plain  copy

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