control/src/components/gauge.vue

<template>
  <div id="charts"></div>
</template>
<script>
import * as echarts from "echarts/core";
import { GaugeChart } from "echarts/charts";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([GaugeChart, LabelLayout, UniversalTransition, CanvasRenderer]);
export default {
  props: ["value", "gears"],
  data() {
    return {
      mychart: null,
      option: {
        series: {
          name: "Pressure",
          type: "gauge",
          itemStyle: {
            color: "#FFFFFF",
          },
          startAngle: 180,
          max: 60,
          endAngle: 0,
          axisLine: {
            lineStyle: {
              width: 1,
            },
          },
          axisTick: {
            distance: 0,
            length: 10,
            lineStyle: {
              color: "#FFFFFF",
            },
          },
          splitLine: {
            length: 15,
            distance: 0,
            lineStyle: {
              color: "#FFFFFF",
            },
          },
          axisLabel: {
            distance: 8,
            color: "#FFFFFF",
          },
          progress: {
            show: true,
          },
          radius: "160%",
          center: ["50%", "90%"],
          detail: {
            offsetCenter: [0, -25],
            valueAnimation: true,
            formatter: (value) => {
              return `{value|${value.toFixed(0)}}{unit|km/h}\n{num|${
                this.gears
              }}`;
            },
            rich: {
              value: {
                fontSize: 20,
                fontWeight: "bolder",
                color: "#FFFFFF",
              },
              unit: {
                fontSize: 20,
                color: "#FFFFFF",
                padding: [0, 0, 0, 10],
              },
              num: {
                fontSize: 20,
                color: "#FFFFFF",
                padding: [0, 0, 0, 10],
              },
            },
          },
          pointer: {
            show: false,
          },
          data: [50],
        },
      },
    };
  },
  mounted() {
    this.mychart = echarts.init(document.getElementById("charts"));
    this.mychart.setOption(this.option);
  },
  watch: {
    value(v) {
      if (!this.mychart) return;
      if (v >= 100) v = 100;
      if (v <= 0) v = 0;
      this.option.series.data[0] = v;
      this.mychart.setOption(this.option);
      console.log(1, v);
    },
  },
};
</script>
<style scoped>
#charts {
  width: 500px;
  height: 200px;
}
</style>