Echarts使用心得總結（二）

時間 2019-11-06

標籤 echarts 使用心得總結简体版

原文原文鏈接

Echarts使用心得總結（二）

前言：

前一段時間一直都挺忙的，各類事，也沒來得及每週的總結，趁着晚上的一點時間把項目中用的Echart中經常使用的各類圖表給抽象總結了一下，趁着週末跟你們分享一下。以前寫過一篇相關的文章，當時主要是講了如何引入、使用Echart，最新的Echart版本已經發布，以前講的不少文件均可以刪除了，下邊會一一給你們細講。javascript

爲了更好的講解如何使用這個圖形渲染插件，我會經過建立一個解決方案的形式一點點給你們講解清楚。java

1. EChart最新的文檔目錄。

首先建立一個解決方案，目錄以下：jquery

以前的一篇文章中講到若是要使用Echarts還要下載相關的ZRender的渲染包，最新的版本已經將這些合併在一塊兒了，只須要引用圖中紅框標註的echarts文件夾下的文件便可。各文件的做用以下：json

l Echarts-map.js :主要用來渲染跟地圖相關echarts

l Echarts.js :基本的常規圖形相關工具

l Esl.js :圖像引擎ui

Statics文件夾下的ECharts.js文件，爲我本身抽象總結出來的用於Echarts的配置文件加載、數據處理、初始化各類圖像類型的配置、圖像渲染的一些方法。this

2. 抽象以後的Echarts。

根據Echarts官網的講解，我把Echarts的使用歸結爲一下的幾個步驟，同時這些步驟相應的實現對應到Statics文件夾下的Echarts.js，該文件的主要代碼目錄以下：spa

[javascript] view plain copy print ?.net

Var ECharts={
ChartConfig:function(container,option){ …..},//加載Echarts配置文件
ChartDataFormate:{….},//數據格式化
ChartOptionTemplates:{….},//初始化經常使用的圖表類型
Charts:{ RenderChart:function(option){….},//渲染圖表
RenderMap:function(option){…}//渲染地圖
}
}；

Var ECharts={

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

ChartDataFormate:{….},//數據格式化

ChartOptionTemplates:{….},//初始化經常使用的圖表類型

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

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

}

}；

2.1 Echarts配置文件的引入

在開始使用時，首先須要引入Echarts 的配置文件，也就是要加載基本的圖像類型，咱們能夠在每個頁面都引入，可是這樣抽象化程度不高，重複使用率也不高，只須要有一個配置項在每次引用的時候加載一下便可，對應到具體的代碼實現，以下：

[javascript] view plain copy print ?

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

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

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

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

2.3 各類圖表類型的配置初始化

在經過2.2步驟將從後臺得到的數據進行初始化以後，咱們就能夠進行圖表的option的配置了，在這裏我主要對經常使用的餅圖、柱圖（單1、分組、堆積柱圖）、折線圖（分組、堆積折線圖）、柱圖+折線（增幅）圖、中國地圖等圖進行了配置項的初始化。具體實現以下：

[javascript] view plain copy print ?

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);
},
……..//其餘的圖表配置，如柱圖+折線、地圖
……..
}

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

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);
});
},
……..//渲染其餘的圖表類型，如：地圖
……..
}

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

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

    <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用來作渲染圖表的容器，以下：

3.1 餅圖

3.1.1 實現代碼

[javascript] view plain copy print ?

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

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

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

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

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

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