效果图：
image.png
核心代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<title>圆环</title>
<script src="https://lib.baomitu.com/echarts/5.3.2-rc.1/echarts.common.js"></script>
</head>
<body>
<div id="main"></div>
<div class="title">50%</div>
<script type="text/javascript">
// 基于准备好的dom，初始化 echarts 实例
let myChart = echarts.init(document.getElementById('main'));
option = {
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
// series 渲染的图表，可以配置多个
series: [{
name: "Access From",
// type:每个图标类型， pie，圆环
type: "pie",
radius: ["40%", "55%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
// 鼠标悬浮高亮显示
emphasis: {
label: {
show: true,
fontSize: "40",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
// data,配置每项数据
data: [{
value: 100,
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 255, 229, 0.5)',
shadowOffsetY: 5,
shadowOffsetX: 6,
color: {
colorStops: [{
offset: 0,
color: 'rgba(1,66,178,0.2)'
}, {
offset: 1,
color: 'rgba(0, 255, 229, 1)'
}]
}
},
}, {
value: 100,
itemStyle: {
color: "rgba(0, 255, 229, 0.1)",
},
}, {
value: 200,
itemStyle: {
color: "transparent",
},
}, ],
}, ],
}
myChart.setOption(option)
</script>
</body>
</html>
