echarts官方示例和默认样式都比较难看，经过一顿捣鼓实现比较漂亮的渐变仪表盘。
第一步：设置轴线
将图表轴线、label、分割线、隐藏，只保留刻度，然后修改刻度样式达到最终效果。不过要注意的是axisLine不能简单的设置show:false，还要设置opacity才能彻底隐藏底色。看看效果和代码如下：
series: [
{
type: 'gauge',
radius: '90%',
axisLine: {
show: false,
lineStyle: {
3,
opacity: 0
}
},
title: { show: false },
detail: { show: false },
splitLine: { show: false },
axisTick: {
length: 20,
splitNumber: 7,
lineStyle: {
color: '#52B8DF',
3
}
},
axisLabel: { show: false },
pointer: { show: false },
itemStyle: {},
data: [
{
value: 20,
name: 'test gauge'
}
]
}
]
第一步效果
第二步：设置背景
因为这是个弧形的渐变，所以echarts自带的球形和线形渐变填充都不符合，只能在PS中绘制一个如下图正方形的渐变背景，将图片作为背景颜色填充到刻度上。
Photoshop绘背景
echarts的背景图片必须是一个dom节点，而不是图片的url。所以先需要引入图片到HTML文档上。然后 display:none 将其隐藏。
<img src="bg.png" id="bg_img" style="display:none" />
刻度线配置：
axisTick: {
length: 20,
splitNumber: 7,
lineStyle: {
color: {
image: document.getElementById('bg_img'),
repeat: 'no-repeat'
},
3
}
}
第二部效果，看起来还不错。
第三步：计算角度
增加一个仪表盘，两个仪表盘重叠拼成一个，通过startAngle 、 endAngle、pointerAngle配置控制角度，一个表示”已完成“部分，一个标识”未完成“部分，再计算刻度数量。
第四步：增加指示刻度
再增加一个仪表盘，将仪表盘开始结束角度都设置成计算后的 pointerAngle ，这样只会有一个刻度，调整仪表盘大小和刻度长度，差不多完美了.
第五步：增加内圈
内圈依旧是图片，通过markPoint引入，设置好大小，中心即可，最终效果如图。
var value = 0.8, // 值，0~1之间
startAngle = 215, // 开始角度
endAngle = -35, // 结束角度
splitCount = 60, // 刻度数量
pointerAngle = (startAngle - endAngle) * (1 - value) + endAngle; // 当前指针（值）角度
var myChart = echarts.init(document.getElementById('sample'));
var option = {
series: [
{
type: 'gauge',
radius: '90%',
startAngle: pointerAngle,
endAngle: endAngle,
splitNumber: 1,
axisLine: {
show: false,
lineStyle: {
3,
opacity: 0
}
},
title: { show: false },
detail: { show: false },
splitLine: { show: false },
axisTick: {
length: 27,
splitNumber: Math.ceil((1 - value) * splitCount),
lineStyle: {
color: '#001242',
3
}
},
axisLabel: { show: false },
pointer: { show: false },
itemStyle: {},
markPoint: {
animation: false,
silent: false,
data: [
{
symbol: 'image://' + document.getElementById('round1').src,
x: '50%',
y: '50%',
symbolSize: 280,
itemStyle: {
borderWidth: 3
}
},
{
symbol: 'circle',
symbolSize: 200
}
]
},
data: [
{
value: value,
name: 'test gauge'
}
]
},
{
type: 'gauge',
radius: '90%',
startAngle: startAngle,
endAngle: pointerAngle,
splitNumber: 1,
axisLine: {
show: false,
lineStyle: {
3,
opacity: 0
}
},
title: { show: false },
detail: { show: false },
splitLine: { show: false },
axisTick: {
length: 27,
splitNumber: Math.ceil(value * splitCount),
lineStyle: {
color: {
image: document.getElementById('bg_img'),
repeat: 'no-repeat'
},
3
}
},
axisLabel: { show: false },
pointer: { show: false },
itemStyle: {},
data: [
{
value: value,
name: 'test gauge'
}
]
},
{
type: 'gauge',
radius: '95%',
startAngle: pointerAngle,
endAngle: pointerAngle,
splitNumber: 1,
axisLine: {
show: false,
lineStyle: {
3,
opacity: 0
}
},
title: { show: false },
detail: { show: false },
splitLine: { show: false },
axisTick: {
length: 20,
splitNumber: 1,
lineStyle: {
color: {
image: document.getElementById('bg_img'),
repeat: 'no-repeat'
},
3
}
},
axisLabel: { show: false },
pointer: { show: false },
itemStyle: {},
data: [
{
value: value,
name: 'test gauge'
}
]
}
]
};
myChart.setOption(option);
最终效果……
注意
如连续刷新出现重影 重叠时，再setOption前 先调用 chart.clear();
示例代码：vaynewang/SampleCode
使用echarts绘制漂亮的渐变键盘仪表盘 - vaynewang的文章 - 知乎 https://zhuanlan.zhihu.com/p/54542421