echarts(六) 高级篇（异步数据的更新）

高级篇

异步数据的更新

• 请求数据的方式：ajax、fetch 都可以。
• 数据的更新有两种思路：
  • 请求到数据后，setOption()。
  • 先setOption()，有什么先配置什么。等请求到数据后，再追加配置。
• 注：在数据加载的过程中，还可以使用echarts 实例对象的loading 功能
  • 显示 loading：showLoading()
  • 隐藏 loading：hideLoading()

思路一 请求到数据后，setOption()

    const myChart = echarts.init(document.getElementById('main'));
    fetch('./data/China.json')
        .then((res) => res.json())
        .then(data => {
            /*注册地图*/
            echarts.registerMap('china', data);
            /*配置项*/
            const option = {
                title: {
                    text: '中国地图',
                    left:'center'
                },
                series: {
                    type: 'map',
                    map: 'china'
                }
            };
            /*基于配置项显示图表*/
            myChart.setOption(option);
        })

思路二 请求到数据后，再追加配置

const myChart = echarts.init(document.getElementById('main'));
/*有什么先配置什么*/
myChart.setOption({
    title: {
        text: '中国地图',
        left:'center'
    }
});
myChart.showLoading('default',{
    text: '数据加载中'
});
fetch('./data/China.json')
    .then((res) => res.json())
    .then(data => {
        myChart.hideLoading();
        /*注册地图*/
        echarts.registerMap('china', data);
        /*等请求到数据后，追加配置*/
        myChart.setOption({
            series: {
                type:'map',
                map:'china',
            }
        });
    })