[Echarts]用Echarts绘制饼状图

时间：2021-07-10 06:25:38

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

[Echarts]用Echarts绘制饼状图

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

[Echarts]用Echarts绘制饼状图

鼠标移动到items上，可动态显示百分比：

[Echarts]用Echarts绘制饼状图

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

最后，上代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>饼状图练习</title>

     <style>

         #pic1{

             width:400px;

             height:400px;

             margin: 20px auto;

         }

     </style>

     <script src="js/echarts.common.min.js"></script>

 </head>

 <body>

     <div id="pic1"></div>

 <script>

     var myCharts1 = echarts.init(document.getElementById('pic1'));

     var option1 = {

         backgroundColor: 'white',

         title: {

             text: '课程内容分布',

             left: 'center',

             top: 20,

             textStyle: {

                 color: '#ccc'

             }

         },

         tooltip : {

             trigger: 'item',

             formatter: "{a} <br/>{b} : {d}%"

         },

         visualMap: {

             show: false,

             min: 500,

             max: 600,

             inRange: {

                 colorLightness: [0, 1]

             }

         },

         series : [

             {

                 name:'课程内容分布',

                 type:'pie',

                 clockwise:'true',

                 startAngle:'0',

                 radius : '60%',

                 center: ['50%', '50%'],

                 data:[

                     {

                         value:70,

                         name:'语言',

                         itemStyle:{

                             normal:{

                                 color:'rgb(255,192,0)',

                                 shadowBlur:'90',

                                 shadowColor:'rgba(0,0,0,0.8)',

                                 shadowOffsetY:'30'

                             }

                         }

                     },

                     {

                         value:10,

                         name:'美国科学&社会科学',

                         itemStyle:{

                             normal:{

                                 color:'rgb(1,175,80)'

                             }

                         }

                     },

                     {

                         value:20,

                         name:'美国数学',

                         itemStyle:{

                             normal:{

                                 color:'rgb(122,48,158)'

                             }

                         }

                     }

                 ],

             }

         ]

     };

     myCharts1.setOption(option1);

 </script>

 </body>

 </html>

相关文章