echarts 节点（gauge）图的使用

1.导入

import * as echarts from "echarts";

使用

 var myChart = echarts.init(document.getElementById("scm")); // scm 是id
 var color1 = [
      [0.23, "rgba(76, 177, 249,1)"],
      [0.76, "rgba(39, 228, 159,1)"],
      [1, "rgba(76, 177, 249,1)"],
    ];  // 颜色渐变
 var values = 6;   // 显示的值
 myChart.setOption({
	series: [
        {
          center: ["50%", "70%"],
          name: "",
          type: "gauge", // 节点
          min: 0, // 最小节点
          max: 6, // 最大节点
          radius: "80%", // 仪表大小
          startAngle: 180, // 仪表盘起始角度。
          endAngle: 0, // 仪表盘结束角度。
          splitNumber: 6, // 分成几份
          axisLine: {
            // 轮廓颜色
            lineStyle: {
              width: 2, // 半径
              color: color1,
            },
          },
          axisLabel: {
            distance: 0,
            color: "#000",
            formatter: function (v) {
              switch (v + "") {
                case "0":
                  return;
                case "1":
                  return "1";
                case "2":
                  return;
                case "3":
                  return "2";
                case "4":
                  return;
                case "5":
                  return "3";
              }
            },
          },
          axisTick: {
            length: 3, // 中间插格长度
            splitNumber: 1, // 分隔线之间分割的刻度数
            distance: 0,
            lineStyle: {
              color: "#82b9d9",
            },
          },
          splitLine: {
            length: 0,
            lineStyle: {
              color: "#82b9d9",
            },
          },
          title: {
            // 字体样式
            show: false,
          },
          pointer: {
            // 指针长短
            show: true,
            length: "50%",
            width: 4,
          },
          detail: {
            show: false, // 是否显示
            color: "#000",
            // offsetCenter: ["100%", "0%"], // 偏移位置
            formatter: "{value}",
          },
          data: [
            {
              value: values, // values 是数据
            },
          ],
        },
	})