用Echarts绘制饼状图

最新推荐文章于 2025-05-30 15:31:12 发布

原创

最新推荐文章于 2025-05-30 15:31:12 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #echarts #程序人生 #编辑器

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

在项目网站的网页中，有这样一幅图：

心血来潮，想使用百度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