kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

迁移大屏UI库和应用

Browse Source
This commit is contained in:
aixianling
2022-03-25 11:09:26 +08:00
parent 60bd0b1dff
commit cc87206dbc
104 changed files with 7124 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
project/dvui/components/AiEchart/template/bar/barChart1.js Normal file
View 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
project/dvui/components/AiEchart/template/bar/barChart2.js Normal file
View 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
project/dvui/components/AiEchart/template/bar/barChart3.js Normal file
View 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
project/dvui/components/AiEchart/template/bar/barChart5.js Normal file
View 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
project/dvui/components/AiEchart/template/bar/barChart7.js Normal file
View 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
project/dvui/components/AiEchart/template/bar/barChart8.js Normal file
View 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
project/dvui/components/AiEchart/template/bar/barChart9.js Normal file
View 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
project/dvui/components/AiEchart/template/line/lineChart1.js Normal file
View 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
project/dvui/components/AiEchart/template/line/lineChart2.js Normal file
View 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
project/dvui/components/AiEchart/template/line/lineChart3.js Normal file
View 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
project/dvui/components/AiEchart/template/line/lineChart4.js Normal file
View 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
project/dvui/components/AiEchart/template/line/lineChart5.js Normal file
View 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)},
]
}
}
})
}

96
project/dvui/components/AiEchart/template/pie/pieChart2.js Normal file
View 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, "总量")
]
)
}
}

24
project/dvui/components/AiEchart/template/tools.js Normal file
View 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);
}
}
}