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