On the web page of the project website, there is a picture like this:
Whim, want to use Baidu Echarts to draw, but failed to draw exactly the same, Echarts pie chart label can not be placed under the graph into a line, the final effect is like this:
Move the mouse over items to dynamically display percentages:
In addition, I also learned a special pie chart: The Nightingale chart, which uses the size of the sector radius to represent the percentage. For items with a large difference, it looks unbalanced.
Finally, the code:
1 <! DOCTYPE HTML > 2 < HTML > 3 <head> 4 <meta charset=" utF-8 "> 5 </title> 6 </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: 'content ', 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:' Course content Distribution ', 46 type:'pie', 47 clockwise:'true', 48 startAngle:'0', 49 RADIUS :' 60%', 50 center... ItemStyle :{50 normal:{50 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, 69 itemStyle:{50 normal:{50 color:' RGB (1,175,80)' 70} 71} 72}, 73 {50 value: 50, 75 itemStyle:{99 normal:{99 color:' RGB (122,48,158)' 79} 80} 81} 82 83], 84} 85] 86}; 87 myCharts1.setOption(option1); 88 </script> 89 </body> 90 </html>Copy the code