码迷，mamicode.com
首页 > 其他好文 > 详细

Echarts使用心得总结（二）

时间：2014-10-04 13:52:16      阅读：212      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   io   os   使用   ar   java   for   

Echarts使用心得总结（二）

前言：

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

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

1.  EChart最新的文档目录。

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

 bubuko.com,布布扣

之前的一篇文章中讲到如果要使用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.   
  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 plaincopy
 
  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 plaincopy
 
  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++) {  
  54.   
  55.                 var temp = [];  
  56.   
  57.                 for (var j = 0; j < data.length; j++) {  
  58.   
  59.                     if (group[i] == data[j].group) {  
  60.   
  61.                         if (type == "map")  
  62.   
  63.                             temp.push({ name: data[j].name, value: data[i].value });  
  64.   
  65.                         else  
  66.   
  67.                             temp.push(data[j].value);  
  68.   
  69.                     }  
  70.   
  71.                 }  
  72.   
  73.                 switch (type) {  
  74.   
  75.                     case ‘bar‘:  
  76.   
  77.                         var series_temp = { name: group[i], data: temp, type: chart_type };  
  78.   
  79.                         if (is_stack)  
  80.   
  81.                             series_temp = $.extend({}, { stack: ‘stack‘ }, series_temp);  
  82.   
  83.                         break;  
  84.   
  85.                     case ‘map‘:  
  86.   
  87.                         var series_temp = {  
  88.   
  89.                             name: group[i], type: chart_type, mapType: ‘china‘, selectedMode: ‘single‘,  
  90.   
  91.                             itemStyle: {  
  92.   
  93.                                 normal: { label: { show: true} },  
  94.   
  95.                                 emphasis: { label: { show: true} }  
  96.   
  97.                             },  
  98.   
  99.                             data: temp  
  100.   
  101.                         };  
  102.   
  103.                         break;  
  104.   
  105.                     case ‘line‘:  
  106.   
  107.                         var series_temp = { name: group[i], data: temp, type: chart_type };  
  108.   
  109.                         if (is_stack)  
  110.   
  111.                             series_temp = $.extend({}, { stack: ‘stack‘ }, series_temp);  
  112.   
  113.                         break;  
  114.   
  115.                     default:  
  116.   
  117.                         var series_temp = { name: group[i], data: temp, type: chart_type };  
  118.   
  119.                 }  
  120.   
  121.                 series.push(series_temp);  
  122.   
  123.             }  
  124.   
  125.             return { category: group, xAxis: xAxis, series: series };  
  126.   
  127.         },  

　　

[javascript] view plaincopy
 
  1.   

　　

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

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

[javascript] view plaincopy
 
  1. ChartOptionTemplates: {  
  2.   
  3.         CommonOption: {//通用的图表基本配置  
  4.   
  5.             tooltip: {  
  6.   
  7.                 trigger: ‘axis‘//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发  
  8.   
  9.             },  
  10.   
  11.             toolbox: {  
  12.   
  13.                 show: true, //是否显示工具栏  
  14.   
  15.                 feature: {  
  16.   
  17.                     mark: true,  
  18.   
  19.                     dataView: { readOnly: false }, //数据预览  
  20.   
  21.                     restore: true, //复原  
  22.   
  23.                     saveAsImage: true //是否保存图片  
  24.   
  25.                 }  
  26.   
  27.             }  
  28.   
  29.         },  
  30.   
  31.         CommonLineOption: {//通用的折线图表的基本配置  
  32.   
  33.             tooltip: {  
  34.   
  35.                 trigger: ‘axis‘  
  36.   
  37.             },  
  38.   
  39.             toolbox: {  
  40.   
  41.                 show: true,  
  42.   
  43.                 feature: {  
  44.   
  45.                     dataView: { readOnly: false }, //数据预览  
  46.   
  47.                     restore: true, //复原  
  48.   
  49.                     saveAsImage: true, //是否保存图片  
  50.   
  51.                     magicType: [‘line‘, ‘bar‘]//支持柱形图和折线图的切换  
  52.   
  53.                 }  
  54.   
  55.             }  
  56.   
  57.         },  
  58.   
  59.         Pie: function (data, name) {//data:数据格式：{name：xxx,value:xxx}...  
  60.   
  61.             var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);  
  62.   
  63.             var option = {  
  64.   
  65.                 tooltip: {  
  66.   
  67.                     trigger: ‘item‘,  
  68.   
  69.                     formatter: ‘{b} : {c} ({d}/%)‘,  
  70.   
  71.                     show: true  
  72.   
  73.                 },  
  74.   
  75.                 legend: {  
  76.   
  77.                     orient: ‘vertical‘,  
  78.   
  79.                     x: ‘left‘,  
  80.   
  81.                     data: pie_datas.category  
  82.   
  83.                 },  
  84.   
  85.                 series: [  
  86.   
  87.                     {  
  88.   
  89.                         name: name || "",  
  90.   
  91.                         type: ‘pie‘,  
  92.   
  93.                         radius: ‘65%‘,  
  94.   
  95.                         center: [‘50%‘, ‘50%‘],  
  96.   
  97.                         data: pie_datas.data  
  98.   
  99.                     }  
  100.   
  101.                 ]  
  102.   
  103.             };  
  104.   
  105.             return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);  
  106.   
  107.         },  
  108.   
  109. Lines: function (data, name, is_stack) { //data:数据格式：{name：xxx,group:xxx,value:xxx}...  
  110.   
  111.             var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, ‘line‘, is_stack);  
  112.   
  113.             var option = {  
  114.   
  115.                 legend: {  
  116.   
  117.                     data: stackline_datas.category  
  118.   
  119.                 },  
  120.   
  121.                 xAxis: [{  
  122.   
  123.                     type: ‘category‘, //X轴均为category，Y轴均为value  
  124.   
  125.                     data: stackline_datas.xAxis,  
  126.   
  127.                     boundaryGap: false//数值轴两端的空白策略  
  128.   
  129.                 }],  
  130.   
  131.                 yAxis: [{  
  132.   
  133.                     name: name || ‘‘,  
  134.   
  135.                     type: ‘value‘,  
  136.   
  137.                     splitArea: { show: true }  
  138.   
  139.                 }],  
  140.   
  141.                 series: stackline_datas.series  
  142.   
  143.             };  
  144.   
  145.             return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);  
  146.   
  147.         },  
  148.   
  149. Bars: function (data, name, is_stack) {//data:数据格式：{name：xxx,group:xxx,value:xxx}...  
  150.   
  151.             var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, ‘bar‘, is_stack);  
  152.   
  153.             var option = {  
  154.   
  155.                 legend: bars_dates.category,  
  156.   
  157.                 xAxis: [{  
  158.   
  159.                     type: ‘category‘,  
  160.   
  161.                     data: bars_dates.xAxis,  
  162.   
  163.                     axisLabel: {  
  164.   
  165.                         show: true,  
  166.   
  167.                         interval: ‘auto‘,  
  168.   
  169.                         rotate: 0,  
  170.   
  171.                         margion: 8  
  172.   
  173.                     }  
  174.   
  175.                 }],  
  176.   
  177.                 yAxis: [{  
  178.   
  179.                     type: ‘value‘,  
  180.   
  181.                     name: name || ‘‘,  
  182.   
  183.                     splitArea: { show: true }  
  184.   
  185.                 }],  
  186.   
  187.                 series: bars_dates.series  
  188.   
  189.             };  
  190.   
  191.             return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);  
  192.   
  193.         },  
  194.   
  195.   ……..//其他的图表配置，如柱图+折线、地图  
  196.   
  197. ……..  
  198.   
  199.    
  200.   
  201. }  

　　

　　

 

2.4 图形的渲染

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

[javascript] view plaincopy
 
  1. Charts: {  
  2.   
  3.         RenderChart: function (option) {  
  4.   
  5.             require([  
  6.   
  7.                 ‘echarts‘,  
  8.   
  9.                 ‘echarts/chart/line‘,  
  10.   
  11.                 ‘echarts/chart/bar‘,  
  12.   
  13.                 ‘echarts/chart/pie‘,  
  14.   
  15.                 ‘echarts/chart/k‘,  
  16.   
  17.                 ‘echarts/chart/scatter‘,  
  18.   
  19.                 ‘echarts/chart/radar‘,  
  20.   
  21.                 ‘echarts/chart/chord‘,  
  22.   
  23.                 ‘echarts/chart/force‘,  
  24.   
  25.                 ‘echarts/chart/map‘  
  26.   
  27.               ],  
  28.   
  29.               function (ec) {  
  30.   
  31.                   echarts = ec;  
  32.   
  33.                   if (option.chart && option.chart.dispose)  
  34.   
  35.                       option.chart.dispose();  
  36.   
  37.                   option.chart = echarts.init(option.container);  
  38.   
  39.                   window.onresize = option.chart.resize;  
  40.   
  41.                   option.chart.setOption(option.option, true);  
  42.   
  43.               });  
  44.   
  45.         },  
  46.   
  47.         ……..//渲染其他的图表类型，如：地图  
  48.   
  49.         ……..  
  50.   
  51.         }  
  52.   
  53.    

　　

3.  具体页面的使用

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

    

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

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

　　

 

3.1.2 展示效果

 bubuko.com,布布扣

3.2 柱图

3.2.1 实现代码

[javascript] view plaincopy
 
  1. <script type="text/javascript">  
  2.   
  3.     $(  
  4.   
  5.       function () {  
  6.   
  7.           var data = [{ name: ‘olive‘, value: 20 }, { name: ‘only‘, value: 20 }, { name: ‘momo‘, value: 20}];  
  8.   
  9.           var option = ECharts.ChartOptionTemplates.Bar(data);  
  10.   
  11.           var container = $("#echart")[0];  
  12.   
  13.           opt = ECharts.ChartConfig(container, option);  
  14.   
  15.           ECharts.Charts.RenderChart(opt);  
  16.   
  17.       }  
  18.   
  19. );  
  20.   
  21. $(  
  22.   
  23.       function () {  
  24.   
  25.           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‘}];  
  26.   
  27.           var option = ECharts.ChartOptionTemplates.Bars(data,‘Love‘);  
  28.   
  29.           var container = $("#echart")[0];  
  30.   
  31.           opt = ECharts.ChartConfig(container, option);  
  32.   
  33.           ECharts.Charts.RenderChart(opt);  
  34.   
  35.    
  36.   
  37.           var option = ECharts.ChartOptionTemplates.Bars(data, ‘Love‘, true);  
  38.   
  39.           var container = $("#echart1")[0];  
  40.   
  41.           opt = ECharts.ChartConfig(container, option);  
  42.   
  43.           ECharts.Charts.RenderChart(opt);  
  44.   
  45.       }  
  46.   
  47.     );  
  48.   
  49.    
  50.   
  51. </script>  
  52.   
  53.    

　　

3.2.2展示效果

 bubuko.com,布布扣

bubuko.com,布布扣

 

3.3 折线图

3.3.1 实现代码

[javascript] view plaincopy
 
  1. <script type="text/javascript">  
  2.   
  3.         $(function () {  
  4.   
  5.             var data = [  
  6.   
  7.             { name: ‘2013-01‘, group: ‘olive‘, value: 116 },  
  8.   
  9.             { name: ‘2013-01‘, group: ‘momo‘, value: 115 },  
  10.   
  11.             { name: ‘2013-01‘, group: ‘only‘, value: 222 },  
  12.   
  13.             { name: ‘2013-01‘, group: ‘for‘, value: 324 },  
  14.   
  15.             { name: ‘2013-02‘, group: ‘olive‘, value: 156 },  
  16.   
  17.             { name: ‘2013-02‘, group: ‘momo‘, value: 185 },  
  18.   
  19.             { name: ‘2013-02‘, group: ‘only‘, value: 202 },  
  20.   
  21.             { name: ‘2013-02‘, group: ‘for‘, value: 34 },  
  22.   
  23.             { name: ‘2013-03‘, group: ‘olive‘, value: 16 },  
  24.   
  25.             { name: ‘2013-03‘, group: ‘momo‘, value: 51 },  
  26.   
  27.             { name: ‘2013-03‘, group: ‘only‘, value: 22 },  
  28.   
  29.             { name: ‘2013-03‘, group: ‘for‘, value: 84 }  
  30.   
  31.             ];  
  32.   
  33.             var opt = HighChart.ChartOptionTemplates.Line(data, ‘Love-Rate‘, "折线图示例");  
  34.   
  35.             var container = $("#container");  
  36.   
  37.             HighChart.RenderChart(opt, container);  
  38.   
  39.         });  
  40.   
  41.        $(  
  42.   
  43.       function () {  
  44.   
  45.           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‘}];  
  46.   
  47.           var option = ECharts.ChartOptionTemplates.Lines(data,‘lines‘,false);  
  48.   
  49.           var container = $("#echart")[0];  
  50.   
  51.           opt = ECharts.ChartConfig(container, option);  
  52.   
  53.           ECharts.Charts.RenderChart(opt);  
  54.   
  55.    
  56.   
  57.           var option = ECharts.ChartOptionTemplates.Lines(data, ‘lines‘, true);  
  58.   
  59.           var container = $("#echart1")[0];  
  60.   
  61.           opt = ECharts.ChartConfig(container, option);  
  62.   
  63.           ECharts.Charts.RenderChart(opt);  
  64.   
  65.       }  
  66.   
  67.     );  
  68.   
  69.    
  70.   
  71.     </script>  
  72.   
  73.    

　　

3.3.2展示效果

 bubuko.com,布布扣

bubuko.com,布布扣

 

3.4 柱图+折线（增幅）图

3.4.1 展示效果

 bubuko.com,布布扣

3.5 地图

3.5.3 展示效果

bubuko.com,布布扣

 

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

Echarts使用心得总结（二）

标签：style   blog   http   io   os   使用   ar   java   for   

原文地址：http://www.cnblogs.com/alanjl/p/4005822.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！