效果图
主要调整了如下几个方面：
- 颜色渐变；
- 不显示刻度；
- 指针使用SVG；
- 仪表盘整体位置下移；
- 两端显示成圆形；
- 开始角度、结束角色调整；
- 不显示详情；
完整代码
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="width: 130px;height: 130px;"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
series: [
{
type: 'gauge',
// 开始角度
startAngle: 180,
// 结束角度
endAngle: 0,
// 半径
radius: 65,
// 位置下移
center: ['50%', '70%'],
axisLine: {
lineStyle: {
// 仪表盘宽度
width: 10,
// 颜色渐变
color: [
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#FEAD54'
},
{
offset: 0.5,
color: '#2ED8CE'
},
{
offset: 1,
color: '#E94F4F'
}
])
]
]
},
// 两端显示成圆形
roundCap: true
},
// 指针
pointer: {
itemStyle: {
color: '#43B3BE'
},
icon: 'path://M39.66,80a17,17,0,0,1-2-.14h0A19.74,19.74,0,0,1,23.82,72a18.45,18.45,0,0,1,.44-23,19.07,19.07,0,0,1,6.59-5.17.6.6,0,0,0,.39-.52c.89-5.67,1.8-11.33,2.69-17q1.14-7.18,2.27-14.38c.52-3.32,1-6.63,1.58-9.95A2.22,2.22,0,0,1,39.57,0a2.15,2.15,0,0,1,2.3,1,4.85,4.85,0,0,1,.44,1.52q1,6.2,2,12.4.93,5.86,1.85,11.73T48,38.37c.27,1.66.53,3.32.81,5a.59.59,0,0,0,.29.4,19.38,19.38,0,0,1,7.66,6.54,18.46,18.46,0,0,1,1.38,18.57,19.27,19.27,0,0,1-7.07,7.92,20.81,20.81,0,0,1-8.2,3l-.71.1a14.7,14.7,0,0,1-1.63.09Z',
// 指针宽度
width: '20',
// 指针高度
length: '40'
},
// 隐藏分隔线
splitLine: {
show: false
},
// 隐藏刻度
axisTick: {
show: false
},
// 隐藏刻度
axisLabel: {
show: false
},
// 隐藏详情
detail: {
show: false
},
data: [
{
value: 50
}
]
}
]
};
setInterval(function () {
myChart.setOption({
series: [
{
data: [
{
value: +(Math.random() * 100).toFixed(2)
}
]
}
]
});
}, 2000);
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
