效果如下:
代码如下:
var data = [{ name: "博士及以上", value: 0.2 }, { name: "硕士及以上", value: 0.3 }, { name: "本科及以上", value: 1 }, { name: "高中", value: 0.1 }, { name: "初中及以下", value: 0.1 }, { name: "其他", value: 0.8 } ]; var dataStyle = { normal: { label: {show:false}, labelLine: {show:false}, shadowBlur: 40, shadowColor: 'rgba(40, 40, 40, 0.5)', } }; var placeHolderStyle = { normal : { color: 'rgba(0,0,0,0)', label: {show:false}, labelLine: {show:false} }, emphasis : { color: 'rgba(0,0,0,0)' } }; var legendData=[]; function getData(data) { var sortData=data.sort((a,b)=>{ return b.value-a.value }); var res = []; for (let i = 0; i < sortData.length; i++) { legendData.push(sortData[i].name); res.push({ type: 'pie', clockWise: false, //顺时加载 hoverAnimation: false, //鼠标移入变大 radius: [200 - i * 20, 220 - i * 20],
//radius: [65 - i * 15 + '%', 57 - i * 15 + '%'], itemStyle: dataStyle, data: [{ value: sortData[i].value, name: sortData[i].name }, { value: 1 - sortData[i].value, name:'invisible', itemStyle: placeHolderStyle, }] }); } return res; } option = { backgroundColor: '#f4f2e3', color: ['#85b6b2', '#6d4f8d','#cd5e7e', '#e38980','#f7db88'], tooltip : { show: true, formatter: "{b} : {c} ({d}%)" }, legend: { itemGap:12, top: '87%', data:legendData }, toolbox: { show : true, feature : { saveAsImage : {show: true} } }, series : getData(data) };