//
const industriaOutputEcharts = (data: any) => {
let datas = data.map((item: any) => {
return {
value: Number(item.indicatorValue),
name: item.indicatorDescription,
proportion: item.proportion,
};
});
setPieEcharts("industrial-output-echarts", "", datas);
};
//绘制图
const setPieEcharts = (id: string, title: string, data: any) => {
let myChart = echarts.getInstanceByDom(document.getElementById(id)!);
if (myChart == null) {
myChart = echarts.init(document.getElementById(id)!);
}
// var myChart = echarts.init(document.getElementById(id)!);
let resObj: any = {};
let sum = 0;
for (var i = 0; i < data.length; i++) {
sum += data[i].value;
resObj[data[i]["name"]] = data[i];
}
var colorList = ["#1990FE", "#F9DA55", "#975fe5", "#F47A8F", "#707ED4"];
let option = {
color: colorList,
title: title
? {
text: title,
subtext: sum,
x: "17%",
y: "35%",
padding: [10, 0],
textStyle: {
color: "rgba(86, 88, 93, 1)",
fontSize: 16,
align: "center",
},
subtextStyle: {
color: "rgba(6, 14, 29, 1)",
fontSize: 16,
},
}
: null,
tooltip: {
trigger: "item",
formatter: function (parms) {
var str = parms.name + "</br>" + parms.marker + parms.value + "(亿元)";
return str;
},
},
legend: {
icon: "circle",
top: "center",
left: "56%",
itemWidth: 10,
formatter: (name: string) => {
return `{name|${name}}\n{value|${resObj[name].value}(亿元)(${
// id === "industrial-output-echarts"
// ? "增速" + resObj[name].proportion
// : "占比" + resObj[name].proportion
"占比" + resObj[name].proportion
})}`;
},
textStyle: {
fontSize: 10,
rich: {
name: {
color: "#56585d",
fontSize: 10,
},
value: {
color: "#060e1d",
fontWeight: 600,
fontSize: 10,
fontFamily: "HuaKang",
padding: [6, 0, 0, 0],
},
},
},
},
series: [
{
name: "",
type: "pie",
center: ["24%", "50%"],
radius: ["0%", "60%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: false,
},
},
labelLine: {
show: false,
},
data: data,
},
],
};
nextTick(() => {
myChart.setOption(option);
});
};
echar扇形图
于 2023-10-24 12:10:03 首次发布