在项目网站的网页中,有这样一幅图:
心血来潮,想使用百度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