fire-mh/src/components/water-gauge/index.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 },
  },
  data() {
    return {};
  },
  watch: {
    dataMap(val) {
      this.getData(val);
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
        let echartsMap = this.$echarts.getInstanceByDom(this.$refs.echartD);
        if (echartsMap == null) {
          echartsMap = this.$echarts.init(this.$refs.echartD);
        }
       echartsMap.setOption({
        title: {
          show: true,
          text: "水源完好率",
          left: "center",
          right: "center",
          bottom: "center",
          top: "52%",
          center: 20,
          textStyle: {
            color: "#FFF",
            fontSize: "0.225rem",
            align: "center",
            fontFamily: "syhtN",
          },
        },
        series: [
          {
            name: "刻度",
            type: "gauge",
            radius: "80%",
            min: 0, //最小刻度
            max: 100, //最大刻度
            startAngle: 225, //开始角度 左侧角度
            endAngle: -135, //结束角度 右侧
            z: 4,
            splitNumber: 10,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [[1, "rgba(0,0,0,0)"]],
              },
            }, //仪表盘轴线
            axisLabel: {
              show: false,
              color: "#00faff",
              fontSize: 14,
              distance: 20,
              formatter: function (v) {
                return v;
              },
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 6,
              lineStyle: {
                color: "#00faff",
                width: 1,
                // length:10
              },
              length: 5,
            }, //刻度样式
            splitLine: {
              show: true,
              length: -10,
              lineStyle: {
                color: "#00faff",
                width: 1,
              },
            }, //分隔线样式
          },
          {
            type: "gauge",
            radius: "60%",
            // center: ["50%","70%"],
            splitNumber: 5, //刻度数量
            startAngle: 225, //开始角度 左侧角度
            endAngle: -135, //结束角度 右侧
            z: 4,
            axisLine: {
              show: true,
              roundCap: true,
              lineStyle: {
                width: 10,
                color: [
                  [
                    this.dataMap > 1 ? 1 : this.dataMap,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "#0099ff" },
                      { offset: 1, color: "#00d5ff" },
                    ]),
                  ],
                  // [1, "#111F42"],
                ],
              },
            },
            //分隔线样式。
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            pointer: {
              show: false,
              length: "70%",
              width: "2%",
            },
            title: {
              show: false,
              offsetCenter: [0, 0], // x, y，单位px
        //       textStyle: {
        //         fontWeight: "100",
        //         color: "#0ab7ff",
        //         fontSize: 30,
        //       },
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: true,
              offsetCenter: [0, "-20%"],
              color: "#ffffff",
                fontSize: "0.625rem",
                color: "#FFF",
                fontWeight: "500",
                fontFamily: "syhtN",
              formatter: function (v) {
                return v * 100 + "%";
              },
            },
            data: [
              {
                value: this.dataMap,
              },
            ],
          },
          {
            //内圆
            type: "pie",
            radius: "46%",
            center: ["50%", "50%"],
            z: 3,
            itemStyle: {
              color: new echarts.graphic.RadialGradient(
                0.5,
                0.5,
                0.8,
                [
                  {
                    offset: 0,
                    color: "#00b8f8",
                  },
                  {
                    offset: 0.5,
                    color: "#0068d4",
                  },
                  {
                    offset: 1,
                    color: "#0068d3",
                  },
                ],
                false
              ),
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
            emphasis:{scale: 0.1},
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: [100],
          },
          // 刻度圈
          {
            type: "pie",
            radius: ["0%", "90%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            z: 3,
            label: {
              show: false,
              position: "center",
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#122c7a",
                  },
                  {
                    offset: 1,
                    color: "#122c7a",
                  },
                ],
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          //最外层圈
          {
            type: "pie",
            radius: ["0%", "100%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            z: 2,
            emphasis:{scale: 0.1},
            label: {
              show: false,
              position: "center",
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0b1f61",
                  },
                  {
                    offset: 1,
                    color: "#0b1f61",
                  },
                ],
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 100,
              },
            ],
          },
        ],
      });
      window.onresize = function () {
        echartsMap.resize();
            };
    },
   
  },
};
</script>

<style scoped></style>