diff --git a/components/AiEchart/echartTpls.js b/components/AiEchart/echartTpls.js index 371b408a..30f78cd4 100644 --- a/components/AiEchart/echartTpls.js +++ b/components/AiEchart/echartTpls.js @@ -1,35 +1,7 @@ -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" +import pie from "./template/pie" +import line from "./template/line"; +import bar from "./template/bar"; export default { - barChart1, - barChart2, - barChart3, - barChart5, - barChart7, - barChart8, - barChart9, - lineChart1, - lineChart2, - lineChart3, - lineChart4, - lineChart5, - pieChart1, - pieChart2, - pieChart3 + ...bar, ...line, ...pie } diff --git a/components/AiEchart/template/bar.js b/components/AiEchart/template/bar.js new file mode 100644 index 00000000..aeb0d576 --- /dev/null +++ b/components/AiEchart/template/bar.js @@ -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, +} \ No newline at end of file diff --git a/components/AiEchart/template/bar/barChart1.js b/components/AiEchart/template/bar/barChart1.js deleted file mode 100644 index 185bbc07..00000000 --- a/components/AiEchart/template/bar/barChart1.js +++ /dev/null @@ -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: {} - } -} diff --git a/components/AiEchart/template/bar/barChart2.js b/components/AiEchart/template/bar/barChart2.js deleted file mode 100644 index d66c7e24..00000000 --- a/components/AiEchart/template/bar/barChart2.js +++ /dev/null @@ -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} -} diff --git a/components/AiEchart/template/bar/barChart3.js b/components/AiEchart/template/bar/barChart3.js deleted file mode 100644 index 8ddff56e..00000000 --- a/components/AiEchart/template/bar/barChart3.js +++ /dev/null @@ -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)'}] - } - } - } - } -} diff --git a/components/AiEchart/template/bar/barChart5.js b/components/AiEchart/template/bar/barChart5.js deleted file mode 100644 index 8be592fa..00000000 --- a/components/AiEchart/template/bar/barChart5.js +++ /dev/null @@ -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, - }, -} diff --git a/components/AiEchart/template/bar/barChart7.js b/components/AiEchart/template/bar/barChart7.js deleted file mode 100644 index 589e1fce..00000000 --- a/components/AiEchart/template/bar/barChart7.js +++ /dev/null @@ -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'}] - } - } - } - } -} diff --git a/components/AiEchart/template/bar/barChart8.js b/components/AiEchart/template/bar/barChart8.js deleted file mode 100644 index f77b2bac..00000000 --- a/components/AiEchart/template/bar/barChart8.js +++ /dev/null @@ -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}] - }) - }, - } -} diff --git a/components/AiEchart/template/bar/barChart9.js b/components/AiEchart/template/bar/barChart9.js deleted file mode 100644 index 00d5b53c..00000000 --- a/components/AiEchart/template/bar/barChart9.js +++ /dev/null @@ -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)'} - } -} diff --git a/components/AiEchart/template/line.js b/components/AiEchart/template/line.js new file mode 100644 index 00000000..b653fb7e --- /dev/null +++ b/components/AiEchart/template/line.js @@ -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, +} \ No newline at end of file diff --git a/components/AiEchart/template/line/lineChart1.js b/components/AiEchart/template/line/lineChart1.js deleted file mode 100644 index 7f223d7f..00000000 --- a/components/AiEchart/template/line/lineChart1.js +++ /dev/null @@ -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) } - ] - } - } - }) -}; diff --git a/components/AiEchart/template/line/lineChart2.js b/components/AiEchart/template/line/lineChart2.js deleted file mode 100644 index daf019b9..00000000 --- a/components/AiEchart/template/line/lineChart2.js +++ /dev/null @@ -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)}, - ] - } - } - }) -} diff --git a/components/AiEchart/template/line/lineChart3.js b/components/AiEchart/template/line/lineChart3.js deleted file mode 100644 index 9f0d2633..00000000 --- a/components/AiEchart/template/line/lineChart3.js +++ /dev/null @@ -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 - } - } -} diff --git a/components/AiEchart/template/line/lineChart4.js b/components/AiEchart/template/line/lineChart4.js deleted file mode 100644 index ccb0dde4..00000000 --- a/components/AiEchart/template/line/lineChart4.js +++ /dev/null @@ -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' - } - } -} diff --git a/components/AiEchart/template/line/lineChart5.js b/components/AiEchart/template/line/lineChart5.js deleted file mode 100644 index 6badb234..00000000 --- a/components/AiEchart/template/line/lineChart5.js +++ /dev/null @@ -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)}, - ] - } - } - }) -} diff --git a/components/AiEchart/template/pie.js b/components/AiEchart/template/pie.js new file mode 100644 index 00000000..b0fee2e0 --- /dev/null +++ b/components/AiEchart/template/pie.js @@ -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 +} \ No newline at end of file diff --git a/components/AiEchart/template/pie/pieChart1.js b/components/AiEchart/template/pie/pieChart1.js deleted file mode 100644 index 6b93efdb..00000000 --- a/components/AiEchart/template/pie/pieChart1.js +++ /dev/null @@ -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 - } - } -} diff --git a/components/AiEchart/template/pie/pieChart2.js b/components/AiEchart/template/pie/pieChart2.js deleted file mode 100644 index fcbf9823..00000000 --- a/components/AiEchart/template/pie/pieChart2.js +++ /dev/null @@ -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, "总量") - ] - ) - } -} diff --git a/components/AiEchart/template/pie/pieChart3.js b/components/AiEchart/template/pie/pieChart3.js deleted file mode 100644 index 88417746..00000000 --- a/components/AiEchart/template/pie/pieChart3.js +++ /dev/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' - } - }, "总量") - ] - ) - } -} diff --git a/components/layout/AiDvSummary/AiDvSummary.vue b/components/layout/AiDvSummary/AiDvSummary.vue index 1b0a15a4..d5a6eaa8 100644 --- a/components/layout/AiDvSummary/AiDvSummary.vue +++ b/components/layout/AiDvSummary/AiDvSummary.vue @@ -26,11 +26,13 @@ import Summary17 from './components/Summary17' import Summary18 from './components/Summary18' import Summary19 from "./components/Summary19"; import Summary20 from "./components/Summary20"; +import ProcessPie from "./components/processPie.vue"; export default { name: 'AiDvSummary', components: { + ProcessPie, Summary20, Summary19, Summary0, diff --git a/components/layout/AiDvSummary/components/processPie.vue b/components/layout/AiDvSummary/components/processPie.vue new file mode 100644 index 00000000..9f60b6b8 --- /dev/null +++ b/components/layout/AiDvSummary/components/processPie.vue @@ -0,0 +1,132 @@ + + + + + \ No newline at end of file diff --git a/components/layout/AiDvWrapper/AiDvWrapper.vue b/components/layout/AiDvWrapper/AiDvWrapper.vue index 8a9329e2..61b17f8b 100644 --- a/components/layout/AiDvWrapper/AiDvWrapper.vue +++ b/components/layout/AiDvWrapper/AiDvWrapper.vue @@ -66,7 +66,7 @@ export default { classic: Classic, black: Primary, }[v.type]), - backgroundImage: v => v.background ? `url(${v.background})` : undefined + backgroundImage: v => v.background ? `url("${v.background}")` : undefined }, watch: { title: { diff --git a/packages/bigscreen/designer/config.js b/packages/bigscreen/designer/config.js index 8aebb8ee..f8e658ab 100644 --- a/packages/bigscreen/designer/config.js +++ b/packages/bigscreen/designer/config.js @@ -383,7 +383,21 @@ export const chartTpl = [{ config: 'pieChart3', sourceDataId: '', 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 = { @@ -767,9 +781,9 @@ export class DvCompData { getData() { return this.type == 'staticData' ? this.getStaticData() : - this.type == 'htmlData' ? this.getStaticData() : - this.type == 'dynamicData' ? this.getDynamicData() : - this.type == 'apiData' ? this.getApiData() : [] + this.type == 'htmlData' ? this.getStaticData() : + this.type == 'dynamicData' ? this.getDynamicData() : + this.type == 'apiData' ? this.getApiData() : [] } getDynamicData() { @@ -793,8 +807,8 @@ export class DvCompData { return this.instance.post(api).then(res => { if (res?.data) { const list = res.data, - firstRecord = list?.[0] || {}, - keys = Object.keys(firstRecord) + firstRecord = list?.[0] || {}, + keys = Object.keys(firstRecord) let meta = [] if (['AiDvTable', 'table'].includes(this.params.type)) { meta = keys.map(v => { diff --git a/packages/bigscreen/designer/viewport.vue b/packages/bigscreen/designer/viewport.vue index 10920c33..9b925a09 100644 --- a/packages/bigscreen/designer/viewport.vue +++ b/packages/bigscreen/designer/viewport.vue @@ -17,7 +17,10 @@

全部资产
- {{ leftHide ? "展开" : "收起" }} + {{ + leftHide ? "展开" : "收起" + }} +

@@ -306,6 +309,13 @@ export default { } return [] + }, + comps: v => { + const obj = {} + v.components.map(e => e.list.map(c => c.list.map(com => { + obj[com.type] = com + }))) + return obj } }, mounted() { @@ -378,7 +388,7 @@ export default { id && this.instance.post(`/app/appdiylargescreen/queryLargeScreenDetailById?id=${id}`).then(res => { if (res?.data) { 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.images = data.images || [] } @@ -408,7 +418,7 @@ export default { }).then(res => { if (res?.code == 0) { this.$message.success('保存成功') - this.back(res.data) + this.getInfo(this.$route.query.did) } }) },