深入浅出ECharts系列 （二） 折线图

深入浅出ECharts系列（二）

1. 目标

本次教程的目标是实现“折线图堆叠”折线，实现结果如图：

2. 准备工作

a)         首先下载ECharts插件，你可以根据自己的实际需求选择你想要下载的版本，也可以自己定制相应功能的版本，下面附上插件的下载地址：

http://echarts.baidu.com/download.html

我们下载完整版为大家进行演示。

3. 正式开始

首先，我新建了一个MVC4项目，将下载的文件放到对应的位置：

然后新建一个控制器和对应的视图，添加对文件的引用，并且新增一个id为main的div做为地图的容器来展现地图。如图：

接着开始写JS脚本来实现我们想要的效果：

通过 echarts.init方法初始化一个 echarts实例并通过 setOption方法生成折线图

<script>

//初始化

var myChart = echarts.init(document.getElementById('main'));

//参数设置

option = {

title: {      //标题组件

text: '折线图堆叠'

},

tooltip: {    //提示框组件

trigger: 'axis'

},

legend: {     //图例组件

data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']

},

grid: {       //直角坐标系内绘图网格

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

toolbox: {     //工具栏

feature: {

saveAsImage: {}

}

},

xAxis: {       //直角坐标系 grid 中的 x 轴

type: 'category',

boundaryGap: false,

data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']

},

yAxis: {       //直角坐标系 grid 中的 y 轴

type: 'value'

},

series: [      //系列列表

{

name: '邮件营销',

type: 'line',

stack: '总量',

data: [120, 132, 101, 134, 90, 230, 210]

},

{

name: '联盟广告',

type: 'line',

stack: '总量',

data: [220, 182, 191, 234, 290, 330, 310]

},

{

name: '视频广告',

type: 'line',

stack: '总量',

data: [150, 232, 201, 154, 190, 330, 410]

},

{

name: '直接访问',

type: 'line',

stack: '总量',

data: [320, 332, 301, 334, 390, 330, 320]

},

{

name: '搜索引擎',

type: 'line',

stack: '总量',

data: [820, 932, 901, 934, 1290, 1330, 1320]

}

]

};

myChart.setOption(option);   //参数设置方法

</script>

具体参数含义可参考,不再赘述：

http://echarts.baidu.com/option.html#title

4. 最终效果

更多精彩文章请关注 =》 我爱学框架