mh_fire/src/components/gauge/indexcom.vue

<template>
  <div
    ref="echartD"
    style="width: 100%; height: 100%; display: flex; justify-content: center"
  ></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: {
    dataMap: { type: Number, default: () => 0 },
    dataNumber: { type: Number, default: () => 0 },
    color: { type: String, default: () => "#468EFD" },
    size: { type: Number, default: () => 20 },
    tick: { type: Boolean, default: () => true },
    with: { type: Number, default: () => 20 },
  },
  data() {
    return {};
  },
  watch: {
    dataMap(val) {
      this.getData(val);
    },
    dataNumber(val) {
      this.getData(val);
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      if(document.body.clientWidth >1940){
        echarts.init(this.$refs.echartD).setOption({
        // backgroundColor: "none",
        grid: {
          // top: 0,
          // bottom: 0,
          // left: 0,
          // right: 0,
          // margi
        },
        series: [
          // 进度条
          {
            name: "仪表盘",
            type: "gauge",
            radius: "80%", // 半径
            startAngle: 220, //开始角度 左侧角度
            endAngle: -40, //结束角度 右侧
            splitNumber: 6,
            axisLine: {
              lineStyle: {
                color: [
                  [this.dataMap, this.color],
                  [1, "#111F42"],
                ],
                width: 8,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              formatter:  (value) => {
                return this.dataNumber ? this.dataNumber :`${(value * 100).toFixed(0)}%`;
              },
              offsetCenter: [0, "0%"],
              textStyle: {
                //fontSize: this.size,
                fontSize: 30,
                fontWeight: "400",
                color:this.color, 
                // color: "#FFF",
                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
              },
            },
            title: {
              offsetCenter: [0, "10%"],
            },
            pointer: {
              show: false,
            },
            data: [
                (this.dataNumber || this.dataMap),
            ],
          },
          // 刻度
          {
            type: "gauge",
            // center: ["50%", "60%"],
            name: "仪表盘",
            radius: "130%", // 半径
            startAngle: 220, //开始角度 左侧角度
            endAngle: -40, //结束角度 右侧
            splitNumber: 5,
            z: 2,
            axisTick: {
              show: this.tick,
              lineStyle: {
                color: "#6B9DD7",
                width: 3,
              },
              length: -1,
            }, //刻度样式
            splitLine: {
              show: this.tick,
              lineStyle: {
                color: "#6B9DD7",
                width: 3,
              },
              length: -1,
            }, //分隔线样式
            axisLabel: {
              color: "rgba(255,255,255,0)",
              fontSize: 16,
            }, //刻度节点文字颜色
            pointer: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            label: {
              show: false,
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: false,
              offsetCenter: ["0", "0%"],
              color: "#A2C7F3",
              formatter: function (params) {
                return params;
              },
              textStyle: {
                fontSize: 80,
                
              },
            },
          },
        ],
      });
      }else{
        echarts.init(this.$refs.echartD).setOption({
        // backgroundColor: "none",
        grid: {
          // top: 0,
          // bottom: 0,
          // left: 0,
          // right: 0,
          // margi
        },
        series: [
          // 进度条
          {
            name: "仪表盘",
            type: "gauge",
            radius: "90%", // 半径
            startAngle: 220, //开始角度 左侧角度
            endAngle: -40, //结束角度 右侧
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [this.dataMap, this.color],
                  [1, "#111F42"],
                ],
                width: this.with,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              formatter:  (value) => {
                return this.dataNumber ? this.dataNumber  :`${(value * 100).toFixed(0)}%`;
              },
              offsetCenter: [0, "0%"],
              textStyle: {
                //fontSize: this.size,
                fontSize: 25,
                fontWeight: "700",
                color:this.color, 
                // color: "#FFF",
                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
              },
            },
            title: {
              offsetCenter: [0, "10%"],
            },
            pointer: {
              show: false,
            },
            data: [
                (this.dataNumber || this.dataMap),
            ],
          },
          // 刻度
          {
            type: "gauge",
            // center: ["50%", "60%"],
            name: "仪表盘",
            radius: "140%", // 半径
            startAngle: 220, //开始角度 左侧角度
            endAngle: -40, //结束角度 右侧
            splitNumber: 5,
            z: 2,
            axisTick: {
              show: this.tick,
              lineStyle: {
                color: "#6B9DD7",
                width: 3,
              },
              length: -1,
            }, //刻度样式
            splitLine: {
              show: this.tick,
              lineStyle: {
                color: "#6B9DD7",
                width: 3,
              },
              length: -1,
            }, //分隔线样式
            axisLabel: {
              color: "rgba(255,255,255,0)",
              fontSize: 12,
            }, //刻度节点文字颜色
            pointer: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            label: {
              show: false,
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: false,
              offsetCenter: ["0", "0%"],
              color: "#A2C7F3",
              formatter: function (params) {
                return params;
              },
              textStyle: {
                fontSize: 20,
                fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
              },
            },
          },
        ],
      });
      }
      
    },
    resize() {
      echarts.init(this.$refs.echartD).resize();
    },
  },
};
</script>

<style scoped>
</style>