SOURCE

window.onload = () => {
    
    var myChart = echarts.init(document.getElementById('main'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var option = {
        title:{
            text: '异步加载',
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    };
    myChart.setOption(option);
    $.get('http://www.laimou5610.cn/json/sales.json').done(data => {
        setTimeout(() => { // 模拟 2s
            myChart.setOption({
                xAxis:{
                    data : data.categories,
                },
                series: {
                    data : data.data,
                }
            })
        },2000)
    });

    myChart2.showLoading(); // 显示加载
    myChart2.setOption(option);
    $.get('http://www.laimou5610.cn/json/sales.json').done(data => {
        setTimeout(() => { // 模拟 2s
            myChart2.setOption({
                xAxis:{
                    data : data.categories,
                },
                series: {
                    data : data.data,
                }
            });
            myChart2.hideLoading(); // 隐藏加载
        },2000)
    });


    var app = new Vue({
        el : '#main3',
        data : {
            data : [Math.random()*150],
            date : [],
            myChart : null,
            now : new Date(+new Date(2000,8,22)),
        },
        methods: {
                drawChart(){
                    let myChart3 = echarts.init(document.getElementById('main3'));
                    this.myChart = myChart3;
                    myChart3.setOption({
                        title: {
                            text: "ECharts 入门示例"
                        },
                        tooltip: {},
                        legend: {
                            data: ["销量"]
                        },
                        xAxis: {
                            data: this.date
                        },
                        yAxis: {},
                        series: [
                            {
                                name: "销量",
                                type: "bar",
                                data: this.data
                            }
                        ]
                    })
                },
            addData(shift){
                let now = [this.now.getFullYear() , this.now.getMonth()+1 , this.now.getDate()].join('/');
                this.now = new Date(+new Date(now) + 24*3600*1000); // 每次更新时间，增加一天
                this.date.push(now); // 弹入时间
                this.data.push((Math.random() - 0.4) * 10 + this.data[this.data.length - 1]); // 每次随机增加 [-0.4,1)*10
                if (shift){
                    this.date.shift();
                    this.data.shift();
                }
            }
        },
        mounted(){
            this.drawChart();
            for (var i=1; i<100; i++){
                this.addData(false); // 初始化
                this.myChart.setOption({ // 初始化也更新该值
                    xAxis: {
                        data: this.date
                    },
                    series: [{
                        name:'成交',
                        data: this.data
                    }]
                });
            }
            setInterval(() => { // 每500毫秒更新，同时参数为true，为弹出第一个
                this.addData(true);
                this.myChart.setOption({
                    xAxis: {
                        data: this.date
                    },
                    series: [{
                        name:'成交',
                        data: this.data
                    }]
                });
            },500);
        }
    });


}

<div id="main" style="width: 600px;height: 400px;"></div>
<div id="main2" style="width: 600px;height: 400px;"></div>


<div id="main3" style="width: 600px;height: 400px;"></div>
<!-- 动态刷新的话可以定义计时器更新系列值即可 -->