构建版本修改
This commit is contained in:
35
components/AiEchart/echartTpls.js
Normal file
35
components/AiEchart/echartTpls.js
Normal file
@@ -0,0 +1,35 @@
|
||||
import barChart1 from "./template/bar/barChart1"
|
||||
import barChart2 from "./template/bar/barChart2"
|
||||
import barChart3 from "./template/bar/barChart3"
|
||||
import barChart5 from "./template/bar/barChart5"
|
||||
import barChart7 from "./template/bar/barChart7"
|
||||
import barChart8 from "./template/bar/barChart8"
|
||||
import barChart9 from "./template/bar/barChart9"
|
||||
|
||||
import lineChart1 from "./template/line/lineChart1"
|
||||
import lineChart2 from "./template/line/lineChart2"
|
||||
import lineChart3 from "./template/line/lineChart3"
|
||||
import lineChart4 from "./template/line/lineChart4"
|
||||
import lineChart5 from "./template/line/lineChart5"
|
||||
|
||||
import pieChart1 from "./template/pie/pieChart1"
|
||||
import pieChart2 from "./template/pie/pieChart2"
|
||||
import pieChart3 from "./template/pie/pieChart3"
|
||||
|
||||
export default {
|
||||
barChart1,
|
||||
barChart2,
|
||||
barChart3,
|
||||
barChart5,
|
||||
barChart7,
|
||||
barChart8,
|
||||
barChart9,
|
||||
lineChart1,
|
||||
lineChart2,
|
||||
lineChart3,
|
||||
lineChart4,
|
||||
lineChart5,
|
||||
pieChart1,
|
||||
pieChart2,
|
||||
pieChart3
|
||||
}
|
||||
91
components/AiEchart/template/bar/barChart1.js
Normal file
91
components/AiEchart/template/bar/barChart1.js
Normal file
@@ -0,0 +1,91 @@
|
||||
export default {
|
||||
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: {}
|
||||
}
|
||||
}
|
||||
24
components/AiEchart/template/bar/barChart2.js
Normal file
24
components/AiEchart/template/bar/barChart2.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export default {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
itemWidth: 16, itemHeight: 5
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
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', show: true,
|
||||
shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
|
||||
},
|
||||
daemon: {type: 'bar', barWidth: 2, barGap: 4}
|
||||
}
|
||||
33
components/AiEchart/template/bar/barChart3.js
Normal file
33
components/AiEchart/template/bar/barChart3.js
Normal file
@@ -0,0 +1,33 @@
|
||||
export default {
|
||||
legend: {show: false},
|
||||
yAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#fff'}, axisPointer: {show: false}
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'none', show: true, triggerTooltip: false,
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'},
|
||||
barWidth: 24,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(123, 165, 255, .2)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
|
||||
colorStops: [{offset: 0, color: '#42BBFF'}, {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}]
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 0, y: 0, y2: 1,
|
||||
colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
23
components/AiEchart/template/bar/barChart5.js
Normal file
23
components/AiEchart/template/bar/barChart5.js
Normal file
@@ -0,0 +1,23 @@
|
||||
export default {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
itemWidth: 16, itemHeight: 5
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
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: 'none', show: true, triggerTooltip: false,
|
||||
},
|
||||
daemon: {type: 'bar', barWidth: 12, stack: 'stack'}
|
||||
}
|
||||
45
components/AiEchart/template/bar/barChart7.js
Normal file
45
components/AiEchart/template/bar/barChart7.js
Normal file
@@ -0,0 +1,45 @@
|
||||
export default {
|
||||
legend: {show: false},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
|
||||
axisPointer: {
|
||||
type: 'shadow', shadowStyle: {color: 'rgba(46, 153, 255, .2)'},
|
||||
label: {show: true, backgroundColor: 'transparent', fontSize: 14, margin: 1, color: '#28FBFF'}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {color: '#fff', fontSize: 14},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false},
|
||||
},
|
||||
xAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#fff', fontSize: 14},
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar', barWidth: 10, barGap: '40%',
|
||||
label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14},
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(123, 165, 255, .2)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
|
||||
colorStops: [{offset: 0, color: 'rgba(37, 143, 255,.5)'}, {offset: 1, color: 'rgba(43, 199, 255, 1)'}]
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: {color: '#28FBFF', position: 'right'},
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
|
||||
colorStops: [{offset: 0, color: 'rgba(37, 255, 246, 0.5)'}, {offset: 1, color: '#28FBFF'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
components/AiEchart/template/bar/barChart8.js
Normal file
36
components/AiEchart/template/bar/barChart8.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import tools from "../tools";
|
||||
|
||||
export default {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
itemWidth: 16, itemHeight: 5
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {color: '#fff', fontSize: 14},
|
||||
axisLine: {lineStyle: {color: 'rgba(255,255,255,.5)'}},
|
||||
axisPointer: {show: false},
|
||||
},
|
||||
xAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#fff', fontSize: 14},
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar', barWidth: 10,
|
||||
itemStyle: {
|
||||
color: ({color}) => ({
|
||||
type: 'linear', x: 0, x2: 1, y: 0, y2: 0,
|
||||
colorStops: [{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, {offset: 1, color}]
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
29
components/AiEchart/template/bar/barChart9.js
Normal file
29
components/AiEchart/template/bar/barChart9.js
Normal file
@@ -0,0 +1,29 @@
|
||||
export default {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
itemWidth: 16, itemHeight: 5
|
||||
},
|
||||
grid: {
|
||||
left: 80, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {color: '#fff', fontSize: 14, margin: 23},
|
||||
axisTick: {show: false},
|
||||
axisLine: {show: false},
|
||||
},
|
||||
xAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#fff', fontSize: 14},
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar', barWidth: 10, barGap: '40%', stack: 'stack',
|
||||
showBackground: true,
|
||||
backgroundStyle: {color: 'rgba(123, 165, 255, .2)'}
|
||||
}
|
||||
}
|
||||
40
components/AiEchart/template/line/lineChart1.js
Normal file
40
components/AiEchart/template/line/lineChart1.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import tools from '../tools';
|
||||
|
||||
export default {
|
||||
legend: { show: false },
|
||||
grid: {
|
||||
left: 50,
|
||||
right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(14, 51, 111, 0.9)',
|
||||
borderColor: '#1A6ABC',
|
||||
textStyle: { color: '#fff' },
|
||||
axisPointer: { type: 'cross' }
|
||||
},
|
||||
yAxis: {
|
||||
nameGap: 23,
|
||||
minInterval: 1,
|
||||
splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
|
||||
axisLabel: { color: '#fff' },
|
||||
axisPointer: { snap: true }
|
||||
},
|
||||
daemon: (color) => ({
|
||||
showSymbol: false,
|
||||
lineStyle: { shadowBlur: 4, shadowOffsetY: 2 },
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.5) },
|
||||
{ offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.5) }
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
27
components/AiEchart/template/line/lineChart2.js
Normal file
27
components/AiEchart/template/line/lineChart2.js
Normal file
@@ -0,0 +1,27 @@
|
||||
import tools from "../tools";
|
||||
|
||||
export default {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
textStyle: {color: '#fff'}
|
||||
},
|
||||
daemon: color => ({
|
||||
showSymbol: false,
|
||||
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
|
||||
{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
|
||||
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
16
components/AiEchart/template/line/lineChart3.js
Normal file
16
components/AiEchart/template/line/lineChart3.js
Normal file
@@ -0,0 +1,16 @@
|
||||
export default {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
textStyle: {color: '#fff'}
|
||||
},
|
||||
daemon: {
|
||||
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
|
||||
}
|
||||
}
|
||||
19
components/AiEchart/template/line/lineChart4.js
Normal file
19
components/AiEchart/template/line/lineChart4.js
Normal file
@@ -0,0 +1,19 @@
|
||||
export default {
|
||||
legend: {
|
||||
right: 0, itemGap: 16,
|
||||
textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14},
|
||||
},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
textStyle: {color: '#fff'}
|
||||
},
|
||||
daemon: {
|
||||
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
|
||||
emphasis: {
|
||||
focus: 'self'
|
||||
}
|
||||
}
|
||||
}
|
||||
31
components/AiEchart/template/line/lineChart5.js
Normal file
31
components/AiEchart/template/line/lineChart5.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import tools from "../tools";
|
||||
|
||||
export default {
|
||||
legend: {show: false},
|
||||
grid: {
|
||||
left: 50, right: 0
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC',
|
||||
textStyle: {color: '#fff'},
|
||||
axisPointer: {type: 'cross'}
|
||||
},
|
||||
yAxis: {
|
||||
nameGap: 23, minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#fff'},
|
||||
axisPointer: {snap: true}
|
||||
},
|
||||
daemon: color=> ({
|
||||
showSymbol: false, smooth: true,
|
||||
lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [
|
||||
{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)},
|
||||
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)},
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
26
components/AiEchart/template/pie/pieChart1.js
Normal file
26
components/AiEchart/template/pie/pieChart1.js
Normal file
@@ -0,0 +1,26 @@
|
||||
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%',
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
96
components/AiEchart/template/pie/pieChart2.js
Normal file
96
components/AiEchart/template/pie/pieChart2.js
Normal file
@@ -0,0 +1,96 @@
|
||||
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, "总量")
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
98
components/AiEchart/template/pie/pieChart3.js
Normal file
98
components/AiEchart/template/pie/pieChart3.js
Normal file
@@ -0,0 +1,98 @@
|
||||
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'
|
||||
}
|
||||
}, "总量")
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
24
components/AiEchart/template/tools.js
Normal file
24
components/AiEchart/template/tools.js
Normal file
@@ -0,0 +1,24 @@
|
||||
export default {
|
||||
$colorUtils: {
|
||||
Hex2RGBA(color, alpha = 1) {
|
||||
let hex = 0;
|
||||
if (color.charAt(0) == "#") {
|
||||
if (color.length == 4) {
|
||||
//检测诸如#FFF简写格式
|
||||
color = "#" + color.charAt(1).repeat(2) +
|
||||
color.charAt(2).repeat(2) +
|
||||
color.charAt(3).repeat(2);
|
||||
}
|
||||
hex = parseInt(color.slice(1), 16);
|
||||
}
|
||||
let r = hex >> 16 & 0xFF;
|
||||
let g = hex >> 8 & 0xFF;
|
||||
let b = hex & 0xFF;
|
||||
return `rgba(${r},${g},${b},${alpha})`;
|
||||
},
|
||||
RGBtoHex(r, g, b) {
|
||||
let hex = r << 16 | g << 8 | b;
|
||||
return "#" + hex.toString(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user