用Echarts绘制饼状图

蛋黄酥要不要来一口阿

于 2021-03-18 14:53:38 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Echarts 前端文章标签：前端 echarts 程序人生编辑器

本文链接：https://blog.youkuaiyun.com/Kepler_II/article/details/114978998

本文介绍了如何使用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