const option = computed(() => {
console.log(tableData.value, '44846sadasd84')
const pieData = tableData.value.map(item => ({
name: item.productName,
value: item.billPtChargeY // 使用“年累计结算金额”作为饼图的数值
}));
return {
tooltip: {
trigger: "item",
formatter: "{b}: {c} ({d}%)",
},
legend: {
show: false,
},
series: [
{
name: "Access From",
type: "pie",
radius: [10, 70],
roseType: "area",
color: [
"#1E5FBD",
"#009AE2",
"#00CDDF",
"#6BA7FF",
"#FF8A7A",
"#FFC060",
"#AB5EBC",
],
center: ["50%", "50%"],
labelLine: {
length: 30,
},
label: {
formatter: "{d|{d}%}\n{b|{b}}",
alignTo: "labelLine",
align: "center",
verticalAlign: "middle",
backgroundColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: "rgba(200, 200, 200, 0.3)" },
{ offset: 0.05, color: "rgba(211,228,255,0.45)" },
{ offset: 0.95, color: "rgba(255,255,255,0.7)" },
{ offset: 1, color: "rgba(200, 200, 200, 0.3)" },
],
},
borderWidth: 1,
borderRadius: 4,
padding: [6, 8],
borderColor: "#ffffff",
rich: {
d: {
color: "#5470c6",
fontSize: 14,
fontWeight: "bold",
padding: [3, 4],
borderRadius: 4,
align: "left",
width: "100%",
},
b: {
color: "black",
fontSize: 12,
padding: [3, 4],
borderRadius: 4,
},
},
},
data: pieData,
},
],
graphic: {
elements: [
{
type: 'image',
id: 'logo',
left: 'center',
top: '56%',
bounding: 'all',
style: {
image: huan,
width: 140,
height: 74,
opacity: 1
}
}
]
}
}
});我想让我的 d: {
color: "#5470c6",
fontSize: 14,
fontWeight: "bold",
padding: [3, 4],
borderRadius: 4,
align: "left",
width: "100%",
},跟随饼图颜色
最新发布