<div id="container2" style="min-width: 320px;min-height: 380px;"></div>
$(function () { $('#container2').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: 0, plotShadow: false }, title: { text: '浏览器<br>占比', align: 'center', verticalAlign: 'middle', y: 50 //标题高度 }, tooltip: { headerFormat: '{series.name}<br>', pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>' }, legend:{ symbolRadius:0, //设置图例的形状 symbolHeight:15, //设置图例宽高 symbolWeight:15, //设置图例宽高 itemStyle:{ //设置legend的字体颜色 color:'red', fontWeight:'normal', fontSize:'1.2rem' }, y:-50, //设置图例y轴定位问题 margin:-100, //设置标题距离环顶部距离 itemDistance:10, //图例之间的间距 itemMarginTop:10 //图例距离饼图的距离 }, plotOptions: { pie: { size:500,//设置饼图固定的宽度 dataLabels: { enabled: true, distance: -50, style: { fontWeight: 'bold', color: 'white', textShadow: '0px 1px 2px black' } }, startAngle: -90, //设置扇形图的角度,去除就是饼图 endAngle: 90, //设置扇形图的角度,去除就是饼图 center: ['50%', '75%'], showInLegend:true, floating:false //设置图例是否浮动 } }, series: [{ type: 'pie', name: '浏览器占比', innerSize: '50%', //设置饼图填充百分比 data: [ ['Firefox', 45.0], ['IE', 26.8], ['Chrome', 12.8], ['Safari', 8.5], ['Opera', 6.2], { name: '其他', y: 0.7, dataLabels: { // 数据比较少,没有空间显示数据标签,所以将其关闭 enabled: false } } ] }] }); });
Highcharts基础教程(七):图例(Legend)
https://www.e(删除)vget.com/article/2016/7/15/24503.html?23
https://www.h(删除)vcharts.cn/docs/pie-chart?45