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], 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: { data:legendData, type: 'scroll', orient: 'vertical', align: 'left', y: 'center', x: 'right', padding: 10, formatter: function(name){ let total = 0; let target; for (let i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { target = data[i].value; } } return name + ' ' + ((target/total)*100).toFixed(0) + '%'; } }, toolbox: { show : true, feature : { saveAsImage : {show: true} } }, series : getData(data) };
|