web/src/views/home/components/userFlow.vue

<template>
  <div style="width: 100%; height: 100%" id="user_flow"></div>
</template>

<script>
import echarts from "echarts";

const option = {
  tooltip: {
    formatter: "{a} <br/>{b} : {c}%",
  },
  series: [
    {
      name: "入流量",
      type: "gauge",
      min: 0,
      max: 1000,
      detail: {
        formatter: "{value}Mb+",
        fontSize: 18,
        offsetCenter: [0, "50px"],
      },
      data: [{ value: 50, name: "当前入流量" }],
      center: ["25%", "50%"],
      radius: "80%",
      title: {
        offsetCenter: [0, "80px"],
      },
      axisLine: {
        lineStyle: {
          // color: [],
          width: 20,
        },
      },
      splitLine: {
        length: 20,
      },
    },
    {
      name: "出流量",
      type: "gauge",
      min: 0,
      max: 1000,
      detail: {
        formatter: "{value}Mb+",
        fontSize: 18,
        offsetCenter: [0, "50px"],
      },
      data: [{ value: 50, name: "当前出流量" }],
      center: ["75%", "50%"],
      radius: "80%",
      title: {
        offsetCenter: [0, "80px"],
      },
      axisLine: {
        lineStyle: {
          // color: [],
          width: 20,
        },
      },
      splitLine: {
        length: 20,
      },
    },
  ],
};

export default {
  name: "userFlow",
  mounted() {
    let userFlow = echarts.init(document.getElementById("user_flow"));
    option.series[0].data[0].value = (Math.random() * 1000).toFixed(2) - 0;
    option.series[1].data[0].value = (Math.random() * 1000).toFixed(2) - 0;
    userFlow.setOption(option);

    window.addEventListener("resize", function () {
      userFlow.resize();
    });
  },
};
</script>