深入淺出ECharts系列（二）
- 目標
本次教程的目標是實現“折線圖堆疊”折線，實現結果如圖：
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. 最終效果
更多精彩文章請關注 =》 我愛學框架