文档章节

Echarts使用心得总结(二)

双月通天
 双月通天
发布于 2014/07/14 16:16
字数 3665
阅读 1.2K
收藏 5

 

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 plaincopyprint?

  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. };  

Var ECharts={

ChartConfig:function(container,option){ …..},//加载Echarts配置文件

ChartDataFormate:{….},//数据格式化

ChartOptionTemplates:{….},//初始化常用的图表类型

Charts:{ RenderChart:function(option){….},//渲染图表

RenderMap:function(option){…}//渲染地图

}

};

  

2.1 Echarts配置文件的引入

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

[javascript] view plaincopyprint?

  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.    

ChartConfig: function (container, option) { //container:为页面要渲染图表的容器,option为已经初始化好的图表类型的option配置

        var chart_path = "/Statics/echarts/echarts"; //配置图表请求路径

        var map_path = "/Statics/echarts/echarts-map";//配置地图的请求路径

        require.config({//引入常用的图表类型的配置

            paths: {

                echarts: chart_path,

                'echarts/chart/bar': chart_path,

                'echarts/chart/pie': chart_path,

                'echarts/chart/line': chart_path,

                'echarts/chart/k': chart_path,

                'echarts/chart/scatter': chart_path,

                'echarts/chart/radar': chart_path,

                'echarts/chart/chord': chart_path,

                'echarts/chart/force': chart_path,

                'echarts/chart/map': map_path

            }

        });

        this.option = { chart: {}, option: option, container: container };

        return this.option;

    }

  

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 plaincopyprint?

  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.         },  

ChartDataFormate: {

        FormateNOGroupData: function (data) {//data的格式如上的Result1,这种格式的数据,多用于饼图、单一的柱形图的数据源

            var categories = [];

            var datas = [];

            for (var i = 0; i < data.length; i++) {

                categories.push(data[i].name || "");

                datas.push({ name: data[i].name, value: data[i].value || 0 });

            }

            return { category: categories, data: datas };

        },

        FormateGroupData: function (data, type, is_stack) {//data的格式如上的Result2,type为要渲染的图表类型:可以为line,bar,is_stack表示为是否是堆积图,这种格式的数据多用于展示多条折线图、分组的柱图

            var chart_type = 'line';

            if (type)

                chart_type = type || 'line';

            var xAxis = [];

            var group = [];

            var series = [];

            for (var i = 0; i < data.length; i++) {

                for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);

                if (j == xAxis.length)

                    xAxis.push(data[i].name);

                for (var k = 0; k < group.length && group[k] != data[i].group; k++);

                if (k == group.length)

                    group.push(data[i].group);

            }

 

            for (var i = 0; i < group.length; i++) {

                var temp = [];

                for (var j = 0; j < data.length; j++) {

                    if (group[i] == data[j].group) {

                        if (type == "map")

                            temp.push({ name: data[j].name, value: data[i].value });

                        else

                            temp.push(data[j].value);

                    }

                }

                switch (type) {

                    case 'bar':

                        var series_temp = { name: group[i], data: temp, type: chart_type };

                        if (is_stack)

                            series_temp = $.extend({}, { stack: 'stack' }, series_temp);

                        break;

                    case 'map':

                        var series_temp = {

                            name: group[i], type: chart_type, mapType: 'china', selectedMode: 'single',

                            itemStyle: {

                                normal: { label: { show: true} },

                                emphasis: { label: { show: true} }

                            },

                            data: temp

                        };

                        break;

                    case 'line':

                        var series_temp = { name: group[i], data: temp, type: chart_type };

                        if (is_stack)

                            series_temp = $.extend({}, { stack: 'stack' }, series_temp);

                        break;

                    default:

                        var series_temp = { name: group[i], data: temp, type: chart_type };

                }

                series.push(series_temp);

            }

            return { category: group, xAxis: xAxis, series: series };

        },

  

[javascript] view plaincopyprint?

  1.   


  

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

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

[javascript] view plaincopyprint?

  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. }  

ChartOptionTemplates: {

        CommonOption: {//通用的图表基本配置

            tooltip: {

                trigger: 'axis'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发

            },

            toolbox: {

                show: true, //是否显示工具栏

                feature: {

                    mark: true,

                    dataView: { readOnly: false }, //数据预览

                    restore: true, //复原

                    saveAsImage: true //是否保存图片

                }

            }

        },

        CommonLineOption: {//通用的折线图表的基本配置

            tooltip: {

                trigger: 'axis'

            },

            toolbox: {

                show: true,

                feature: {

                    dataView: { readOnly: false }, //数据预览

                    restore: true, //复原

                    saveAsImage: true, //是否保存图片

                    magicType: ['line', 'bar']//支持柱形图和折线图的切换

                }

            }

        },

        Pie: function (data, name) {//data:数据格式:{name:xxx,value:xxx}...

            var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);

            var option = {

                tooltip: {

                    trigger: 'item',

                    formatter: '{b} : {c} ({d}/%)',

                    show: true

                },

                legend: {

                    orient: 'vertical',

                    x: 'left',

                    data: pie_datas.category

                },

                series: [

                    {

                        name: name || "",

                        type: 'pie',

                        radius: '65%',

                        center: ['50%', '50%'],

                        data: pie_datas.data

                    }

                ]

            };

            return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);

        },

Lines: function (data, name, is_stack) { //data:数据格式:{name:xxx,group:xxx,value:xxx}...

            var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, 'line', is_stack);

            var option = {

                legend: {

                    data: stackline_datas.category

                },

                xAxis: [{

                    type: 'category', //X轴均为category,Y轴均为value

                    data: stackline_datas.xAxis,

                    boundaryGap: false//数值轴两端的空白策略

                }],

                yAxis: [{

                    name: name || '',

                    type: 'value',

                    splitArea: { show: true }

                }],

                series: stackline_datas.series

            };

            return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);

        },

Bars: function (data, name, is_stack) {//data:数据格式:{name:xxx,group:xxx,value:xxx}...

            var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, 'bar', is_stack);

            var option = {

                legend: bars_dates.category,

                xAxis: [{

                    type: 'category',

                    data: bars_dates.xAxis,

                    axisLabel: {

                        show: true,

                        interval: 'auto',

                        rotate: 0,

                        margion: 8

                    }

                }],

                yAxis: [{

                    type: 'value',

                    name: name || '',

                    splitArea: { show: true }

                }],

                series: bars_dates.series

            };

            return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);

        },

  ……..//其他的图表配置,如柱图+折线、地图

……..

 

}

  

  

 

2.4 图形的渲染

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

[javascript] view plaincopyprint?

  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.    

Charts: {

        RenderChart: function (option) {

            require([

                'echarts',

                'echarts/chart/line',

                'echarts/chart/bar',

                'echarts/chart/pie',

                'echarts/chart/k',

                'echarts/chart/scatter',

                'echarts/chart/radar',

                'echarts/chart/chord',

                'echarts/chart/force',

                'echarts/chart/map'

              ],

              function (ec) {

                  echarts = ec;

                  if (option.chart && option.chart.dispose)

                      option.chart.dispose();

                  option.chart = echarts.init(option.container);

                  window.onresize = option.chart.resize;

                  option.chart.setOption(option.option, true);

              });

        },

        ……..//渲染其他的图表类型,如:地图

        ……..

        }

  

3.  具体页面的使用

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

    

[javascript] view plaincopyprint?

  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>  

    <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="/Statics/echarts/esl.js" type="text/javascript"></script>

    <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 plaincopyprint?

  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>  

<script type="text/javascript">

    $(

      function () {

          var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];

          var option = ECharts.ChartOptionTemplates.Pie(data);

          var container = $("#echart")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

      }

    );

</script>

  

 

3.1.2 展示效果

 

3.2 柱图

3.2.1 实现代码

[javascript] view plaincopyprint?

  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.    

<script type="text/javascript">

    $(

      function () {

          var data = [{ name: 'olive', value: 20 }, { name: 'only', value: 20 }, { name: 'momo', value: 20}];

          var option = ECharts.ChartOptionTemplates.Bar(data);

          var container = $("#echart")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

      }

);

$(

      function () {

          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'}];

          var option = ECharts.ChartOptionTemplates.Bars(data,'Love');

          var container = $("#echart")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

 

          var option = ECharts.ChartOptionTemplates.Bars(data, 'Love', true);

          var container = $("#echart1")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

      }

    );

 

</script>

  

3.2.2展示效果

 

 

3.3 折线图

3.3.1 实现代码

[javascript] view plaincopyprint?

  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.    

<script type="text/javascript">

        $(function () {

            var data = [

            { name: '2013-01', group: 'olive', value: 116 },

            { name: '2013-01', group: 'momo', value: 115 },

            { name: '2013-01', group: 'only', value: 222 },

            { name: '2013-01', group: 'for', value: 324 },

            { name: '2013-02', group: 'olive', value: 156 },

            { name: '2013-02', group: 'momo', value: 185 },

            { name: '2013-02', group: 'only', value: 202 },

            { name: '2013-02', group: 'for', value: 34 },

            { name: '2013-03', group: 'olive', value: 16 },

            { name: '2013-03', group: 'momo', value: 51 },

            { name: '2013-03', group: 'only', value: 22 },

            { name: '2013-03', group: 'for', value: 84 }

            ];

            var opt = HighChart.ChartOptionTemplates.Line(data, 'Love-Rate', "折线图示例");

            var container = $("#container");

            HighChart.RenderChart(opt, container);

        });

       $(

      function () {

          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'}];

          var option = ECharts.ChartOptionTemplates.Lines(data,'lines',false);

          var container = $("#echart")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

 

          var option = ECharts.ChartOptionTemplates.Lines(data, 'lines', true);

          var container = $("#echart1")[0];

          opt = ECharts.ChartConfig(container, option);

          ECharts.Charts.RenderChart(opt);

      }

    );

 

    </script>

  

3.3.2展示效果

 

 

3.4 柱图+折线(增幅)图

3.4.1 展示效果

 

3.5 地图

3.5.3 展示效果

 

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


本文转载自:http://blog.csdn.net/xuemoyao/article/details/22602837

双月通天
粉丝 41
博文 428
码字总数 388592
作品 0
徐汇
程序员
私信 提问
加载中

评论(0)

前端知识 | 浅谈在React中使用echarts

方法一: echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。 和使用所有其他插件一样,首先,我们需要 install 它: 第一步: npminstall --save echarts(依赖) npmi...

海说软件
2018/06/26
0
0
在Vue中使用echarts的两种方式

方式一、直接引入echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js'Vue.use(myCharts) myCharts.js import echarts from 'echarts'const i......

龙果果
04/02
0
0
vue引入echart.js打包时特别大

link : https://www.cnblogs.com/strinkbug/p/5786222.html 一、i在html中添加script标签如下: <script src="//cdn.bootcss.com/echarts/3.2.2/echarts.simple.min.js"></script> 二、在web......

Js_Mei
2018/09/25
1.5K
0
【echarts】echarts实现疫情地图(一看就会篇)

echarts实现疫情地图(一看就会篇) echarts相比于highcharts更加简单上手,所以现在我个人觉得echarts的使用者是比highcharts多的,前面我介绍过highcharts实现疫情地图的方式,所以今天来补...

老耿是个程序员
04/01
0
0
三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?

最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点。同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性。公司目前统一使用的...

薄荷前端
2018/09/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

来,看我是如何把面试官问倒的!

来,看我是如何把面试官问倒的! # 反向面试 下面列表里的问题对于参加技术面试的人来说可能有些用。列表里的问题并不一定适用于某个特定的职位或者工作类型, 也没有排序 最开始的时候这只是...

osc_cqhvqcam
22分钟前
15
0
使用van-tabbar底部导航栏,会覆盖页面内容解决方法

移动端使用vant的时候,有时候会把导航栏放在页面底部,这个时候我在布局页面使用了van-tabbar组件,使用效果很好 但是页面比较长的时候,这个组件会覆盖掉一些页面的内容,这个时候,可以使...

osc_xsd7kks3
24分钟前
10
0
Python - 集合

# Author: Jason Zhu# Tool: PyCharm 2017# Python3.8 关于集合的使用方法# num = {1,2,3,3,6,2,77,8,2}# list改为set集合name1 = ['关羽','马超','关羽','马超','孙权']print(type......

osc_mf7xwvy6
26分钟前
20
0
java Arrays

数组变集合: 用于操作数组的工具类。 各种排序还能局部排序,相当nice。 asList:将数组变成list集合,可以使用集合的思想和方法来操作数组中的元素。 注意: 将数组变成集合后,不可以使用集...

osc_yevhupr2
27分钟前
11
0
Python中有许多HTTP客户端,但使用最广泛且最容易的是requests

前言 文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 作者:北京尚脑软件测试 PS:如有需要Python学习资料的小伙伴可...

osc_ufe2hk4l
28分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部