Files
dvcp_v2_webapp/components/AiEchart/template/pie/pieChart3.js
2022-08-12 11:20:51 +08:00

99 lines
2.4 KiB
JavaScript

export default {
legend: {
right: 20,
top: 'middle',
orient: 'vertical',
textStyle: {color: "#fff", fontSize: 14}
},
grid: {
top: '0%',
left: '0%',
right: '0px',
bottom: '0%'
},
xAxis: {show: false},
yAxis: {show: false},
tooltip: {
},
series: {
type: "pie",
minShowLabelAngle: 10,
radius: [50, 71],
itemStyle: {
borderColor: "#8d1419",
borderWidth: 2
},
label: {
show: false
},
labelLine: {}
},
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: '-1',
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'
}
}, "总量")
]
)
}
}