echarts 加载中-ECharts异步数据加载和更新

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在ECharts中echarts 加载中，图表初始化后的任何时候，只需要通过jQuery等工具异步获取数据，然后通过setOption填写数据和配置项即可。

ss

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    $.get('data.json').done(function (data) {
        myChart.setOption({
            title:{
                text:'异步数据加载'
            },
            tooltip:{},
            legend:{
                data:['销量']
            },
            xAxis:{
                data:data.name
            },
            yAxis:{},
            series:[{
                name:'销量',
                type:'bar',
                data:data.value
            }]
        })
    });

记得导出jquery-3.3.1.min.js内的包，否则$可能会在控制台报未定义的错误。

先设置其他样式显示空矩形轴，然后获取数据并填充数据。

    // 基于准备好的dom，初始化echarts实例
    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.name
            },
            series:[{
                name:'销量',
                data:data.value
            }]
        })
    });

加载动画

如果数据加载时间较长，在画布上放置一个空的坐标轴也会让用户认为出现了bug，所以需要一个加载动画来提醒用户数据正在加载。

ECharts默认提供了简单的加载动画。 只需调用显示方法即可。 数据加载完成后echarts 加载中，调用该方法隐藏加载动画。

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

数据动态更新

所有的数据更新都是通过这个流程来实现的。 您只需要定期获取数据并填写数据，无需考虑数据的变化。 ECharts会找出两组数据之间的差异，然后使用适当的动画来表达数据的变化。

例子：