Vue中使用Echarts仪表盘展示实时数据

在vue中echarts仪表盘实时数据
彩笔一枚，简单记录一下。
业务场景：通过websocket实时推送数据，将数据渲染到仪表盘中。

第一步：
基于准备好的dom，初始化echarts仪表盘实例。

第二步：
我是通过父子组件传值把数据接收过来，在data中定义upPressure参数，并将接收来的devicePressure参数赋值给它，便于后面将值传入到echarts中。

父组件中
 <div class="chart" shadow="always">
    <objEcharts :devicePressure="pressure"></objEcharts>
  </div>

子组件中
export default {
   
   
  props: {
   
   
    devicePressure: {
   
    type: String, require: true },
  },
  data() {
   
   
    return {
   
   
      upPressure: this.devicePressure,
    };
  },

第三步：
因为是实时数据，就需要在watch中监听数据变化，实时更新。
注：这里我只监听一个参数变化，没有使用deep: true。

 watch: {
   
   
  	//监听dev