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重新赋值后进行重设。