这是我参与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个解决方案：“6、完美的echarts仪表盘渐变设置方案”

1、对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仪表盘下半圆消失，但是过度明显不自然，出现条纹。

2、排序后去重

原因：

因为有像0.96这类点有两个颜色设置，去重操作，留下第一个或者第二个。

现象：

echarts仪表盘下半圆消失，但是过度明显不自然，仍然出现条纹。 于是想到第三个方法，重复点不能直接去掉而是取中间值。

3、重复点取颜色中间值

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仪表盘下半圆消失，但是过度明显不自然，仍然出现条纹。

4、不进行颜色叠加

现象：

echarts仪表盘下半圆消失，但是过度明显不自然。

5、用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仪表盘下半圆消失，过度很自然，但是无法再设置坐标轴线样式，无法动态置灰某段值，且指针不能随当前坐标轴点颜色改变而改变。

6、完美的echarts仪表盘渐变设置方案

使用series即可！！！

每个series的样式一模一样，值也一样，能不显示就不显示，但是颜色axisLine.lineStyle.color必须设置不一样，每一个series设置一个单独的从头到尾的渐变即可。

注意：

虽然多个series只是为了叠加颜色，但是必须充填数据项和值，不然提示框组件tooltip、指针显示不同步，打不到叠加颜色的指针效果。