//在下面背景处放图片BASE64图片超长了不让上传
const colorList = ["#17B1F7", "#B98CED", "#25FFFF", "#85F8C7", "#E1D978"];
const dataset = [
{
name: "测试数据1",
value: 10,
proportion:56
},
{
name: "测试数据2",
value: 70,
proportion:42.4
},
{
name: "测试数据3",
value: 6,
proportion:1
},
{
name: "测试数据4",
value: 86,
proportion:51
}
];
const radius = ["10%", "20%", "28%"];
const center = ["35%", "50%"];
const unit = '个';
const imgCenter = {
top: "35%",
left: "10%",
width: 460,
height: 338
};
const seriesData = dataset.map((item, index) => {
return {
value: item.value,
name: item.name,
itemStyle: {
borderWidth: 6,
borderColor: "transparent"
}
};
});
const total = dataset.reduce((prev, cur) => {
return prev + cur.value;
}, 0);
function _pie2() {
let dataArr = [];
for (var i = 0; i < 100; i++) {
if (i % 2 === 0) {
dataArr.push({
name: (i + 1).toString(),
value: 25,
itemStyle: {
normal: {
color: "#01C2F7",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
});
} else {
dataArr.push({
name: (i + 1).toString(),
value: 20,
itemStyle: {
normal: {
color: "rgba(0,0,0,0)",
borderWidth: 0,
borderColor: "rgba(0,0,0,0)"
}
}
});
}
}
return dataArr;
}
option = {
backgroundColor: "#001029",
color: colorList,
legend: {
show: true,
orient: "vertical",
right: '8%',
top: "middle",
data:dataset,
formatter: function (name) {
let objItem = dataset.find((item) => item.name === name);
if(objItem?.proportion){
return `{label| ${name}: } {dataValue|${objItem.value}}{valueUilt|${unit}}{dataPercent|/${(objItem.proportion ).toFixed(2)}}{valueUilt1|%}`;
}
},
itemGap:15,
textStyle:{
color: "#fff",
rich: {
label: {
width:80,
overflow:'truncate',
ellipsis:'...',
fontSize: 14,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
color: "rgba(160, 206, 224, 1)",
},
dataValue: {
textShadowColor: "rgba(0, 234, 255, 0.70)",
textShadowBlur: 10,
fontSize: 18,
fontFamily: "D-DIN",
fontWeight: "bold",
color: "#FFFFFF",
padding: 0,
verticalAlign:'bottom'
},
valueUilt: {
fontSize: 14,
fontFamily: "SourceHanSansCN-Regular",
// fontWeight: "bold",
color: "#FFFFFF",
verticalAlign:'bottom',
// padding: [5, 0, 5, 25],
textShadowColor: "rgba(0, 234, 255, 0.70)",
textShadowBlur: 10,
},
valueUilt1: {
fontSize: 12,
fontFamily: "SourceHanSansCN-Regular",
// fontWeight: "bold",
color: "#FFFFFF",
// padding: [5, 0, 5, 25],
verticalAlign:'bottom',
textShadowColor: "rgba(0, 234, 255, 0.70)",
textShadowBlur: 10,
},
dataPercent: {
fontSize: 18,
fontFamily: "D-DIN Condensed",
fontWeight: 'bold',
color: "#FFFFFF",
verticalAlign:'bottom',
textShadowColor: "rgba(0, 234, 255, 0.70)",
textShadowBlur: 10,
// padding: [5, 0, 5, 25],
},
}
},
},
tooltip: {
trigger: "item"
},
graphic: {
//图形中间图片
elements: [
{
type: "image",
style: {
image:'',//在这里放背景
width:imgCenter?.width|| 400,
height: imgCenter?.height||300
},
left: imgCenter?.left || 0,
top: imgCenter?.top || 80
}
]
},
series: [
{
name: "",
type: "pie",
radius: radius?.[2]?.endsWith("%")
? [radius?.[2], Number(radius?.[2].slice(0, -1)) + 10 + "%"]
: [radius?.[2], Number(radius?.[2]) + 14] || ["65%", "75%"],
center: center || ["200", "50%"],
avoidLabelOverlap: false,
label: {
show: false
},
labelLine: {
show: false
},
data: seriesData,
tooltip: {
formatter: function (params) {
return (
params.marker +
params.name +
" : " +
params.value +
unit +
"<br/>" +
params.marker +
"占比：" +
params.percent +
"%"
);
}
}
},
{
name: "虚线",
type: "pie",
zlevel: 3,
silent: true,
radius: radius?.[1]?.endsWith("%")
? [radius?.[1], Number(radius?.[1]?.slice(0, -1)) + 1 + "%"]
: [radius?.[1], Number(radius?.[1]) + 1] || ["51%", "52%"],
center: center || ["200", "50%"],
label: {
show: false
},
labelLine: {
show: false
},
data: _pie2()
},
{
//内圆
name: "内圆",
type: "pie",
radius: radius?.[0] || "38%",
// center: ['50%', '50%'],
center: center || ["200", "50%"],
z: 1,
itemStyle: {
normal: {
color: "#0A2D4F",
label: {
show: false
},
labelLine: {
show: false
}
}
},
label: {
normal: {
show: true,
position: "center", // 展示在中间位置
formatter: () => {
return `{a|${total}}{b| ${unit || ""}}`;
},
rich: {
a: {
color: "#fff",
fontSize: 24,
fontWeight: 900
},
b: {
color: "#fff",
fontSize: 14,
lineHeight: 100,
height: 40,
padding: [5, 0, 0, 0]
// lineHeight: '20px'
}
}
}
},
hoverAnimation: false,
tooltip: {
show: false
},
data: [100]
}
],
};