使用Echarts3实现渐变仪表盘需求

项目过程中遇到一个这样的需求:

这明显是一个仪表盘类型的图表，打开echarts的官方文档，可以看到有一个默认的实现，如下：

使用了默认的参数

分析需求后，我们从以下几个方面入手

从第一张图我们可以看出，需求中的轴线不是连续的，而是被分割成了一个个的长条形状。

从官方示例来看，轴线被白色的刻度分成了很多小段，如果刻度的宽度变大，刻度变密集的话是可以达到我们想要的效果的

经过这样修改的话，确实初步达到了我们要的效果。

但是仔细看的话，会发现一个问题，指针的指向是空白处。原因就是空白的地方是刻度，而有颜色的地方是轴线。这样的话最终指针指向的数据是不准确的，而且这个方案还有一个问题就是渐变颜色的处理。

官方提供的接口是分段颜色，想要做成渐变还不是很好处理。

接下来呢，考虑第二种实现方式

首先，轴线肯定是连续的，那我先把轴线隐藏掉，然后刻度加粗，拉长

可以看到效果有了，而且指针位置正确。

需求中轴线的颜色是渐变的，但是文档中给定的接口是分段式的颜色，没有办法使用，再者轴线透明度已经被设置为0了。

所以只能从刻度的颜色入手。

官方文档中，刻度的颜色是如下这样的：

默认支持两种渐变，线性和径向渐变，从效果上看都不符合我们的要求：线性是直线方向的渐变，而径向渐变是由内而外的。即使可以勉强实现，效果肯定不好。所以可以尝试一下使用图片纹理。

首先用PS画一个和画布一样大小的渐图案

在配置中使用image选项

这样项目中的需求就可以完美解决了

颜色渐变完成了，看一下效果的话，会发现有一个明显的问题。需求中指针指向的位置之前的刻度是有渐变颜色的，后面一段则都是灰色。而我们现在仪表盘无论指向哪里，刻度都是有颜色的。

在解决这个问题的过程中，想了很多方案，使用遮罩、修改渐变图片等等，都不能很好的解决问题。最后突然想起来一个配置项中可以使用多个仪表盘的，我只要在数据前半段使用带渐变色的仪表盘，后半段全部用灰色的仪表盘补充，这样就可以解决问题。

这里还需要注意以下两点：

代码如下：

效果如下：

最后，我们需要做的就是把指针改为需求中的样子，本来我以为这个应该是最简单的部分，看完官方文档后发现并没有修改指针的接口。

如上，指针配置项应该是没有办法实现类似刻度的样子。

目前还在实验中，考虑使用markline画一条指针，是否可行还有待验证。