前端插件：ECharts（ 图表制作 ）

【前言】

Echarts是百度旗下的一款前端制图插件，他的功能十分强大，可以制作几十种图表。

官方地址为：https://echarts.baidu.com/

下面我以条形图的例子说明：

（1）下载插件

https://pan.baidu.com/s/1PDaqiR2TcwjehJpBz7sgEg （ 提取码：0hpu ）

（2）将插件拷贝到你的项目中

（3）页面引入插件

（4）创建一个显示条形图的地方，并指定其长度，宽度。（我这里显示了四个条形图，故创建了四个）

（5）JS 代码部分

    // 获取数据
    var csdnList;
    // 基于准备好的dom，初始化echarts实例
    var box1 = echarts.init(document.getElementById('box1'));
    var box2 = echarts.init(document.getElementById('box2'));
    var box3 = echarts.init(document.getElementById('box3'));
    var box4 = echarts.init(document.getElementById('box4'));   
    $.ajaxSettings.async = false;
    $.post("/csdn/getCsdnList", {}, function(rs) {
        csdnList = rs;
    });
    $.ajaxSettings.async = true;
    // 指定图表的配置项和数据
    var dateList = new Array();
    var seriesData1 = new Array();
    var seriesData2 = new Array();
    var seriesData3 = new Array();
    var seriesData4 = new Array();
    for (var i = 0; i

（5）显示效果