108 lines
2.7 KiB
JavaScript
108 lines
2.7 KiB
JavaScript
export default {
|
|
legend: {
|
|
right: 0,
|
|
top: '30%',
|
|
orient: 'vertical',
|
|
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: [50, 71],
|
|
itemStyle: {
|
|
borderColor: "#8d1419",
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
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%",
|
|
zIndex: '0',
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
flexDirection: "column",
|
|
position: "absolute",
|
|
transform: "translate(-50%,-50%)",
|
|
backgroundPosition: "center"
|
|
}
|
|
},
|
|
[
|
|
h(
|
|
'span',
|
|
{
|
|
style: {
|
|
'font-size': '32px',
|
|
'font-weight': 'bold',
|
|
'margin-bottom': '3px',
|
|
'color': '#CEE1FF',
|
|
'line-height': '28px',
|
|
'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.1)',
|
|
'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
|
|
'-webkit-background-clip': 'text',
|
|
'-webkit-text-fill-color': 'transparent'
|
|
}
|
|
},
|
|
formatNum(total)
|
|
),
|
|
h('span', {
|
|
style: {
|
|
'font-size': '16px',
|
|
'color': '#CEE1FF',
|
|
'line-height': '16px',
|
|
'text-shadow': '0px 2px 4px rgba(117, 9, 9, 0.5)',
|
|
'background': 'linear-gradient(180deg, #FFF6C7 0%, #FF9A02 100%)',
|
|
'-webkit-background-clip': 'text',
|
|
'-webkit-text-fill-color': 'transparent'
|
|
}
|
|
}, "总量")
|
|
]
|
|
)
|
|
}
|
|
}
|