<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆环表盘</title>
</head>
<style>
body {
background-color: #000;
}
</style>
<body>
<div style="width: 100%;height: 100%;margin: 0;">
<div class="div2" style="position: fixed;left: 1005px;top: 0px;bottom: 10;right: 0;">
<div style="width: 400px;height:30px;background-color: #021633;text-align: center;font-size: 24px;color: #FFF;">
<span class="skas-char-div-titil">機故率</span>
</div>
<div id="main" style="width: 400px;height:200px;background-color: #021633;"></div>
</div>
</div>
</body>
<script src="js/echarts.js"></script>
<script> //设备状态圆环
var myChart = echarts.init(document.getElementById('main'));
var option2 = {
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [{
type: 'gauge',
startAngle: 90,
endAngle: -270,
radius:'50',
progress: {
show: true,
width: 8,
itemStyle:{
color:'#83FF00',
}
},
pointer:{
show:false,
},
axisLine: {
lineStyle: {
width: 8,
// color:red
},
},
axisTick: {
show: false
},
splitLine: {
show: false,
length: 15,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
show: false,
distance: 25,
color: '#999',
fontSize: 20
},
/*anchor: {
show: true,
showAbove: true,
size: 25,
itemStyle: {
borderWidth: 10
}
},*/
title: {
show: false
},
detail: {
valueAnimation: true,
offsetCenter: [0, 0],
formatter: '{value}%',
textStyle:{
color:'#61FC07',
fontSize: 20
}
},
data: [{
value: (2 /4)*100
}]
}]
};
myChart.setOption(option2);
</script>
</html>
完全在自行摸索,各位大佬帮忙解答下，谢谢 用的 HBuilder X 3.1.4
想要的效果有吗。可以去echarts找找https://www.makeapie.com/explore.html