第一个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也就是图表的高度

<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或者数组形式？