![28e2db2b1a7a4962f15300541fcd8c62.png](https://i-blog.csdnimg.cn/blog_migrate/461e3ea08c49fef97cb4d4a37ecfc323.jpeg)
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'
}
]
}
]
![c89935c7343e5c0764035ebd0ac81961.png](https://i-blog.csdnimg.cn/blog_migrate/0b95841de7e1e53fc8f2f1eb97f82dc0.jpeg)
第二步:设置背景
因为这是个弧形的渐变,所以echarts自带的球形和线形渐变填充都不符合,