vue+echarts+vue-echarts 自定义仪表盘

自定义echarts仪表盘

代码示例

js部分

代码如下（示例）：

<template>
	<v-chart :option="leftOptions"></v-chart>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup(props) {
  const that = reactive({
	Options: {
        graphic: [
          {
            type: "image",
            left: "center",
            top: "center",
            z: -10,
            scale: [1, 1], //缩放
            style: {
              image: require("@/assets/images/RealTimePower.png"),
              opacity: 1,
              width: 180,
              height: 143,
            },
          },
        ],
        series: [
          {
            type: "gauge",
            // 指针颜色
            color: ["#06DE6F"],
            center: ["50%", "56.6%"],
            radius: "62%",
            progress: {
              show: true,
              width: 12,
            },
            startAngle: 215,
            endAngle: -35,
            axisLine: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            detail: {
              color: "#FFFFFF",
              fontWeight: "bold",
              fontSize: 24,
              offsetCenter: ["0", "90%"],
            },
            data: [{ value: 0 }],
          },
        ],
      }
	})
    return {
      ...toRefs(that)
    };
};
</script>

效果图