• Echarts使用心得总结（二）

    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="/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="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的抽象使用，敬请期待。

    顶
    Top
    收藏
    关注
    评论
  • 相关阅读:
    JavaScript 原型和原型链 prototype
    javascript dom 表单元素之 radio
    JavaScript Dom 表单元素之 checkbox
    JavaScript DOM 表单元素之 select
    JavaScript-ECMAScript 之模块
    Javascript--ECMAScript 之 this
    Javascript-ECMAscript--Array.prototype.slice() 方法
    JavaScript -ECMAScriopt: Array.prototype.slice.call()详解及转换数组的方法
    JavaScript-ECMASCript apply call bind
    requests的深入刨析及封装调用
  • 原文地址：https://www.cnblogs.com/alanjl/p/4005822.html
Copyright © 2020-2023  润新知