最终效果
实现过程
引入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重新赋值后进行重设。
