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), };
|