Echarts饼状图生成内外圈且高度不一致效果
var myChart = echarts.init(document.getElementById("echartsDemo"));
let colorsInner = ["#5987BF", "#5ABC9B", "#F6C253"];
let outerColorList = [
["#3264A4", "#5987BF", "#4272AF", "#3264A4"],
["#4ac99f", "#85c4ae", "#3d725f"],
["#F6C253", "#ba9850", "#8d6c27"]
];
let allColors = [];
function getSelectLabel() {
return {
normal: {
show: true,
position: "inside",
offset: 20
}
};
}
function generateData(selectedName) {
let innerList = [
{
value: 77,
name: "肿瘤性病变"
},
{
value: 5,
name: "肺炎"
},
{
value: 18,
name: "肺结核"
}
];
selectedName = selectedName || innerList[0].name;
let outerList = [
[
{ value: 93.2, name: "恶性" },
{ value: 6.8, name: "良性" }
],
[
{ value: 30, name: "肺炎1" },
{ value: 60, name: "肺炎2" },
{ value: 40, name: "肺炎3" },
{ value: 30, name: "肺炎4" }
],
vm.echartspie
];
let findIndex = -1;
let innerData = innerList.map((item, index) => {
if (item.name === selectedName) {
item.label = getSelectLabel();
findIndex = index;
item.value = 15;
} else {
item.value = 10;
}
item.index = index;
item.icon = "▅";
return item;
});
if (findIndex < 0) {
findIndex = 0;
innerList[0].label = getSelectLabel();
}
let templateData = {
value: 10,
name: "null",
label: {
show: false
},
itemStyle: {
color: "transparent"
}
};
let outerData = [];
for (let i = 0; i < 3; i++) {
if (i === findIndex) {
outerData = outerData.concat(outerList[findIndex]);
} else {
outerList[findIndex].forEach(() => {
outerData.push(templateData);
});
}
}
let dataList = innerList
.concat(outerData)
.filter(item => item.name !== "null")
.map((item, index) => {
item.color = allColors[index];
item.index = index;
return item;
});
let outerColor = outerColorList[findIndex];
allColors = colorsInner.concat(outerColor);
setChartData(innerData, outerData, dataList, outerColor);
}
function getRichColorStyle(legendList) {
let lastColor = allColors.slice(-1)[0];
let richColorStyle = {};
let colorLength = allColors.length;
legendList.forEach((item, index) => {
richColorStyle["flag_" + index] = { color: index < colorLength ? allColors[index] : lastColor };
});
richColorStyle.text = { color: "#C2CCD3" };
return richColorStyle;
}
function setChartData(innerData, outerData, dataList, outerColor) {
myChart.setOption({
legend: {
icon: "none",
orient: "vertical",
top: "30",
itemWidth: 40,
itemHeight: 20,
padding: 0,
color: allColors,
left: "1%",
formatter: function(name) {
let obj = dataList.find(item => item.name === name);
return "{flag_" + obj.index + "|" + (obj.icon || "*") + "} {text|" + name + "}";
},
textStyle: {
rich: getRichColorStyle(dataList)
},
itemStyle: {
normal: {
color: "#C2CCD3"
}
},
data: dataList.map(item => item.name)
},
series: [
{
type: "pie",
radius: [20, 45],
hoverAnimation: false,
// 设为这种类型后，图的高度由value值来决定
roseType: "area",
color: colorsInner,
center: ["55%", "50%"],
avoidLabelOverlap: false,
label: {
normal: {
position: "outside",
shadowColor: "#fff",
formatter: "{d}% \n {b} "
},
emphasis: {
position: "inner",
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
data: innerData
},
{
type: "pie",
radius: [55, 130],
center: ["55%", "50%"],
hoverAnimation: false,
color: outerColor,
roseType: "area",
label: {
position: "inner",
formatter: "{d}% \n {b} "
},
avoidLabelOverlap: false,
data: outerData
}
]
});
}
myChart.on("click", function(params) {
if (params.componentType === "series") {
generateData(params.data.name);
}
});
效果类似下图：
