deviceManager/src/views/components/fireInternetInfo/index1.vue

<template>
  <el-row>
    <div id="index1" ref="echartD" style="width:100%;height:300px;"></div>
  </el-row>
</template>
<script>
import * as echarts from "echarts";
export default {
  // props: ["resData"],
  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: () => 200 },
  },
  data() {
    return {};
  },
  watch: {
    dataMap(val) {
      this.getData(val);
    },
    dataNumber(val) {
      this.getData(val);
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      echarts.init(this.$refs.echartD).setOption({
        grid: {
          // top: 0,
          // bottom: 0,
          // left: 0,
          // right: 0,
          // margi
        },
        series: [
          // 进度条
          {
            name: "仪表盘",
            type: "gauge",
            radius: "55%", // 半径
            startAngle: 270, //开始角度 左侧角度
            endAngle: -89.999, //结束角度 右侧
            splitNumber: 20,
            axisLine: {
              lineStyle: {
                color: [
                  [this.dataMap, this.color],
                  [1, "#FF0087"],
                ],
                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: this.size,
                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),
            ],
          },
        ],
      });
      // window.addEventListener("resize", function() {
      //   myChart.resize();
      // });

    },

  }
};
</script>

<style lang="scss" scoped></style>