188 lines
4.0 KiB
JavaScript
188 lines
4.0 KiB
JavaScript
export const pieChart2 = {
|
|
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, "总量")
|
|
]
|
|
)
|
|
}
|
|
}
|
|
export const barChart1 = {
|
|
legend: {
|
|
right: 0,
|
|
itemHeight: 5,
|
|
itemWidth: 16,
|
|
textStyle: { color: '#fff' }
|
|
},
|
|
yAxis: {
|
|
nameGap: 23,
|
|
minInterval: 1,
|
|
splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
|
|
axisLabel: { color: '#fff' },
|
|
axisPointer: { show: false }
|
|
},
|
|
axisPointer: {
|
|
type: 'shadow',
|
|
triggerTooltip: false,
|
|
shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
|
|
},
|
|
color: [
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
x2: 0,
|
|
y: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(66, 187, 255, 1)' },
|
|
{ offset: 1, color: 'rgba(37, 143, 255, 0.2)' }
|
|
]
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
x2: 0,
|
|
y: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(66, 255, 254, 1)' },
|
|
{ offset: 1, color: 'rgba(37, 255, 246, 0.2)' }
|
|
]
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
x2: 0,
|
|
y: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(97, 253, 185, 1)' },
|
|
{ offset: 1, color: 'rgba(97, 253, 185, 0.2)' }
|
|
]
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
x2: 0,
|
|
y: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(253, 108, 57, 1)' },
|
|
{ offset: 1, color: 'rgba(253, 108, 57, 0.2)' }
|
|
]
|
|
},
|
|
{
|
|
type: 'linear',
|
|
x: 0,
|
|
x2: 0,
|
|
y: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{ offset: 0, color: 'rgba(248, 187, 25, 1)' },
|
|
{ offset: 1, color: 'rgba(55, 39, 5, 1)' }
|
|
]
|
|
}
|
|
],
|
|
daemon: {
|
|
type: 'bar',
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#fff',
|
|
formatter: e => {
|
|
return e.data[e.seriesName] || ''
|
|
}
|
|
},
|
|
barWidth: 16,
|
|
barCategoryGap: 40,
|
|
itemStyle: {}
|
|
}
|
|
}
|