97 lines
2.2 KiB
JavaScript
97 lines
2.2 KiB
JavaScript
export default {
|
|
legend: {
|
|
bottom: 0,
|
|
itemGap: 14,
|
|
itemWidth: 16,
|
|
itemHeight: 5,
|
|
textStyle: {color: "#fff", fontSize: 14}
|
|
},
|
|
grid: {
|
|
height: 260
|
|
},
|
|
xAxis: {show: false},
|
|
yAxis: {show: false},
|
|
tooltip: {
|
|
backgroundColor: "rgba(14, 51, 111, 0.9)",
|
|
borderColor: "#1A6ABC",
|
|
textStyle: {color: "#fff"}
|
|
},
|
|
series: {
|
|
type: "pie",
|
|
minShowLabelAngle: 10,
|
|
radius: [70, 81],
|
|
itemStyle: {
|
|
borderColor: "#fff",
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
color: "#A8D7F3",
|
|
fontSize: 14,
|
|
formatter: "{name|{b}}\n{v|{d}%}",
|
|
minMargin: 5,
|
|
edgeDistance: 10,
|
|
lineHeight: 22,
|
|
rich: {
|
|
v: {
|
|
color: "#fff"
|
|
}
|
|
}
|
|
},
|
|
labelLine: {},
|
|
labelLayout: function (params) {
|
|
let points = params.labelLinePoints,
|
|
isLeft = points[2][0] < points[1][0]
|
|
points[2][0] =
|
|
points[2][0] + (params.labelRect.width + 4) * (isLeft ? -1 : 1)
|
|
return {
|
|
labelLinePoints: points
|
|
}
|
|
}
|
|
},
|
|
render: (h, params) => {
|
|
const formatNum = num => {
|
|
if (num >= 10000000) {
|
|
return num / 10000000 + "千万"
|
|
}
|
|
|
|
if (num >= 10000) {
|
|
return num / 10000 + "万"
|
|
}
|
|
|
|
return parseFloat(num.toFixed(2))
|
|
}
|
|
|
|
let total = params.data.reduce((t, e) => {
|
|
return t + Number(Object.values(e)?.[1] || 0)
|
|
}, 0)
|
|
return h(
|
|
"div",
|
|
{
|
|
style: {
|
|
height: "162px",
|
|
width: "162px",
|
|
color: "#8BCCFF",
|
|
left: "50%",
|
|
top: "50%",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
flexDirection: "column",
|
|
position: "absolute",
|
|
transform: "translate(-50%,-50%)",
|
|
backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`,
|
|
backgroundPosition: "center"
|
|
}
|
|
},
|
|
[
|
|
h(
|
|
"span",
|
|
{style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}},
|
|
formatNum(total)
|
|
),
|
|
h("span", null, "总量")
|
|
]
|
|
)
|
|
}
|
|
}
|