echarts 儀表盤漸變問題

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰

問題：

echarts儀表盤下半圓隱約存在

緣由：

目前設置的axisLine.lineStyle.color，不是隻是分段顏色設置，爲了漸變銜接的效果，有一部分點是疊加了兩層顏色設置。

先全長度鋪了一層綠色，從左往右透明度下降；再從0.8的位置到結束，鋪了一層黃色，從左往右透明度升高。

大體的axisLine.lineStyle.color數組設置以下：

axisLine.lineStyle.color =
[
	[
		0,
		"rgba(255,255,255,0.2)"
	],
	......
	[
		0.9975,
		"rgba(0, 255, 0,0.005)"
	],
	[
		0.8,
		"rgba(255, 255, 0,0.01)"
	],
	......
	[
		0.998,
		"rgba(255, 255, 0,1)"
	],
	[
		1,
		"rgb(255,0,0)"
	]
]
複製代碼

這樣能夠作出天然的過分，可是仔細查看，echarts儀表盤下半圓隱約存在。

解決辦法：

PS：可直接跳到最後，看第6個解決方案：「六、完美的echarts儀表盤漸變設置方案」

一、對color數組排序

axisLine.lineStyle.color =
[
	[
		0,
		"rgba(255,255,255,0.2)"
	],
	......
	[
		0.8,
		"rgba(255, 255, 0,0.01)"
	],
	......
	[
		0.9975,
		"rgba(0, 255, 0,0.005)"
	],
	......
	[
		0.998,
		"rgba(255, 255, 0,1)"
	],
	[
		1,
		"rgb(255,0,0)"
	]
]
複製代碼

現象：

echarts儀表盤下半圓消失，可是過分明顯不天然，出現條紋。

二、排序後去重

緣由：

由於有像0.96這類點有兩個顏色設置，去重操做，留下第一個或者第二個。

現象：

echarts儀表盤下半圓消失，可是過分明顯不天然，仍然出現條紋。 因而想到第三個方法，重複點不能直接去掉而是取中間值。

三、重複點取顏色中間值

const uniqueArr = (oldArr) => {
  let newArray = []
  for (let i = 0; i < oldArr.length; i++) {
    if (i > 0) {
      if (oldArr[i][0] !== oldArr[i - 1][0]) {
        newArray.push(oldArr[i])
      } else {
        let co1 = newArray[newArray.length - 1][1]
        let co2 = oldArr[i][1]
        let aaa = co1.split(',')[3].replace(')', '')
        let bbb = co2.split(',')[3].replace(')', '')
        let opacity = (parseFloat(aaa) + parseFloat(bbb)) / 2
        newArray[newArray.length - 1][1] = 'rgba(128, 255, 0, ' + opacity + ')'
      }
    }
  }
  return newArray
}
複製代碼

現象：

echarts儀表盤下半圓消失，可是過分明顯不天然，仍然出現條紋。

四、不進行顏色疊加

現象：

echarts儀表盤下半圓消失，可是過分明顯不天然。

五、用axisTick.lineStyle.color.image屬性設置漸變刻度。

此方法用刻度當調圖，沒法再設置座標軸線樣式axisLine.lineStyle.color，由於已被覆蓋。

<img src="/static/aaa.png" id="bg_img" style="display:none"/>
注意：確保img節點已掛載
axisTick: {
	show: true,
	length: 30,
	splitNumber: 100,
	lineStyle: {
	  color: {
		image: document.getElementById('bg_img'),
		repeat: 'no-repeat'
	  },
	  width: 3
	}
},
複製代碼

現象：

echarts儀表盤下半圓消失，過分很天然，可是沒法再設置座標軸線樣式，沒法動態置灰某段值，且指針不能隨當前座標軸點顏色改變而改變。

六、完美的echarts儀表盤漸變設置方案

使用series便可！！！

每一個series的樣式如出一轍，值也同樣，能不顯示就不顯示，可是顏色axisLine.lineStyle.color必須設置不同，每個series設置一個單獨的從頭至尾的漸變便可。

注意：

雖然多個series只是爲了疊加顏色，可是必須充填數據項和值，否則提示框組件tooltip、指針顯示不一樣步，打不到疊加顏色的指針效果。