Echarts使用ajax实现动态数据的加载

  最近在做项目时，感觉dataTables表格使用的太多了，突发奇想为何不使用图表的方式来展示数据，经过网上一番教程的学习，成功的使用后台传输的数据实现了Echarts动态数据的加载。

 &emps;Echarts(3.x)官网实例的数据都是静态的，但是在实际项目中，我们往往会使用动态加载数据，但是官网里面给出的异步加载动态数据的教程非常模糊，让人有点摸不着头脑，所以写下这篇博客记录下使用Echarts动态加载数据的实例。
  一般的步骤分为以下几步:

• 1.客户端通过ajax发送请求。
• 2.服务端接收ajax请求，并作出相应的回应。
• 3.服务端生成json数据并返回给客户端。
• 4.客户端接收json数据后通过Echarts显示在页面上。

1.定义div块

  在页面中为Echarts定义一个div块，并且设置宽高，Echarts加载出来的图表就显示在div块中

<div id="attend_list" class="attend-list mt-40" style="display: block"></div>

2.在Echarts官网选择样式

官网地址,官网中有很多的实例，选择自己需要的下载对应的文件即可。

3.客户端通过ajax发送请求

var myChart = echarts.init(document.getElementById('attend_list'));
var dataShadow = [];
option = null;
var yMax = 8;
var dateNum = [];  //日期数组，用来放请求的日期
var timeNum = [];  //考勤时长，用来放用来的考勤时间
var id;
var variable ;
var year;
var month;
$(function () {

    //加载事件
    var collection = $(".layui-btn");
    $.each(collection, function () {
        $(this).addClass("start");
    });
    $("#month").addClass("end");

    var gather = $(".cut");
    $.each(gather, function () {
        $(this).addClass("start");
    });
    $("#bar").addClass("end1");
    document.getElementById("pages").style.display = "none";

    dateNum =[];
    timeNum = [];
    $.ajax({
        type: 'post', //异步请求(同步请求将会锁住浏览器，用户必须等待其他的操作完成后才能进行其它的操作)
        url: '/attend/data',
        dataType: 'json',
        success: function (result) {
            var data = result.data;
            for (var i = 0, length = data.length; i < length; i++) {
                var array1 = data[i].attendDate.split("-");
                year = array1[0];
                month = array1[1];
                dateNum.push(array1[2]);
                timeNum.push(data[i].workHours);
            }

            myChart.hideLoading();  //隐藏加载动画
            //将Echarts表格信息抽取出来
            loadTable();
        }
    });
});

  先定义两个空的数组，然后将ajax返回的值填充到这两个空的数组中，最后用这两个数组中的值填充到Echarts图表中横纵坐标的值。

4.Echarts图表显示js

function loadTable() {
    for (var i = 0; i < timeNum.length; i++) {
        dataShadow.push(yMax);
    }

    myChart.on('click', function (params) {
        console.log(params);
        var clickDate=params.name;
        console.log(clickDate);
        console.log(year);
        console.log(month);
        detailed(clickDate);
    });

    option=({

        title: {
            left: 'center',
            text: "考勤信息展示图"
        },

        xAxis: {
            name: '日期',
            data: dateNum,
            axisLabel: {
                inside: true,
                textStyle: {
                    color: '#000000'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 8
        },
        yAxis: {
            name: '考勤时长/h',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#000000'
                }
            }
        },
        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            { // For shadow
                type: 'bar',
                itemStyle: {
                    normal: {color: 'rgba(0,0,0,0.05)'}
                },
                barGap:'-100%',
                barCategoryGap:'40%',
                data: dataShadow,
                animation: false
            },
            {
                type: 'bar',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    },
                    emphasis: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#2378f7'},
                                {offset: 0.7, color: '#2378f7'},
                                {offset: 1, color: '#83bff6'}
                            ]
                        )
                    }
                },
                data: timeNum
            }
        ]
    });

    myChart.hideLoading();  //隐藏加载动画

    if (option && typeof option === "object"){
        myChart.setOption(option,true);
    }
}

  在这里我选用的是柱形图展示用户考勤信息，并且使用的是渐变的效果，页面展示效果在文末进行展示。

5.客户端返回的json数据

  由第三步中的代码可以看出:我在图表中将考勤的日期定为柱形图的横坐标，而将考勤的时间定为柱形图的纵坐标。
在控制台打印出的json数据

6.Echarts在页面上的展示