ECharts 通常数据设置在 setOption 中，如果我们需要异步加载数据，可以配合 jQuery等工具，在异步获取数据后通过 setOption 填入数据和配置项就行。

ECharts 是一个用于数据可视化的 JavaScript 库。当需要对大量数据进行可视化时，通常需要从后端异步加载数据。以下是使用 ECharts 异步加载数据的基本步骤：

定义一个 ECharts 实例：

javascript
var myChart = echarts.init(document.getElementById('myChart'));

指定图表的配置项和数据：

javascript
var option = {
    // 配置项
    ...
    series: [{
        // 数据
        ...
    }]
};
myChart.setOption(option);

注意，这里的数据可以为空数组或者只包含一些初始值，因为在异步加载完成后会使用新数据进行更新。

发起异步请求获取数据：

javascript
$.ajax({
    url: 'data.json',
    success: function (data) {
        // 处理数据
        ...
        // 更新图表
        myChart.setOption(option);
    }
});

这里使用了 jQuery 的 ajax 方法，当然也可以使用原生的 XMLHttpRequest 对象或者其他库来发送异步请求。

在成功回调函数中处理数据并更新图表：

在成功回调函数中，将从后端获取到的数据解析为 ECharts 图表所需要的格式，并将其赋值给配置项的 series 属性。然后，调用 myChart.setOption() 方法更新图表。

javascript
$.ajax({
    url: 'data.json',
    success: function (data) {
        // 处理数据
        var seriesData = processData(data);
        option.series = seriesData;
        // 更新图表
        myChart.setOption(option);
    }
});

这里的 processData() 函数需要根据实际情况来编写，用于将从后端获取到的数据转换为 ECharts 所需的格式。

ECharts 通常数据设置在 setOption 中，如果我们需要异步加载数据，可以配合 jQuery等工具，在异步获取数据后通过 setOption 填入数据和配置项就行。 json 数据：

echarts_test_data.json 数据：
{
    "data_pie" : [
    {"value":235, "name":"视频广告"},
    {"value":274, "name":"联盟广告"},
    {"value":310, "name":"邮件营销"},
    {"value":335, "name":"直接访问"},
    {"value":400, "name":"搜索引擎"}
    ]
}

实例

var myChart = echarts.init(document.getElementById('main'));
$.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) {
    myChart.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:data.data_pie
            }
        ]
    })
}, 'json')

尝试一下 ?

如果异步加载需要一段时间，我们可以添加 loading 效果，ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画：

实例

var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();  // 开启 loading 效果
$.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) {
    myChart.hideLoading();  // 隐藏 loading 效果
    myChart.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data:data.data_pie
            }
        ]
    })
}, 'json')

数据的动态更新

ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。

所有数据的更新都通过 setOption 实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

实例

var base = +new Date(2014, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 150];
var now = new Date(base);
function addData(shift) {
    now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
    date.push(now);
    data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
    if (shift) {
        date.shift();
        data.shift();
    }
    now = new Date(+new Date(now) + oneDay);
}
for (var i = 1; i < 100; i++) {
    addData();
}
option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        boundaryGap: [0, '50%'],
        type: 'value'
    },
    series: [
        {
            name:'成交',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
                normal: {}
            },
            data: data
        }
    ]
};
setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'成交',
            data: data
        }]
    });
}, 500);