Echart仪表盘网速

image.png

"echarts": "^5.1.2",

<template>
  <div id="rightEcharts4" class="echarts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  // startVal 初始值 endVal 最终值 title 标签值
  props: {
    datas: {
      type: [Array, Object, String],
      default: ""
    }
  },
  data() {
    return {
      Time1: null,
      datasCopy: ""
    };
  },
  computed: {},
  watch: {
    // 这是监听json值变化
    datas: {
      // json为监听参数名
      handler: function(val, oldVal) {
        // 不能用箭头函数
        this.$nextTick(() => {
          setTimeout(() => {
            this.echartsFun(val);
          }, 200);
        });
      },
      immediate: true // 首次赋值是否触发,一般不写
    }
  },
  beforeDestroy() {
    clearInterval(this.Time1);
  },
  methods: {
    echartsFun(val) {
      this.datasCopy = val;
      // console.log(JSON.parse(JSON.stringify(this.datasCopy)));
      const myChart = echarts.init(document.getElementById("rightEcharts4"));
      const option = {
        title: [
          {
            text: "网速峰值",
            top: "90%",
            left: "8%",
            textStyle: {
              color: "#fff",
              fontSize: 14,
              align: "center",
              fontWeight: "normal"
            }
          },
          {
            text: "网速平均值",
            top: "90%",
            left: "42%",
            textStyle: {
              color: "#fff",
              fontSize: 14,
              align: "center",
              fontWeight: "normal"
            }
          },
          {
            text: "网速波谷",
            top: "90%",
            left: "78.5%",
            textStyle: {
              color: "#fff",
              fontSize: 14,
              align: "center",
              fontWeight: "normal"
            }
          }
        ],
        series: [
          {
            type: "gauge",
            radius: "70%",
            center: ["15%", "50%"],
            startAngle: 210,
            endAngle: -30,
            splitNumber: 4,
            min: 0,
            max: 100,
            title: {
              offsetCenter: [0, "83%"],
              color: "#fff",
              fontWeight: "normal",
              fontSize: 18
            },
            axisLine: {
              lineStyle: {
                width: 6,
                color: [[0.3, "#37DAFE"], [0.7, "#37DAFE"], [1, "#5BFF83"]]
              }
            },
            pointer: {
              itemStyle: {
                color: "auto"
              }
            },
            axisTick: {
              distance: 0,
              length: 4,
              lineStyle: {
                color: "auto",
                width: 1
              }
            },
            splitLine: {
              distance: 0,
              length: 8,
              lineStyle: {
                color: "auto",
                width: 2
              }
            },
            axisLabel: {
              distance: 11,
              color: "#fff",
              fontSize: 10
            },
            pointer: {
              width: 4,
              length: "40%",
              offsetCenter: [0, 7],
              itemStyle: {
                color: "#37DBFF"
              }
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} Mbps",
              color: "#fff",
              fontWeight: "normal",
              fontSize: 11
            },
            data: [
              {
                value: 9,
                name: "≥9Mbps"
              }
            ]
          },
          {
            type: "gauge",
            radius: "70%",
            center: ["50%", "50%"],
            startAngle: 210,
            endAngle: -30,
            splitNumber: 4,
            min: 0,
            max: 100,
            title: {
              offsetCenter: [0, "83%"],
              color: "#fff",
              fontWeight: "normal",
              fontSize: 18
            },
            axisLine: {
              lineStyle: {
                width: 6,
                color: [[0.3, "#37DAFE"], [0.7, "#37DAFE"], [1, "#5BFF83"]]
              }
            },
            pointer: {
              itemStyle: {
                color: "auto"
              }
            },
            axisTick: {
              distance: 0,
              length: 4,
              lineStyle: {
                color: "auto",
                width: 1
              }
            },
            splitLine: {
              distance: 0,
              length: 8,
              lineStyle: {
                color: "auto",
                width: 2
              }
            },
            axisLabel: {
              distance: 11,
              color: "#fff",
              fontSize: 10
            },
            pointer: {
              width: 4,
              length: "40%",
              offsetCenter: [0, 7],
              itemStyle: {
                color: "#37DBFF"
              }
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} Mbps",
              color: "#fff",
              fontWeight: "normal",
              fontSize: 11
            },
            data: [
              {
                value: 7,
                name: "≥7Mbps"
              }
            ]
          },
          {
            type: "gauge",
            radius: "70%",
            center: ["85%", "50%"],
            startAngle: 210,
            endAngle: -30,
            splitNumber: 4,
            min: 0,
            max: 100,
            title: {
              offsetCenter: [0, "83%"],
              color: "#fff",
              fontWeight: "normal",
              fontSize: 18
            },
            axisLine: {
              lineStyle: {
                width: 6,
                color: [[0.3, "#37DAFE"], [0.7, "#37DAFE"], [1, "#5BFF83"]]
              }
            },
            pointer: {
              itemStyle: {
                color: "auto"
              }
            },
            axisTick: {
              distance: 0,
              length: 4,
              lineStyle: {
                color: "auto",
                width: 1
              }
            },
            splitLine: {
              distance: 0,
              length: 8,
              lineStyle: {
                color: "auto",
                width: 2
              }
            },
            axisLabel: {
              distance: 11,
              color: "#fff",
              fontSize: 10
            },
            pointer: {
              width: 4,
              length: "40%",
              offsetCenter: [0, 7],
              itemStyle: {
                color: "#37DBFF"
              }
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} Mbps",
              color: "#fff",
              fontWeight: "normal",
              fontSize: 11
            },
            data: [
              {
                value: 6,
                name: "≥6Mbps"
              }
            ]
          }
        ]
      };
      myChart.setOption(option, true); // true无数据时更新试图
    }
  }
};
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

感谢大家点赞！