ECharts异步数据加载与更新

ECharts 中在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:800px;">ss</div>
<script type="text/javascript">
    // 基于准备好的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
            }]
        })
    });
</script>

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

先设置其他的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。

<script type="text/javascript">
    // 基于准备好的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
            }]
        })
    });
</script>

Loading动画

如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

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

数据的动态更新

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

例子：http://www.echartsjs.com/gallery/editor.html?c=doc-example/tutorial-dynamic-data