效果圖
主要調(diào)整了如下幾個方面：
- 顏色漸變；
- 不顯示刻度；
- 指針使用SVG；
- 儀表盤整體位置下移；
- 兩端顯示成圓形；
- 開始角度、結(jié)束角色調(diào)整；
- 不顯示詳情；
完整代碼
<!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,
// 結(jié)束角度
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>
好了，這篇文章的內(nèi)容發(fā)貨聯(lián)盟就和大家分享到這里，如果大家網(wǎng)絡推廣引流創(chuàng)業(yè)感興趣，可以添加微信：80709525 備注：發(fā)貨聯(lián)盟引流學習； 我拉你進直播課程學習群，每周135晚上都是有實戰(zhàn)干貨的推廣引流技術(shù)課程免費分享！
