Echarts实现3D环状图效果（非3d）
如题
想要实现的效果：
在这里插入图片描述
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"
></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="main" style="width: 600px; height: 400px"></div>
<script>
var myChart = echarts.init(document.getElementById('main'))
var option = {
tooltip: {
trigger: 'item',
},
legend: {
top: '5%',
left: 'center',
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['30%', '50%'],
center: ['50%', '38%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' },
],
},
{
name: '阴影',
type: 'pie',
radius: ['30%', '37%'], // 调节环的内半径 外半径
center: ['50%', '38%'], // 注意 ：这里要与上面外环一致哦
label: {
show: false,
position: 'inside',
},
z: 2, // 层级要高
data: [
{
value: 9,
name: '',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0.1)',
},
},
},
],
},
],
}
myChart.setOption(option)
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-10-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
