效果如下
drawPie_CheckSum() {
var myChart = this.$echarts.init(
document.getElementById("CheckSum"),
null
);
window.addEventListener("resize", function () {
myChart.resize();
});
var Sum = 0;
var theData = this.selfInspectionList.records;
Sum = this.selfInspectionList.totalCount;
// console.log(theData,'theData');
var option = {
title: {
// top:'-.63rem',
left: 'center',
top:'10%',
// x: "30%",
// y: "16%",
text: "\n" + Sum + "\n" + "\n" + "检查总数",
textStyle: {
fontWeight: "bold",
fontSize: ".88rem",
},
},
tooltip: {
trigger: "item",
},
legend: {
right: "center",
bottom: "10%",
left: "10%",
orient: "horizontal", // 图例列表的布局朝向; horizontal; vertical
icon: "circle",
itemWidth:8,
textStyle: {
fontSize: ".75rem",
//图例后面字体的样式
rich: {
name: {
fontSize: '.75rem',
color: "#000",
},
num: {
fontSize: '.75rem',
},
a: {
fontSize: '.75rem',
color:"#05bcad"
},
b: {
fontSize: '.75rem',
color:'#feb61b'
},
c: {
fontSize: '.75rem',
color:'#f44968'
},
}
},
formatter(name) {
// console.log(name,'jiji')
var tarValue;
for (var i = 0; i <theData.length; i++) {
if (theData[i].name == name) {
tarValue = theData[i].value;
}
}
var v = tarValue;
if(name=='企业检查'){
return `{name|${name}} {a|${v}件}`;
}
if(name=='项目检查'){
return `{name|${name}} {b|${v}件}`;
}
if(name=='监督检查'){
return `{name|${name}} {c|${v}件}`;
}
},
},
series: [
{
name: "检查总数",
type: "pie",
color: ["#05bcad", "#feb61b", "#f44968"],
radius: ["55%", "80%"],
center: ["50%", "28%"],
label: {
show: false,
},
data: theData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
myChart.setOption(option); //4.使用刚指定的配置项和数据显示图表。
},
