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、指针显示不一样步，打不到叠加颜色的指针效果。