echarts仪表盘自定义刻度

// 计算仪表盘 需要计算真实占比
const doDashboardData = (val: any) => {
  if (val >= 0 && val < 75) {
    return val * 30 / 75
  } else if (val >= 75 && val <= 85) {
    return 30 + (val - 75) * 40 / 10
  } else {
    return 70 + (val - 85) * 30 / 15
  }
}


option = {
    series: [
      {
        type: "gauge",
        startAngle: 190,
        endAngle: -10,
        min: 0,
        max: 100,
        axisLine: {
          lineStyle: {
            width: 12,
            color: [
              [0.3, "#D66474"],
              [0.7, "#F7DD6F"],
              [1, "#91BB7E"]
            ]
          }
        },
        pointer: {
          //指针
          icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
          length: "60%", //指针长度
          width: 5,
          offsetCenter: [0, "-60%"],
          itemStyle: {
            color: "auto"
          }
        },
        axisTick: {
          show: false,
          distance: -30,
          length: 8,
          lineStyle: {
            color: "#fff",
            width: 2
          }
        },
        splitLine: {
          show: false,
          distance: -20,
          lineStyle: {
            color: "#fff",
            width: 4
          }
        },
        axisLabel: {
          distance: 30,
          fontSize: 12,
          formatter: function (value: any) {
            if (value === 30) {
              return dashboardData.lowerThresholdNumber + dashboardData.unit;
            } else if (value === 70) {
              return dashboardData.upperThresholdNumber + dashboardData.unit;
            } else {
              return "";
            }
          }
        },
        detail: {
          fontSize: 20,
          valueAnimation: true,
          color: "auto",
          show: true,
          offsetCenter: [0, -30],
          formatter: function () {
            return dashboardData.valueNumber + dashboardData.unit;
          }
        },
        data: [
          {
            value: doDashboardData(dashboardData.valueNumber) as any,
            name: dashboardData.title,
            title: {
              lineHeight: 20,
              offsetCenter: [0, 0],
              fontSize: 12
            }
          }
        ]
      }
    ]
  };
  var chartDom = document.getElementById("main") as HTMLElement;
  var myChart = echarts.init(chartDom);
  option && myChart.setOption(option);

你可能感兴趣的:(Echarts,echarts)