Vue中Echarts动态数据的实现

最终效果

实现过程

引入Echarts依赖

npm install echarts --save

模版文件代码

<template>
    <div class="home">
        <h1>Echarts 动态数据</h1>
        <button @click="start">开始执行</button>
        <button @click="stop">停止执行</button>
        <div style="width:100%; height:500px;" ref="main"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    name: 'Home',
    data(){
        return{
            myChart: null,
            dataList: [5,20,36,10,10,20],
            timer: null,
            option: null,
        }
    },
    methods:{
        showEcharts(){
            this.myChart = echarts.init(this.$refs.main);
            this.option = {
                title: {
                    text: 'Echarts 入门示例'
                },
                tooltip: {},
                xAxis: {
                    data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'line',
                        data: this.dataList,
                        smooth: true
                    }
                ]
            }
            this.myChart.setOption(this.option);
                
        },
        start(){
            this.timer = setInterval(()=>{
                // this.myChart.dispose();
                // this.showEcharts();
                this.dataList[parseInt(5*Math.random())] = parseInt(50*Math.random());
                this.myChart.setOption(this.option);
            },200)
        },
        stop() {
            clearInterval(this.timer);
        }
    },
    mounted(){
        this.showEcharts();
    }
}
</script>

上面的Echarts是使用的官网最简单的入门示例，只不过这里实现方式上有所区别。要实现动态数据最主要的方法是让Echarts的option重新设置。这里在初始化完成Echarts后，将option最为data中的值，这样是为了方便再其他地方重新设置option。代码中在start方法中就是对Echarts的option重新赋值后进行重设。