使用echarts绘制漂亮的渐变键盘仪表盘

 

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

 

---

第一步：设置轴线

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

series: [
          {
            type: 'gauge',
            radius: '90%',
            axisLine: {
              show: false,
              lineStyle: {
                width: 3,
                opacity: 0
              }
            },
            title: { show: false },
            detail: { show: false },
            splitLine: { show: false },
            axisTick: {
              length: 20,
              splitNumber: 7,
              lineStyle: {
                color: '#52B8DF',
                width: 3
              }
            },
            axisLabel: { show: false },
            pointer: { show: false },
            itemStyle: {},
            data: [
              {
                value: 20,
                name: 'test gauge'
              }
            ]
          }
        ]

　　

第一步效果

第二步：设置背景

因为这是个弧形的渐变，所以e