diagramChart() {
const chartDom = this.$refs.maingc;
const myChart = echarts.init(chartDom);
let index = 0;
setTimeout(() => {
myChart.dispatchAction({
type: "highlight",
dataIndex: 0, //默认选中第一个
});
}, 0);
myChart.on("mouseover", (e) => {
if (e.dataIndex != index) {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
}
});
myChart.on("mouseout", (e) => {
index = e.dataIndex;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
let option;
option = {
color: [
"#ff5555",
"#6f3dff",
"#306fdc",
"#55a3ff",
"#81e2ff",
"#00c378",
"#79c300",
"#ffa246",
"#ffd88d",
],
tooltip: {
show: false,
},
legend: {
y: "bottom",
orient: "horizontal",
icon: "rect",
itemHeight: 12,
itemWidth: 12,
},
series: [
{
name: "",
type: "pie",
radius: ["40%", "53%"],
avoidLabelOverlap: true,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 20,
formatter: (params) => {
let { value, name, percent } = params;
return [
`{value1| ${value + "亿元"}}`,
`{empty| ""}`,
`{value2| ${name}}`,
`{empty| ""}`,
`{value3| ${percent + "%"}}`,
].join("\n");
},
rich: {
value1: {
fontSize: 21,
fontWeight: 900,
color: "#306fdc",
},
value2: {
fontSize: 13,
fontWeight: 500,
color: "rgba(0, 0, 0, 0.60)",
},
value3: {
fontSize: 13,
fontWeight: 700,
color: "#000000",
},
empty: {
fontSize: 8,
fontWeight: 700,
color: "rgba(0, 0, 0, 0)",
},
},
},
},
labelLine: {
show: true,
},
data: [
{ name: "一月", value: 10 },
{ name: "二月", value: 20 },
{ name: "三月", value: 30 },
{ name: "四月", value: 40 },
{ name: "五月", value: 50 },
],
},
],
};
option && myChart.setOption(option);
},