第一個ECharts圖表

ECharts是由百度團隊開發的，可高度個性化定製的數據可視化圖表庫。它的底層依賴輕量級的Canvas類庫ZRender，是一個純JavaScript的圖標庫，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流瀏覽器，可以運行在PC和移動設備上。

1.ECharts官網

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

隨便點擊一個圖表

通過”實例“可以看出來，官網上有很多可以供數據顯示的圖表類型，並幫助我們生成好了大部分數據。
此次以折線圖爲例做一個展示。

2.echarts.js文件

下載路徑：http://echarts.baidu.com/download.html

點擊想要下載的類型後會自動下載，此次做爲開發，我用的是源代碼。
把下好的js文件放到項目中

3.後臺數據返回

在controller層裏，我返回了六個List<String>用於數據顯示

4.前端

1.在html頁面中引用echart.js文件

2.在body中準備一個div用於接收折線圖

<div id="sell_data" style="height:400px"></div>

3.js文件

//訂單統計折線圖
$(function() {

    var toPayList;
    var toconfirm;
    var done;
    var payexpired;
    var refunded;
    var datetime;

    $.ajax({
        type:"post",
        url:prefix+"/chart",
        async:false,
        success:function(d){
            //獲得後臺數據
            toPayList=d.toPayList
            datetime=d.datetime
            toconfirm=d.toconfirm
            done=d.done
            payexpired=d.payexpired
            refunded=d.refunded
        }
    });

    var option = {
        title: {
            text: '折線圖堆疊'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['待支付', '待確認', '已完成', '已過期', '已退款']//線名
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:datetime
        },
        yAxis: {
            type: 'value'
        },
        series: [{
                name: '待支付',
                type: 'line',
                stack: '總量',
                data: toPayList
            },
            {
                name: '待確認',
                type: 'line',
                stack: '總量',
                data: toconfirm
            },
            {
                name: '已完成',
                type: 'line',
                stack: '總量',
                data: done
            },
            {
                name: '已過期',
                type: 'line',
                stack: '總量',
                data: payexpired
            },
            {
                name: '已退款',
                type: 'line',
                stack: '總量',
                data: refunded
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('sell_data'));

    myChart.setOption(option);

});

5.效果展示

6.錯誤檢查

1.html中是否成功引用echarts.js文件，路徑是否寫對？
2.後臺數據是否爲json或者數組形式？