首页 > 代码库 > Echarts使用心得总结（二）

Echarts使用心得总结（二）

2024-07-25 13:30:16   221人阅读

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.   
  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=http://www.mamicode.com/"/Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
  2.   
  3. <script src=http://www.mamicode.com/"/Statics/echarts/esl.js" type="text/javascript"></script>  
  4.   
  5. <script src=http://www.mamicode.com/"/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 展示效果

 

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展示效果

 

 

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展示效果

 

 

3.4 柱图+折线（增幅）图

3.4.1 展示效果

 

3.5 地图

3.5.3 展示效果

 

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

Echarts使用心得总结（二）


联系
我们