prop传值给子组件，子组件是一个图表：
这个时候会出现，值传过去了但是呢，图表其实没有渲染

解决方案：1、使用watch监听传过来的props，然后在props里进行渲染表格
2、如下图使用计算属性

<template>
  <div :id="uid" :style="{ width: width, height: height }"></div>
</template>
<script>
/**
 * 速度仪表盘
 */
export default {
    
    
  name: 'SpeedGauge',
  props: {
    
    
    speed: {
    
    
      type: Number,
      default: 0
    },
    width: {
    
    
      type: String,
      default: '100%'
    },
    height: {
    
    
      type: String,
      default: '100%'
    },
    speedUnion: {
    
    
      type: String,
      default: 'km'
    },
    uid: {
    
    
      type: String,
      default: ''
    }
  },
  data() {
    
    
    return {
    
    
      echartInstance: null
    };
  },
  computed: {
    
    
    speedUnioText() {
    
    
      return this.speedUnion === 'km' ? `{b|${
      
      this.speedUnion}/h}` : `{b|mph}`;
    },
    eOption() {
    
    
      return {
    
    
        series: [
          {
    
    
            type: 'gauge',
            name: 'Pressure',
            min: 0,
            max: 240,
            startAngle: 210,
            endAngle: -30,
            axisLine: {
    
    
              //外轮廓
              lineStyle: {
    
    
                width: 1,
                color: [
                  [this.speed / 240, '#0091F0'],
                  [1, '#C8C8C8']
                ]
              }
            },
            axisTick: {
    
    
              //刻度
              distance: -10,
              length: 5,
              splitNumber: 4,
              lineStyle: {
    
    
                //动态
                color: 'auto',
                width: 1
              }
            },
            splitLine: {
    
    
              //分割刻度
              length: 10,
              lineStyle: {
    
    
                color: '#C8C8C8',
                width: 1
              }
            },
            axisLabel: {
    
    
              show: false
            },
            pointer: {
    
    
              show: false,
              showAbove: true,
              width: 2,
              itemStyle: {
    
    
                color: '#0091F0'
              },
              length: '70%'
              // offsetCenter: [20, '20%']
            },
            detail: {
    
    
              valueAnimation: true,
              formatter: [`{a|${
      
      this.speed}}`, this.speedUnioText].join(
                '\n'
              ),
              color: '#000000',
              fontSize: 12,
              offsetCenter: [0, 5],
              rich: {
    
    
                a: {
    
    
                  color: '#0091F0',
                  fontSize: 18,
                  fontWeight: 'bold'
                },
                b: {
    
    
                  color: '#C8C8C8',
                  fontSize: 12
                }
              }
            },
            data: [
              {
    
    
                value: this.speed
              }
            ]
          }
        ]
      };
    }
  },
  watch: {
    
    
    uid(val, oVal) {
    
    
      if (val !== oVal) {
    
    
        this._init();
      }
    }
  },
  mounted() {
    
    
    this._init();
  },
  methods: {
    
    
    _init() {
    
    
      this.$nextTick(() => {
    
    
        if (document.getElementById(this.uid)) {
    
    
          let myChart = this.$echarts.init(document.getElementById(this.uid));
          this.echartInstance = myChart;
          myChart.setOption(this.eOption);
          myChart.resize();
        }
      });
    }
  }
};
</script>