用Echarts繪製餅狀圖

時間 2021-03-21

標籤 html echarts 網站 spa 3d code orm htm blog 欄目 HTML 简体版

原文原文鏈接

在項目網站的網頁中，有這樣一幅圖：html

心血來潮，想使用百度Echarts來繪製一下，但是沒能繪製得徹底同樣，Echarts餅狀圖的label不能在圖形下面放成一行，最後的效果是這樣子的：echarts

鼠標移動到items上，可動態顯示百分比：網站

另外，還了解到了一種特殊的餅狀圖：南丁格爾圖，就是用扇形半徑的大小來表示百分比，對於相差比較大的items，看起來會有些不平衡；spa

最後，上代碼：3d

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>
18     var myCharts1 = echarts.init(document.getElementById('pic1'));
19     var option1 = {
20         backgroundColor: 'white',
21 
22         title: {
23             text: '課程內容分佈',
24             left: 'center',
25             top: 20,
26             textStyle: {
27                 color: '#ccc'
28             }
29         },
30         tooltip : {
31             trigger: 'item',
32             formatter: "{a} <br/>{b} : {d}%"
33         },
34 
35         visualMap: {
36             show: false,
37             min: 500,
38             max: 600,
39             inRange: {
40                 colorLightness: [0, 1]
41             }
42         },
43         series : [
44             {
45                 name:'課程內容分佈',
46                 type:'pie',
47                 clockwise:'true',
48                 startAngle:'0',
49                 radius : '60%',
50                 center: ['50%', '50%'],
51                 data:[
52                     {
53                         value:70,
54                         name:'語言',
55                         itemStyle:{
56                             normal:{
57                                 color:'rgb(255,192,0)',
58                                 shadowBlur:'90',
59                                 shadowColor:'rgba(0,0,0,0.8)',
60                                 shadowOffsetY:'30'
61                             }
62                         }
63                     },
64                     {
65                         value:10,
66                         name:'美國科學&社會科學',
67                         itemStyle:{
68                             normal:{
69                                 color:'rgb(1,175,80)'
70                             }
71                         }
72                     },
73                     {
74                         value:20,
75                         name:'美國數學',
76                         itemStyle:{
77                             normal:{
78                                 color:'rgb(122,48,158)'
79                             }
80                         }
81                     }
82 
83                 ],
84             }
85         ]
86     };
87     myCharts1.setOption(option1);
88 </script>
89 </body>
90 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。