ECharts中实现异步数据更新非常简单,在图标初始化后不管任何时候只要通过jQuery等工具异步获取数据后通过setOption填入数据和配置即可更新数据。

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

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

或者先设置样式,显示空的直角坐标轴,然后后去数据填入数据

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

// 异步加载数据
$.get('data.json').done(function (data) {
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});

建议:在更新数据时,最好加上系列的name

loading动画

ECharts默认提供简单的加载动画,只需要调用showLoading方法显示;数据记在完之后再调用hideLoading方法隐藏加载动画。

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

动态更新

ECharts由数据驱动,数据的改变驱动图表展现的改变。

所有的数据更新都需要通过setOption实现,只需要定时获取数据。

results matching ""

    No results matching ""