使用echarts繪制漂亮的漸變鍵盤儀表盤

 

echarts官方示例和默認樣式都比較難看，經過一頓搗鼓實現比較漂亮的漸變儀表盤。

 

---

第一步：設置軸線

將圖表軸線、label、分割線、隱藏，只保留刻度，然后修改刻度樣式達到最終效果。不過要注意的是axisLine不能簡單的設置show:false，還要設置opacity才能徹底隱藏底色。看看效果和代碼如下：

series: [
          {
            type: 'gauge',
            radius: '90%',
            axisLine: {
              show: false,
              lineStyle: {
                width: 3,
                opacity: 0
              }
            },
            title: { show: false },
            detail: { show: false },
            splitLine: { show: false },
            axisTick: {
              length: 20,
              splitNumber: 7,
              lineStyle: {
                color: '#52B8DF',
                width: 3
              }
            },
            axisLabel: { show: false },
            pointer: { show: false },
            itemStyle: {},
            data: [
              {
                value: 20,
                name: 'test gauge'
              }
            ]
          }
        ]

　　

第一步效果

第二步：設置背景

因為這是個弧形的漸變，所以echarts自帶的球形和線形漸變填充都不符合，只能在PS中繪制一個如下圖正方形的漸變背景，將圖片作為背景顏色填充到刻度上。

 

Photoshop繪背景

echarts的背景圖片必須是一個dom節點，而不是圖片的url。所以先需要引入圖片到HTML文檔上。然后 display:none 將其隱藏。

<img src="bg.png" id="bg_img" style="display:none" />

　　

刻度線配置：

    axisTick: {
              length: 20,
              splitNumber: 7,
              lineStyle: {
                color: {
                  image: document.getElementById('bg_img'),
                  repeat: 'no-repeat'
                },
                width: 3
              }
            }

　　

第二部效果，看起來還不錯。

第三步：計算角度

增加一個儀表盤，兩個儀表盤重疊拼成一個，通過startAngle 、 endAngle、pointerAngle配置控制角度，一個表示”已完成“部分，一個標識”未完成“部分，再計算刻度數量。

 

第四步：增加指示刻度

再增加一個儀表盤，將儀表盤開始結束角度都設置成計算后的 pointerAngle ，這樣只會有一個刻度，調整儀表盤大小和刻度長度，差不多完美了.

 

第五步：增加內圈

內圈依舊是圖片，通過markPoint引入，設置好大小，中心即可，最終效果如圖。

     var value = 0.8, // 值，0~1之間
        startAngle = 215, // 開始角度
        endAngle = -35, // 結束角度
        splitCount = 60, // 刻度數量
        pointerAngle = (startAngle - endAngle) * (1 - value) + endAngle; // 當前指針（值）角度
      var myChart = echarts.init(document.getElementById('sample'));
      var option = {
        series: [
          {
            type: 'gauge',
            radius: '90%',
            startAngle: pointerAngle,
            endAngle: endAngle,
            splitNumber: 1,
            axisLine: {
              show: false,
              lineStyle: {
                width: 3,
                opacity: 0
              }
            },
            title: { show: false },
            detail: { show: false },
            splitLine: { show: false },
            axisTick: {
              length: 27,
              splitNumber: Math.ceil((1 - value) * splitCount),
              lineStyle: {
                color: '#001242',
                width: 3
              }
            },
            axisLabel: { show: false },
            pointer: { show: false },
            itemStyle: {},
            markPoint: {
              animation: false,
              silent: false,
              data: [
                {
                  symbol: 'image://' + document.getElementById('round1').src,
                  x: '50%',
                  y: '50%',
                  symbolSize: 280,
                  itemStyle: {
                    borderWidth: 3
                  }
                },
                {
                  symbol: 'circle',
                  symbolSize: 200
                }
              ]
            },
            data: [
              {
                value: value,
                name: 'test gauge'
              }
            ]
          },
          {
            type: 'gauge',
            radius: '90%',
            startAngle: startAngle,
            endAngle: pointerAngle,
            splitNumber: 1,
            axisLine: {
              show: false,
              lineStyle: {
                width: 3,
                opacity: 0
              }
            },
            title: { show: false },
            detail: { show: false },
            splitLine: { show: false },
            axisTick: {
              length: 27,
              splitNumber: Math.ceil(value * splitCount),
              lineStyle: {
                color: {
                  image: document.getElementById('bg_img'),
                  repeat: 'no-repeat'
                },
                width: 3
              }
            },
            axisLabel: { show: false },
            pointer: { show: false },
            itemStyle: {},
            data: [
              {
                value: value,
                name: 'test gauge'
              }
            ]
          },
          {
            type: 'gauge',
            radius: '95%',
            startAngle: pointerAngle,
            endAngle: pointerAngle,
            splitNumber: 1,
            axisLine: {
              show: false,
              lineStyle: {
                width: 3,
                opacity: 0
              }
            },
            title: { show: false },
            detail: { show: false },
            splitLine: { show: false },
            axisTick: {
              length: 20,
              splitNumber: 1,
              lineStyle: {
                color: {
                  image: document.getElementById('bg_img'),
                  repeat: 'no-repeat'
                },
                width: 3
              }
            },
            axisLabel: { show: false },
            pointer: { show: false },
            itemStyle: {},
            data: [
              {
                value: value,
                name: 'test gauge'
              }
            ]
          }
        ]
      };
      myChart.setOption(option);

　　

最終效果……

---

注意

如連續刷新出現重影 重疊時，再setOption前 先調用 chart.clear();

 

 

 

 

示例代碼：vaynewang/SampleCode

 

使用echarts繪制漂亮的漸變鍵盤儀表盤 - vaynewang的文章 - 知乎 https://zhuanlan.zhihu.com/p/54542421