echart仪表盘旋转_使用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'

}

]

}

]

第一步效果

第二步：设置背景

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

Photoshop绘背景

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

刻度线配置：

axisTick: {

length: 20,

splitNumber: 7,

lineS