Vue Echarts动态仪表盘

<template>
	<div class="dashboard" ref="test1"></div>
</template>
<script>
export default {
	data() {
		return {
			options1: {
   			 tooltip: {
    		  formatter: "{a} <br/>{b} : {c}%"
    		},
    
    //下面属性才是仪表盘的核心！！反正我是这么认为的！！！
    series: [
      {
        //类型
        type: "gauge",
        min: 0,
        max: 1000,
        //半径
        radius: 150,
        //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
        startAngle: 180,
        //结束角度。
        endAngle: 0,
        center: ["50%", "90%"],
        //仪表盘轴线相关配置。
        axisLine: {
          show: true,
          // 属性lineStyle控制线条样式
          lineStyle: {
            width: 20,
            color: [[1, "#63869e"]]
          }
        },
        //分隔线样式。
        splitLine: {
          show: false
        },
        //刻度样式。
        axisTick: {
          show: false
        },
        //刻度标签。
        axisLabel: {
          show: false
        },
        //仪表盘指针。
        pointer: {
          //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
          show: false,
          //指针长度
          length: "90%",
          width: 0
        },
        //仪表盘标题。
        title: {
          show: true,
          offsetCenter: [0, "-40%"], // x, y，单位px
          textStyle: {
            color: "#hhh",
            fontSize: 30
          }
        },
        //仪表盘详情，用于显示数据。
        detail: {
          show: true,
          offsetCenter: [0, "-10%"],
          formatter: "风险水平",
          textStyle: {
            fontSize: 30
          }
        },
        data: [
          {
            value: 0,
            name: "低"
          }
        ]
      }
    ]
  },
		}
	}
},
methods:{
	timeTicket() {
      let myChart = this.$echarts.init(this.$refs.test1);
      //   绘制图表
      setInterval(() => {
        var random = (Math.random() * 100).toFixed(2);
        // var random = 90;
        var color = [[random / 100, "#bed323"], [1, "#f3f3f3"]];
        this.options1.series[0].axisLine.lineStyle.color = color;
        this.options1.series[0].data[0].value = random;
        if (random < 30) {
          this.options1.series[0].data[0].name = "低";
        } else if (random < 70) {
          this.options1.series[0].data[0].name = "中";
        } else {
          this.options1.series[0].data[0].name = "高";
        }
        myChart.setOption(this.options1, true);
      }, 200);
    },
},
mounted() {
	this.timeTicket();
}

</script>
<style>
	.dashboard {
      height: 420/75rem;
      background: #4b71fb;
    }
</style>