常见的Eachers仪表盘

// 仪表盘
<template>
  <div>
    <div style="width:21vw;height:20vw" ref="gauge"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    value: {
      default: 0,
    },
    titleText: {},
  },

  data() {
    return {};
  },
  mounted() {
    var myChart = echarts.init(this.$refs.gauge);
    let option = {
      title: {
        //配置标题组件
        text: this.titleText || "",
        x: "center",
        y: "88%",
        show: true, //设置是否显示标题，默认true
        //设置相对于仪表盘中心的偏移位置
        //数组第一项是水平方向的偏移，第二项是垂直方向的偏移
        offsetCenter: [50, "100%"],
        textStyle: {
          fontFamily: "黑体", //设置字体名称，默认宋体
          color: "black", //设置字体颜色，默认#333
          fontSize: 20, //设置字体大小，默认15
        },
      },
      series: [
        {
          type: "gauge",
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 15,
              color: [
                [0.25, "#FF0000"],
                [0.75, "#FFD700"],
                [1, "#1E90FF"],
              ],
            },
          },
          pointer: {
            //指针
            itemStyle: {
              color: "#778899",
            },
            icon: "triangle",
            length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
            width: 10, // 指针宽度,默认 8。
          },
          axisTick: {
            //刻度线
            show: false,
            // distance: -30,
            // length: 2,
            // lineStyle: {
            //   color: "#fff",
            //   width: 1,
            // },
          },
          splitLine: {
            distance: -30,
            length: 15,
            lineStyle: {
              color: "#fff",
              width: 2,
            },
          },
          axisLabel: {
            //'仪表盘数字刻度'
            color: "#CCCCCC",
            distance: 12,
            fontSize: 10,
          },
          detail: {
            //设置仪表盘详情，用于显示数据
            valueAnimation: true,
            fontSize: 30,
            offsetCenter: [0, "80%"], //设置相对于仪表盘中心的偏移位置
            formatter: "{value} %",
            color: "black",
            formatter: function(value) {
              //圆心处 描述文字 格式
              return value + "%\n" + "\n" + "{unit|1,000,000}";
            },
            rich: {
              value: {
                fontSize: 50,
                fontWeight: "bolder",
                color: "#777",
              },
              unit: {
                fontSize: 20,
                color: "#ff0000",
                padding: [0, 0, -20, 10],
              },
            },
          },

          data: [
            {
              name: "完成率",
              value: this.value || 0,
              itemStyle: { color: "#778899" }, //指针颜色
            },
          ],
        },
      ],
    };
    // setInterval(function() {
    //   myChart.setOption({
    //     series: [
    //       {
    //         data: [
    //           {
    //             value: +(Math.random() * 100).toFixed(2),
    //           },
    //         ],
    //       },
    //     ],
    //   });
    // }, 2000);

    option && myChart.setOption(option);
  },
};
</script>

<style></style>