新增大屏饼图组件
This commit is contained in:
aixianling
@@ -1,35 +1,7 @@
|
|||||||
import barChart1 from "./template/bar/barChart1"
|
import pie from "./template/pie"
|
||||||
import barChart2 from "./template/bar/barChart2"
|
import line from "./template/line";
|
||||||
import barChart3 from "./template/bar/barChart3"
|
import bar from "./template/bar";
|
||||||
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 {
|
export default {
|
||||||
barChart1,
|
...bar, ...line, ...pie
|
||||||
barChart2,
|
|
||||||
barChart3,
|
|
||||||
barChart5,
|
|
||||||
barChart7,
|
|
||||||
barChart8,
|
|
||||||
barChart9,
|
|
||||||
lineChart1,
|
|
||||||
lineChart2,
|
|
||||||
lineChart3,
|
|
||||||
lineChart4,
|
|
||||||
lineChart5,
|
|
||||||
pieChart1,
|
|
||||||
pieChart2,
|
|
||||||
pieChart3
|
|
||||||
}
|
}
|
||||||
|
|||||||
270
components/AiEchart/template/bar.js
Normal file
270
components/AiEchart/template/bar.js
Normal file
@@ -0,0 +1,270 @@
|
|||||||
|
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 default {
|
||||||
|
barChart1,
|
||||||
|
barChart2,
|
||||||
|
barChart3,
|
||||||
|
barChart5,
|
||||||
|
barChart7,
|
||||||
|
barChart8,
|
||||||
|
barChart9,
|
||||||
|
}
|
||||||
@@ -1,77 +0,0 @@
|
|||||||
export default {
|
|
||||||
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: {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
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}
|
|
||||||
}
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
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)'
|
|
||||||
// },
|
|
||||||
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)'}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
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,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
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'}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
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}]
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
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)'}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
148
components/AiEchart/template/line.js
Normal file
148
components/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,
|
||||||
|
}
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
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,
|
|
||||||
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) }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
};
|
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
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)},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
@@ -1,21 +0,0 @@
|
|||||||
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: {
|
|
||||||
smooth: true,
|
|
||||||
lineStyle: {
|
|
||||||
shadowBlur: 1,
|
|
||||||
shadowOffsetY: 2,
|
|
||||||
width: 3
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
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'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import tools from "../tools";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
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)},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
225
components/AiEchart/template/pie.js
Normal file
225
components/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
|
||||||
|
}
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
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",
|
|
||||||
radius: ['60%', '70%'],
|
|
||||||
minShowLabelAngle: 10,
|
|
||||||
itemStyle: {
|
|
||||||
borderColor: 'rgba(128, 128, 128, 0.1)',
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
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
|
|
||||||
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, "总量")
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
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'
|
|
||||||
}
|
|
||||||
}, "总量")
|
|
||||||
]
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -26,11 +26,13 @@ import Summary17 from './components/Summary17'
|
|||||||
import Summary18 from './components/Summary18'
|
import Summary18 from './components/Summary18'
|
||||||
import Summary19 from "./components/Summary19";
|
import Summary19 from "./components/Summary19";
|
||||||
import Summary20 from "./components/Summary20";
|
import Summary20 from "./components/Summary20";
|
||||||
|
import ProcessPie from "./components/processPie.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AiDvSummary',
|
name: 'AiDvSummary',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
|
ProcessPie,
|
||||||
Summary20,
|
Summary20,
|
||||||
Summary19,
|
Summary19,
|
||||||
Summary0,
|
Summary0,
|
||||||
|
|||||||
132
components/layout/AiDvSummary/components/processPie.vue
Normal file
132
components/layout/AiDvSummary/components/processPie.vue
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "processPie",
|
||||||
|
props: {
|
||||||
|
data: Object
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
percentage: v => Math.floor(v.data.v1 / v.data.total * 100),
|
||||||
|
legend: v => {
|
||||||
|
const {totalLabel, label, v1, total} = v.data
|
||||||
|
return [
|
||||||
|
{label: totalLabel, value: total},
|
||||||
|
{label, value: v1},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const svg = this.$el.querySelector("svg")
|
||||||
|
const path = this.$el.querySelector(".el-progress-circle__path")
|
||||||
|
const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
|
||||||
|
gradient.setAttribute('id', 'gradient');
|
||||||
|
gradient.setAttribute('x1', '0%');
|
||||||
|
gradient.setAttribute('y1', '0%');
|
||||||
|
gradient.setAttribute('x2', '100%');
|
||||||
|
gradient.setAttribute('y2', '0%');
|
||||||
|
|
||||||
|
const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
||||||
|
stop1.setAttribute('offset', '0%');
|
||||||
|
stop1.setAttribute('style', 'stop-color:#2C96E7;stop-opacity:1');
|
||||||
|
gradient.appendChild(stop1);
|
||||||
|
|
||||||
|
const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
|
||||||
|
stop2.setAttribute('offset', '100%');
|
||||||
|
stop2.setAttribute('style', 'stop-color:#5CFFF3;stop-opacity:1');
|
||||||
|
gradient.appendChild(stop2);
|
||||||
|
svg.insertBefore(gradient, path);
|
||||||
|
path.setAttribute('stroke', 'url(#gradient)');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section class="processPie flex">
|
||||||
|
<div class="progress">
|
||||||
|
<el-progress type="circle" :percentage="percentage" :stroke-width="7" define-back-color="#66798a66"
|
||||||
|
:show-text="false" :width="106"/>
|
||||||
|
<div class="label">
|
||||||
|
<div class="percentage" v-text="`${percentage}%`"/>
|
||||||
|
<div v-text="data.name"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fill">
|
||||||
|
<div class="item flex" v-for="(item, i) in legend" :key="i">
|
||||||
|
<div class="label fill" v-text="item.label"/>
|
||||||
|
<div class="value" v-text="item.value"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.processPie {
|
||||||
|
.progress {
|
||||||
|
position: relative;
|
||||||
|
margin-right: 60px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 84px;
|
||||||
|
height: 84px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 1px solid #66798a66;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.percentage {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #02FEFF;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 23px;
|
||||||
|
font-family: DINAlternate;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-bottom: 25px;
|
||||||
|
height: 32px;
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
margin-right: 25px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #9BB7D4;
|
||||||
|
letter-spacing: 0;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "●";
|
||||||
|
color: #66798a66;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-of-type > .label:before {
|
||||||
|
color: #5AF9F0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
letter-spacing: 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -66,7 +66,7 @@ export default {
|
|||||||
classic: Classic,
|
classic: Classic,
|
||||||
black: Primary,
|
black: Primary,
|
||||||
}[v.type]),
|
}[v.type]),
|
||||||
backgroundImage: v => v.background ? `url(${v.background})` : undefined
|
backgroundImage: v => v.background ? `url("${v.background}")` : undefined
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
title: {
|
title: {
|
||||||
|
|||||||
@@ -383,7 +383,21 @@ export const chartTpl = [{
|
|||||||
config: 'pieChart3',
|
config: 'pieChart3',
|
||||||
sourceDataId: '',
|
sourceDataId: '',
|
||||||
dynamicData: []
|
dynamicData: []
|
||||||
}]
|
}, {
|
||||||
|
type: 'summary',
|
||||||
|
label: '进度饼图',
|
||||||
|
title: '进度饼图',
|
||||||
|
border: 'border15',
|
||||||
|
display: 'processPie',
|
||||||
|
width: 500,
|
||||||
|
height: 300,
|
||||||
|
zIndex: 1,
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/processPieChart.png',
|
||||||
|
dataType: 'staticData',
|
||||||
|
staticData: {name: '综合调处率', label: "累计调解成功", v1: 23, totalLabel: "累计排查受理", total: 33},
|
||||||
|
},]
|
||||||
}]
|
}]
|
||||||
|
|
||||||
const customHtml = {
|
const customHtml = {
|
||||||
@@ -767,9 +781,9 @@ export class DvCompData {
|
|||||||
|
|
||||||
getData() {
|
getData() {
|
||||||
return this.type == 'staticData' ? this.getStaticData() :
|
return this.type == 'staticData' ? this.getStaticData() :
|
||||||
this.type == 'htmlData' ? this.getStaticData() :
|
this.type == 'htmlData' ? this.getStaticData() :
|
||||||
this.type == 'dynamicData' ? this.getDynamicData() :
|
this.type == 'dynamicData' ? this.getDynamicData() :
|
||||||
this.type == 'apiData' ? this.getApiData() : []
|
this.type == 'apiData' ? this.getApiData() : []
|
||||||
}
|
}
|
||||||
|
|
||||||
getDynamicData() {
|
getDynamicData() {
|
||||||
@@ -793,8 +807,8 @@ export class DvCompData {
|
|||||||
return this.instance.post(api).then(res => {
|
return this.instance.post(api).then(res => {
|
||||||
if (res?.data) {
|
if (res?.data) {
|
||||||
const list = res.data,
|
const list = res.data,
|
||||||
firstRecord = list?.[0] || {},
|
firstRecord = list?.[0] || {},
|
||||||
keys = Object.keys(firstRecord)
|
keys = Object.keys(firstRecord)
|
||||||
let meta = []
|
let meta = []
|
||||||
if (['AiDvTable', 'table'].includes(this.params.type)) {
|
if (['AiDvTable', 'table'].includes(this.params.type)) {
|
||||||
meta = keys.map(v => {
|
meta = keys.map(v => {
|
||||||
|
|||||||
@@ -17,7 +17,10 @@
|
|||||||
<div class="layout-left" :class="{hide:leftHide}">
|
<div class="layout-left" :class="{hide:leftHide}">
|
||||||
<h2 class="flex">
|
<h2 class="flex">
|
||||||
<div class="fill">全部资产</div>
|
<div class="fill">全部资产</div>
|
||||||
<el-button class="leftHideBtn" type="text" @click="leftHide=!leftHide">{{ leftHide ? "展开" : "收起" }}</el-button>
|
<el-button class="leftHideBtn" type="text" @click="leftHide=!leftHide">{{
|
||||||
|
leftHide ? "展开" : "收起"
|
||||||
|
}}
|
||||||
|
</el-button>
|
||||||
</h2>
|
</h2>
|
||||||
<div class="layout-left__wrapper">
|
<div class="layout-left__wrapper">
|
||||||
<div class="layout-left__left">
|
<div class="layout-left__left">
|
||||||
@@ -306,6 +309,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return []
|
return []
|
||||||
|
},
|
||||||
|
comps: v => {
|
||||||
|
const obj = {}
|
||||||
|
v.components.map(e => e.list.map(c => c.list.map(com => {
|
||||||
|
obj[com.type] = com
|
||||||
|
})))
|
||||||
|
return obj
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@@ -378,7 +388,7 @@ export default {
|
|||||||
id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
|
id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => {
|
||||||
if (res?.data) {
|
if (res?.data) {
|
||||||
const data = JSON.parse(res.data.config)
|
const data = JSON.parse(res.data.config)
|
||||||
this.componentList = data.config.filter(Boolean)
|
this.componentList = data.config.filter(Boolean).map(e => ({...this.comps[e.type], ...e}))
|
||||||
this.dashboard = data.dashboard
|
this.dashboard = data.dashboard
|
||||||
this.images = data.images || []
|
this.images = data.images || []
|
||||||
}
|
}
|
||||||
@@ -408,7 +418,7 @@ export default {
|
|||||||
}).then(res => {
|
}).then(res => {
|
||||||
if (res?.code == 0) {
|
if (res?.code == 0) {
|
||||||
this.$message.success('保存成功')
|
this.$message.success('保存成功')
|
||||||
this.back(res.data)
|
this.getInfo(this.$route.query.did)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user