ECharts 异步数据加载

先设置好别的样式，显示出一个空的直角坐标轴，然后获取并填入数据，操作如下：

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});

// 通过调用 showLoading 方法显示加载动画
myChart.showLoading();

// 异步加载数据
$.get('data.json').done(function (data) {
    // 当数据加载完成后再调用 hideLoading 方法将加载动画隐藏
    myChart.hideLoading();
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});

实验发现，通过 get 请求回来的 data 是字符串格式，不便操作，用 ajax 返回的 data 是 object 对象，代码如下：

// 异步加载数据
$.ajax({
    url: '/tjtb/open_tjtb_yzcj_chart/',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        // 当数据加载完成后再调用 hideLoading 方法将加载动画隐藏
        myChart.hideLoading();
        // 填入数据
        myChart.setOption({
            dataset: {
                source: data.source
            },
            series: data.serie
        });   
    }
});

【详情文档】https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-m16h28xk.html