echart 之儀表盤 動態分段顏色實現

直接切入

需求

上圖(已實現的）

 

 

 重點：

1、三段顏色，小於34% 藍色， 34%-67% 黃色，大於67% 橙色

2、數值到達地方才顯示顏色，顏色是動態的

區別於這種固定三種顏色  

 

 

這種實現比較簡單，隨便貼一下

 lineStyle: {
                color: [
                  [0, '#2CFAFC'],
                  [0.33, '#4BAEFD'],
                  [0.67, '#FFE24D'],
                  [0.99, '#F85C1D'],
                  [1, '#0b275B'] // 底色
                ],
}   

 

 

核心代碼實現如下，實現原理還是在實現三種顏色基礎上，根據數據判斷是否到達分割點，否則給底色

// that.value 是data里面的數據

lineStyle: {
                color: [
                  [0, '#2CFAFC'],
                  [that.value < 34 ? that.value / 100 : 0.33, '#4BAEFD'],
                  [that.value > 34 && that.value < 67 ? that.value / 100 : 0.67, that.value > 34 ? '#FFE24D' : '#0b275B'],
                  [that.value > 67 ? that.value / 100 : 0.99, that.value > 67 ? '#F85C1D' : '#0b275B'],
                  [1, '#0b275B'] // 底色
                ],
}

 

-----------------------------------------end-------------

series的儀表盤代碼，本地是封裝的，切勿整段復制

 {
            name: '進度條',
            type: 'gauge',
            center: ['50%', '50%'],
            radius: '90%',
            z: 10,
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0, '#2CFAFC'],// [0.33, '#4BAEFD'],
                  // [0.67, '#FFE24D'],
                  // [0.99, '#F85C1D'],
                  [that.value < 34 ? that.value / 100 : 0.33, '#4BAEFD'],
                  [that.value > 34 && that.value < 67 ? that.value / 100 : 0.67, that.value > 34 ? '#FFE24D' : '#0b275B'],
                  [that.value > 67 ? that.value / 100 : 0.99, that.value > 67 ? '#F85C1D' : '#0b275B'],
                  [1, '#0b275B']
                ],
                width: px2px(8)
              }
            },
            detail: {
              offsetCenter: ['10%', '80%'],
              fontSize: px2px(24),
              lineHeight: px2px(12),
              x: 'center',
              y: 'center',
              width: px2px(60),
              height: px2px(60),
              formatter: (value) => {
                return `{valueStyle|${value}}{unitStyle|%}`
              },
              rich: {
                valueStyle: {
                  color: '#fff',
                  fontSize: px2px(24)
                },
                unitStyle: {
                  color: '#fff',
                  padding: [0, 0, 10, 0],
                  fontSize: px2px(11)
                }
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            // itemStyle: {
            //   color: '#ccc'
            // },
            label: {
              show: false
            },
            pointer: {
              show: true,
              length: '45%',
              radius: '80%',
              width: px2px(5), // 指針粗細
              itemStyle: {
                color: 'red'
              }
            },
            data: [that.value]
          }