echarts y轴刻度间隔_使用echarts绘制漂亮的渐变键盘仪表盘

echarts官方示例和默认样式都比较难看，经过一顿捣鼓实现比较漂亮的渐变仪表盘。

---

第一步：设置轴线

将图表轴线、label、分割线、隐藏，只保留刻度，然后修改刻度样式达到最终效果。不过要注意的是axisLine不能简单的设置show:false，还要设置opacity才能彻底隐藏底色。看看效果和代码如下：

series

第一步效果

第二步：设置背景

因为这是个弧形的渐变，所以echarts自带的球形和线形渐变填充都不符合，只能在PS中绘制一个如下图正方形的渐变背景，将图片作为背景颜色填充到刻度上。

Photoshop绘背景

echarts的背景图片必须是一个dom节点，而不是图片的url。所以先需要引入图片到HTML文档上。然后 display:none 将其隐藏。

<

刻度线配置：

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

第二部效果，看起来还不错。

第三步：计算角度

增加一个仪表盘，两个仪表盘重叠拼成一个，通过startAngle 、 endAngle、pointerAngle配置控制角度，一个表示”已完成“部分，一个标识”未完成“部分，再计算刻度数量。

var 

第四步：增加指示刻度

再增加一个仪表盘，将仪表盘开始结束角度都设置成计算后的 pointerAngle ，这样只会有一个刻度，调整仪表盘大小和刻度长度，差不多完美了。

var 

第五步：增加内圈

内圈依旧是图片，通过markPoint引入，设置好大小，中心即可，最终效果如图。

最终效果……

---

注意

如连续刷新出现重影 重叠时，再setOption前 先调用 chart.clear();

code：vaynewang/SampleCode

---

请忽略我……