Echarts 计算每份占比（等分）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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);