vue-echarts 动态数据重绘

需求：
vue-echarts放子组件里
父组件传值调用它
当父组件的数据变更了
子组件里的echart重绘

思路：
子组件watch监听 props数据的变更
当监听到变更
重新定义 options的值

父组件
正常传值即可

子组件

<template>
  <chart style="width:160px; height:190px;"
         ref="yibiaopan"
         :options="orgOptions"
         :auto-resize="true"></chart>
</template>

<script>

import echarts from 'echarts'
export default {
  name: 'barChart2',
  props: ['titleName', 'useage'],
  data () {
    return {
      orgOptions: {}
    }
  },
  methods: {
    getInfoSucc () {
      this.orgOptions = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        title: [{ //主机使用率的样式
          x: 'center',
          y: '80%',
          text: this.titleName,
          textStyle: {
            fontSize: 14,
            color: '#0fd0ff',
          },
        }],
        toolbox: {
          show: false
        },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: { //【90%】的样式
              formatter: '{value}%',
              offsetCenter: [0, "75%"],
              textStyle: {
                color: 'white',
                fontSize: 16
              },
            },
            pointer: {
              width: 5, // 指针的宽度
              length: "60%", // 指针长度，按照半圆半径的百分比
            },
            splitLine: { // 分割线
              length: 10, // 分割线长度
              lineStyle: {
                width: 1, // 分割线宽度
                color: 'auto' // 分割线颜色，跟着仪表盘走
              }
            },
            axisTick: { // 刻度线
              length: 8, // 刻度线长度
              lineStyle: {
                width: 1, // 分割线宽度
                color: 'auto', // 分割线颜色，跟着仪表盘走

              }
            },
            axisLine: {
              lineStyle: {
                color: [[0.2, '#3dccae'], [0.8, '#207ae8'], [1, '#f06e23']], // 改表盘颜色
                width: 6, // 表盘粗细
              }
            },
            axisLabel: { //文字样式（及“10”、“20”等文字样式）
              distance: 1, //文字离表盘的距离
              fontSize: 9,
            },

            data: [{ value: this.useage }],
            title: { // 设置仪表盘中间显示文字样式
              show: false
            },
          }
        ]
      }
    }
  },
  watch: {
    useage: {
      handler (newValue, oldValue) {
        this.useage = newValue
        alert('监听到了')
        this.getInfoSucc() //监听到了，重新定义数据，即重绘
      },
      deep: true
    }
  },
  mounted () {
    this.getInfoSucc()

  }
}
</script>