ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
![](https://box.kancloud.cn/5cc1c2edb2d46dc81adcc7c4423a78f5_823x443.gif) [运行一下](http://www.shouce.ren/study/api/s/7107) ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图形展示</title> </head> <body> <div class="detail-section"> <div id="canvas"> </div> </div> <script src="http://g.tbcdn.cn/bui/acharts/1.0.32/acharts-min.js"></script> <!-- https://g.alicdn.com/bui/acharts/1.0.29/acharts-min.js --> <script type="text/javascript"> var chart = new AChart({ theme : AChart.Theme.SmoothBase, id : 'canvas', width : 950, height : 500, legend : null ,//不显示图例 seriesOptions : { //设置多个序列共同的属性 pieCfg : { allowPointSelect : true, labels : { distance : 40, label : { //文本信息可以在此配置 }, renderer : function(value,item){ //格式化文本 return value + ' ' + (item.point.percent * 100).toFixed(2) + '%'; } } } }, tooltip : { pointRenderer : function(point){ return (point.percent * 100).toFixed(2)+ '%'; } }, series : [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); chart.render(); </script> </body> </html>![](https://box.kancloud.cn/5cc1c2edb2d46dc81adcc7c4423a78f5_823x443.gif) ~~~