deviceManager/src/views/components/fireInternetInfo/index3.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"],
  data() {
    return {};
  },
  watch: {
    resData() {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      setTimeout(() =>{
        let data = this.resData
        echarts.init(this.$refs.echartD).setOption({
          series: [
            // 进度条
            {
              name: "仪表盘",
              type: "gauge",
              radius: "55%", // 半径
              startAngle: 270, //开始角度 左侧角度
              endAngle: -89.999, //结束角度 右侧
              splitNumber: 30,
              axisLine: {
                lineStyle: {
                  color: [
                    [0, "#80FFA5"],
                    [1, "#FF5801"],
                  ],
                  width: 10,
                },
              },
              axisLabel: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              itemStyle: {
                show: false,
              },
              detail: {
                formatter:  () => {
                  return `电量：${data.dianliang}%\n信号：${data.xinhao}`;
                },
                offsetCenter: [0, "0%"],
                textStyle: {
                  fontSize: 16,
                  fontWeight: "700",
                  height:20,
                  color:"#80FFA5",
                  fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
                },
              },
              title: {
                offsetCenter: [0, "10%"],
              },
              pointer: {
                show: false,
              },
              data: [
                  (`电量：${data.dianliang}%\n信号：${data.xinhao}`),
              ],
            },
          ],
        })
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      },1000)
    },

  }
};
</script>

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