前端插件：ECharts（ 图表制作 ）_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<csdnList.length; i ++) {
        dateList.push(csdnList[i].createTimeStr);
        seriesData1.push(csdnList[i].addFensi);
        seriesData2.push(csdnList[i].addFangwen);
        seriesData3.push(csdnList[i].addJifen);
        seriesData4.push(csdnList[i].addPaiming);
    }
    var option1 = {
        title: {
            text: '粉丝增量'
        },
        tooltip: {},
        xAxis: {
            data: dateList
        },
        yAxis: {},
        series: [{
            name: '今日粉丝',
            type: 'bar',
            barWidth: '50%',
            data: seriesData1
        }],
        label:{
            show: true,
            position: 'top'
        },
        itemStyle:{
        	color:'gray'
        }
    };
    box1.setOption(option1);
    // 访问量
    var option2 = {
            title: {
                text: '访问增量'
            },
            tooltip: {},
            xAxis: {
                data: dateList
            },
            yAxis: {},
            series: [{
                name: '今日访问',
                type: 'bar',
                barWidth: '50%',
                data: seriesData2
            }],
            label:{
                show: true,
                position: 'top'
            },
            itemStyle:{
                color:'#53868B'
            }
        };
    box2.setOption(option2);
    // 积分增量
    var option3 = {
            title: {
                text: '积分增量'
            },
            tooltip: {},
            xAxis: {
                data: dateList
            },
            yAxis: {},
            series: [{
                name: '今日访问',
                type: 'bar',
                barWidth: '50%',
                data: seriesData3
            }],
            label:{
                show: true,
                position: 'top'
            },
            itemStyle:{
                color:'#3CB371'
            }
        };
    box3.setOption(option3);
    // 排名上升
    var option4 = {
            title: {
                text: '排名增量'
            },
            tooltip: {},
            xAxis: {
                data: dateList
            },
            yAxis: {},
            series: [{
                name: '今日上升',
                type: 'bar',
                barWidth: '50%',
                data: seriesData4
            }],
            label:{
                show: true,
                position: 'top'
            },
            itemStyle:{
                color:'#BDB76B'
            }
        };
    box4.setOption(option4);

（5）显示效果