深刻淺出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. 最終效果

 

 

更多精彩文章請關注 =》 我愛學框架