用Echarts绘制饼状图

本文介绍了如何使用Echarts在项目中绘制饼状图,并展示了尝试复现某一特定效果的过程,虽然未能完全一致,但实现了鼠标悬停显示百分比的功能。同时提到了南丁格尔图,它通过扇形半径展示百分比,但在视觉上可能对差异大的数据项呈现不均衡。代码已附上。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在项目网站的网页中,有这样一幅图:

心血来潮,想使用百度Echarts来绘制一下,可是没能绘制得完全一样,Echarts饼状图的label不能在图形下面放成一行,最后的效果是这样子的:

鼠标移动到items上,可动态显示百分比:

另外,还了解到了一种特殊的饼状图:南丁格尔图,就是用扇形半径的大小来表示百分比,对于相差比较大的items,看起来会有些不平衡;

最后,上代码:

1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>饼状图练习</title>
 6     <style>
 7         #pic1{
 8             width:400px;
 9             height:400px;
10             margin: 20px auto;
11         }
12     </style>
13     <script src="js/echarts.common.min.js"></script>
14 </head>
15 <body>
16     <div id="pic1"></div>
17 <script
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值