单独构建大屏ui库,避免引入混乱
This commit is contained in:
aixianling
7
ui/dv/AiEchart/echartTpls.js
Normal file
7
ui/dv/AiEchart/echartTpls.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import pie from "./template/pie"
|
||||
import line from "./template/line";
|
||||
import bar from "./template/bar";
|
||||
|
||||
export default {
|
||||
...bar, ...line, ...pie
|
||||
}
|
||||
307
ui/dv/AiEchart/template/bar.js
Normal file
307
ui/dv/AiEchart/template/bar.js
Normal file
@@ -0,0 +1,307 @@
|
||||
import tools from "./tools";
|
||||
|
||||
export const barChart1 = {
|
||||
yAxis: {
|
||||
nameGap: 23,
|
||||
minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#C3C4C4'},
|
||||
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(0, 249, 255, 1)'},
|
||||
{offset: 1, color: 'rgba(0, 249, 255, 0.4)'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(236, 102, 102, 1)'},
|
||||
{offset: 1, color: 'rgba(236, 102, 102, 0.4)'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(252, 59, 255, 1)'},
|
||||
{offset: 1, color: 'rgba(252, 59, 255, 0.4)'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(24, 144, 255, 1)'},
|
||||
{offset: 1, color: 'rgba(24, 144, 255, 0.4)'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color: 'rgba(149, 255, 68, 1)'},
|
||||
{offset: 1, color: 'rgba(149, 255, 68, 0.4)'}
|
||||
]
|
||||
}
|
||||
],
|
||||
daemon: {
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barCategoryGap: 40,
|
||||
itemStyle: {}
|
||||
}
|
||||
}
|
||||
export const barChart2 = {
|
||||
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}
|
||||
}
|
||||
export const barChart3 = {
|
||||
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)'
|
||||
// },
|
||||
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)'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export const barChart5 = {
|
||||
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,
|
||||
},
|
||||
}
|
||||
export const barChart7 = {
|
||||
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'}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export const barChart8 = {
|
||||
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}]
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
export const barChart9 = {
|
||||
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)'}
|
||||
}
|
||||
}
|
||||
export const barChart10 = {
|
||||
yAxis: {
|
||||
nameGap: 23,
|
||||
minInterval: 1,
|
||||
splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
|
||||
axisLabel: {color: '#C3C4C4'},
|
||||
axisPointer: {show: false}
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
triggerTooltip: false,
|
||||
shadowStyle: {color: 'rgba(46, 153, 255, .2)'}
|
||||
},
|
||||
daemon: {
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
barCategoryGap: 40,
|
||||
itemStyle: {
|
||||
borderRadius: 20,
|
||||
color(params) {
|
||||
const color = ['#DBB36E', '#2C97E8', '#00EFFF', '#BFEAFF'][params.dataIndex]
|
||||
return {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{offset: 0, color},
|
||||
{offset: 1, color: tools.$colorUtils.Hex2RGBA(color, .1)}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
barChart1,
|
||||
barChart2,
|
||||
barChart3,
|
||||
barChart5,
|
||||
barChart7,
|
||||
barChart8,
|
||||
barChart9,
|
||||
barChart10
|
||||
}
|
||||
148
ui/dv/AiEchart/template/line.js
Normal file
148
ui/dv/AiEchart/template/line.js
Normal file
@@ -0,0 +1,148 @@
|
||||
import tools from "./tools";
|
||||
|
||||
export const lineChart1 = {
|
||||
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,
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 0,
|
||||
y: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.3) },
|
||||
{ offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.1) }
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
export const lineChart2 = {
|
||||
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)},
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
export const lineChart3 = {
|
||||
// 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: {
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
shadowBlur: 1,
|
||||
shadowOffsetY: 2,
|
||||
width: 3
|
||||
}
|
||||
}
|
||||
};
|
||||
export const lineChart4 = {
|
||||
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'
|
||||
}
|
||||
}
|
||||
};
|
||||
export const lineChart5 = {
|
||||
legend: {show: false},
|
||||
grid: {
|
||||
left: 50, right: 0, top: 10, bottom: 30
|
||||
},
|
||||
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)},
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
|
||||
export default {
|
||||
lineChart1,
|
||||
lineChart2,
|
||||
lineChart3,
|
||||
lineChart4,
|
||||
lineChart5,
|
||||
}
|
||||
225
ui/dv/AiEchart/template/pie.js
Normal file
225
ui/dv/AiEchart/template/pie.js
Normal file
@@ -0,0 +1,225 @@
|
||||
export const pieChart1 = {
|
||||
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",
|
||||
radius: ['60%', '70%'],
|
||||
minShowLabelAngle: 10,
|
||||
itemStyle: {
|
||||
borderColor: 'rgba(128, 128, 128, 0.1)',
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}
|
||||
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
|
||||
if (points) {
|
||||
const isLeft = points[2][0] < points[1][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 >= 100000) {
|
||||
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 pieChart3 = {
|
||||
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'
|
||||
}
|
||||
}, "总量")
|
||||
]
|
||||
)
|
||||
}
|
||||
}
|
||||
export default {
|
||||
pieChart1, pieChart2, pieChart3
|
||||
}
|
||||
24
ui/dv/AiEchart/template/tools.js
Normal file
24
ui/dv/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