Echarts 计算每份占比（等分）

最新推荐文章于 2023-12-02 11:30:00 发布

gaolei_eit

最新推荐文章于 2023-12-02 11:30:00 发布

阅读量874

点赞数

分类专栏： Echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_39428080/article/details/121107359

版权

Echarts 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

const doDashboard = (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: 15,
            color: [
              [0.3, "#91BB7E"],
              [0.7, "#F7DD6F"],
              [1, "#D66474"]
            ]
          }
        },
        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 75 + "%";
            } else if (value === 70) {
              return 85 + "%";
            } else {
              return "";
            }
          },
        },
        detail: {
          fontSize: 20,
          valueAnimation: true,
          color: "auto",
          show: true,
          offsetCenter: [0, -30],
          formatter: function () {
            return dashboardData.valueNumber + "%";
          }
        },
        data: [
          {
            value: doDashboard(dashboardData.valueNumber),
            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);