const chartsData = [
{
value: 9,
name: "Ⅰ类",
rate: "9.3",
},
{
value: 41,
name: "Ⅱ类",
rate: "42.3",
},
{
value: 27,
name: "Ⅲ类",
rate: "27.8",
},
{
value: 12,
name: "Ⅳ类",
rate: "12.4",
},
{
value: 3,
name: "Ⅴ类",
rate: "3.1",
},
{
value: 5,
name: "劣Ⅴ类",
rate: "5.2",
},
];
option = {
color: [
"#ccffff",
"#00ccff",
"#00ff00",
"#ffff00",
"#ff9b00",
"#ff0000",
"#757f8d",
],
tooltip: {
trigger: "item",
},
title: {
text: "水质类别占比",
left: "left",
textStyle: {
fontSize: 14,
color: "#333",
},
},
grid: {
top: "30%",
left: "0",
right: "7",
bottom: "15%",
containLabel: true,
},
legend: {
top: "center",
right: 10,
orient: "vertical",
icon: "path://M7.424 476.672L301.312 778.24s205.312-204.288 425.984 0c3.072 1.024 291.84-301.568 291.84-301.568s-466.944-519.168-1011.712 0",
textStyle: {
color: "#000",
fontSize: 14,
fontWeight: 700,
fontFamily: "Barlow Condensed SemiBold",
rich: {
name: {
width: 60,
},
value: {
width: 50,
},
},
},
formatter: (name) => {
let res = chartsData.filter((v) => v.name === name);
res = res[0] || {};
const p = res.value;
const rate = res.rate;
return (
"{name|" +
name +
"}" +
"{value|" +
p +
"}" +
"{value|" +
rate +
"%}"
);
},
},
series: [
{
type: "pie",
radius: ["35%", "65%"],
center: ["25%", "50%"],
silent: true,
itemStyle: {
color: "#E5ECF6",
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
},
labelLine: {
show: false,
},
data: [0],
},
{
type: "pie",
radius: ["40%", "60%"],
center: ["25%", "50%"],
avoidLabelOverlap: false,
z: 20,
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: false,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: chartsData,
},
],
};