vue-cli3使用Echart动态渲染数据 轮询获取后台数据

实现效果

采用轮询的方式向后台获取数据，然后动态将数据赋值给Echart饼状图的option.series[0].data数据，前端网页做出相应的改变

准备工作

进Echart官网选择适合的图，这里以Doughnut Chart饼状图为例。
1.导入Echart,在script里导入

import echarts from 'echarts'

2.给Echart一个大小

 <div id="myChart" style="height:200px;"></div>

3.将官网的option复制到data（）里

export default {
  data() {
    return {
      option: {
        title: {
          text: '设备概况',
          x: 'center',
          textStyle: { color: '#ffffff' }
        },
        tooltip: {},
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            data: []
          }
        ]
      }

4.定义方法 drawLine

 // 饼状图统计
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      const res = this.option
      myChart.setOption(res)
    }

5.将 drawLine()放进mounted钩子函数里

mounted() {
    this.drawLine()
    }

到此准备工作就已经做完，如果你的data里有静态数据，网页就可以显示了，接下看看如何让它监听数据变化。

动态渲染

需要监听Option的变化，监听函数如下

watch: {
    option: {
      handler(newVal, oldVal) {
        this.drawLine()
      },
      deep: true //深度监听
    }
  },

这里我们是要看option.series[0].data的数据有无变化，它是对象里的数组的数组，所以需要深度监听，加上deep：true
补充：非深度监听，监听一个普通的值

data:{
        num:1,
    },
    watch:{
        num(val, oldVal){   //普通监听
            console.log("a: "+val, oldVal);
        },

因为我是采用轮询的方式向后台获取数据，每10秒刷新一次，所监听监听函数里，只要监听到数据变化就再次执行this.drawLine()这个函数，这样就刷新了，因为this.option发生了变化。