From 6ce3097c374bddafdf040b15cc12abc2c0df05a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Thu, 24 Jul 2025 17:44:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=9C=8B=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/boardGenerate/index1.vue | 176 ++++++++++++++++- .../nodes/board/backgroundBarNode.vue | 187 ++++++++++++------ .../boardGenerate/nodes/board/barNode.vue | 79 +++++--- .../boardGenerate/nodes/board/curveNode.vue | 159 +++++++++++---- .../boardGenerate/nodes/board/lineNode.vue | 101 ++++++++-- .../nodes/board/multiLinesNode.vue | 106 +++++----- src/views/boardGenerate/tool.js | 168 +++++++++++++++- 7 files changed, 784 insertions(+), 192 deletions(-) diff --git a/src/views/boardGenerate/index1.vue b/src/views/boardGenerate/index1.vue index deb74d8..3c0472f 100644 --- a/src/views/boardGenerate/index1.vue +++ b/src/views/boardGenerate/index1.vue @@ -559,17 +559,184 @@
- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + @@ -583,7 +750,7 @@ - + 配置表格 @@ -1260,6 +1427,7 @@ const logEvent = async (eventname, event) => { nodeAttrForm.value = event.node.data.options; nodeDataForm.value = event.node; customDataForm.value = event.node.data.customData; + console.log(nodeDataForm.value); break; case 'nodeDrag': console.log(event.nodes); diff --git a/src/views/boardGenerate/nodes/board/backgroundBarNode.vue b/src/views/boardGenerate/nodes/board/backgroundBarNode.vue index dd008bc..cc8157a 100644 --- a/src/views/boardGenerate/nodes/board/backgroundBarNode.vue +++ b/src/views/boardGenerate/nodes/board/backgroundBarNode.vue @@ -103,57 +103,76 @@ const defaultOption = { xAxis: [ { name: props.data?.options?.xName || '', + nameLocation: props.data?.options?.xNameLocation || 'end', type: 'category', + boundaryGap: props.data?.options?.boundaryGap || false, axisLine: { + show: props.data?.options?.xAxisLineShow || false, lineStyle: { - color: '#DCE2E8' + color: props.data?.options?.xAxisLineColor || '#DCE2E8' } }, axisTick: { - show: true - }, - axisLabel: { - interval: 0, - textStyle: { - color: '#fff' - }, - // 默认x轴字体大小 - fontSize: 12, - // margin:文字到x轴的距离 - margin: 3 - }, - axisPointer: { - label: { - padding: [0, 0, 0, 0], - margin: 0, - // 移入时的字体大小 - fontSize: 12 + show: props.data?.options?.xAxisTickShow || false, + inside: props.data?.options?.xAxisTickInside || false, + lineStyle: { + color: props.data?.options?.xAxisTickColor || '#DCE2E8' } }, - boundaryGap: true + axisLabel: { + show: props.data?.options?.xAxisLabelShow || false, + interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.xAxisLabelInside || false, + formatter: props.data?.options?.xAxisLabelFormatter || null, + rotate: props.data?.options?.xAxisLabelRotate || 0, + color: props.data?.options?.xAxisLabelColor || '#fff', + fontSize: props.data?.options?.xAxisLabelFontSize || 12, + margin: props.data?.options?.xAxisLabelMargin || 3 + }, + splitLine: { + show: props.data?.options?.xAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.xAxisSplitLineType || 'solid' + } + } } ], yAxis: [ { name: props.data?.options?.yName || '', + nameLocation: props.data?.options?.yNameLocation || 'end', type: 'value', - axisTick: { - show: false - }, axisLine: { - show: true, + show: props.data?.options?.yAxisLineShow || false, lineStyle: { - color: '#fff' + color: props.data?.options?.yAxisLineColor || '#DCE2E8' + } + }, + axisTick: { + show: props.data?.options?.yAxisTickShow || false, + inside: props.data?.options?.yAxisTickInside || false, + lineStyle: { + color: props.data?.options?.yAxisTickColor || '#DCE2E8' } }, axisLabel: { - textStyle: { - color: '#fff' - } + show: props.data?.options?.yAxisLabelShow || false, + interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.yAxisLabelInside || false, + formatter: props.data?.options?.yAxisLabelFormatter || null, + rotate: props.data?.options?.yAxisLabelRotate || 0, + color: props.data?.options?.yAxisLabelColor || '#fff', + fontSize: props.data?.options?.yAxisLabelFontSize || 12, + margin: props.data?.options?.yAxisLabelMargin || 3 }, splitLine: { - show: false - } + show: props.data?.options?.yAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.yAxisSplitLineType || 'solid' + } + }, } ], series: [ @@ -161,19 +180,11 @@ const defaultOption = { type: 'bar', showBackground: true, backgroundStyle: { - color: 'rgba(180, 180, 180, 0.2)' + color: props.data?.options?.backgroundColor || 'rgba(180, 180, 180, 0.2)' }, itemStyle: { normal: { - color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ - offset: 0, - color: '#0372FF' - }, - { - offset: 1, - color: '#75ECFF' - } - ]) + color: '#0372FF' } }, barMaxWidth: 50, @@ -205,25 +216,87 @@ const getOption = () => { bottom: options?.gridBottom + '%' || '20%', right: options?.gridRight + '%' || '20%' }, - xAxis: [ - { - name: options?.xName || '' - } - ], - yAxis: [ - { - name: options?.yName || '' - } - ], - series: [ - { - backgroundStyle: { - color: options?.backgroundColor || 'rgba(180, 180, 180, 0.2)' + xAxis: [ + { + name: props.data?.options?.xName || '', + nameLocation: props.data?.options?.xNameLocation || 'end', + boundaryGap: props.data?.options?.boundaryGap || false, + axisLine: { + show: props.data?.options?.xAxisLineShow || false, + lineStyle: { + color: props.data?.options?.xAxisLineColor || '#DCE2E8' + } + }, + axisTick: { + show: props.data?.options?.xAxisTickShow || false, + inside: props.data?.options?.xAxisTickInside || false, + lineStyle: { + color: props.data?.options?.xAxisTickColor || '#DCE2E8' + } + }, + axisLabel: { + show: props.data?.options?.xAxisLabelShow || false, + interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.xAxisLabelInside || false, + formatter: props.data?.options?.xAxisLabelFormatter || null, + rotate: props.data?.options?.xAxisLabelRotate || 0, + color: props.data?.options?.xAxisLabelColor || '#fff', + fontSize: props.data?.options?.xAxisLabelFontSize || 12, + margin: props.data?.options?.xAxisLabelMargin || 3 + }, + splitLine: { + show: props.data?.options?.xAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.xAxisSplitLineType || 'solid' } } - ] - } - ; + } + ], + yAxis: [ + { + name: props.data?.options?.yName || '', + nameLocation: props.data?.options?.yNameLocation || 'end', + axisLine: { + show: props.data?.options?.yAxisLineShow || false, + lineStyle: { + color: props.data?.options?.yAxisLineColor || '#DCE2E8' + } + }, + axisTick: { + show: props.data?.options?.yAxisTickShow || false, + inside: props.data?.options?.yAxisTickInside || false, + lineStyle: { + color: props.data?.options?.yAxisTickColor || '#DCE2E8' + } + }, + axisLabel: { + show: props.data?.options?.yAxisLabelShow || false, + interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.yAxisLabelInside || false, + formatter: props.data?.options?.yAxisLabelFormatter || null, + rotate: props.data?.options?.yAxisLabelRotate || 0, + color: props.data?.options?.yAxisLabelColor || '#fff', + fontSize: props.data?.options?.yAxisLabelFontSize || 12, + margin: props.data?.options?.yAxisLabelMargin || 3 + }, + splitLine: { + show: props.data?.options?.yAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.yAxisSplitLineType || 'solid' + } + } + } + ], + series: [ + { + backgroundStyle: { + color: options?.backgroundColor || 'rgba(180, 180, 180, 0.2)' + } + } + ] + }; let xData = [data?.x1 || []]; let yData = [data?.y1 || []]; let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length)); diff --git a/src/views/boardGenerate/nodes/board/barNode.vue b/src/views/boardGenerate/nodes/board/barNode.vue index a65ac90..f52d22f 100644 --- a/src/views/boardGenerate/nodes/board/barNode.vue +++ b/src/views/boardGenerate/nodes/board/barNode.vue @@ -103,57 +103,76 @@ const defaultOption = { xAxis: [ { name: props.data?.options?.xName || '', + nameLocation: props.data?.options?.xNameLocation || 'end', type: 'category', + boundaryGap: props.data?.options?.boundaryGap || false, axisLine: { + show: props.data?.options?.xAxisLineShow || false, lineStyle: { - color: '#DCE2E8' + color: props.data?.options?.xAxisLineColor || '#DCE2E8' } }, axisTick: { - show: true - }, - axisLabel: { - interval: 0, - textStyle: { - color: '#fff' - }, - // 默认x轴字体大小 - fontSize: 12, - // margin:文字到x轴的距离 - margin: 3 - }, - axisPointer: { - label: { - padding: [0, 0, 0, 0], - margin: 0, - // 移入时的字体大小 - fontSize: 12 + show: props.data?.options?.xAxisTickShow || false, + inside: props.data?.options?.xAxisTickInside || false, + lineStyle: { + color: props.data?.options?.xAxisTickColor || '#DCE2E8' } }, - boundaryGap: true + axisLabel: { + show: props.data?.options?.xAxisLabelShow || false, + interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.xAxisLabelInside || false, + formatter: props.data?.options?.xAxisLabelFormatter || null, + rotate: props.data?.options?.xAxisLabelRotate || 0, + color: props.data?.options?.xAxisLabelColor || '#fff', + fontSize: props.data?.options?.xAxisLabelFontSize || 12, + margin: props.data?.options?.xAxisLabelMargin || 3 + }, + splitLine: { + show: props.data?.options?.xAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.xAxisSplitLineType || 'solid' + } + } } ], yAxis: [ { name: props.data?.options?.yName || '', + nameLocation: props.data?.options?.yNameLocation || 'end', type: 'value', - axisTick: { - show: false - }, axisLine: { - show: true, + show: props.data?.options?.yAxisLineShow || false, lineStyle: { - color: '#fff' + color: props.data?.options?.yAxisLineColor || '#DCE2E8' + } + }, + axisTick: { + show: props.data?.options?.yAxisTickShow || false, + inside: props.data?.options?.yAxisTickInside || false, + lineStyle: { + color: props.data?.options?.yAxisTickColor || '#DCE2E8' } }, axisLabel: { - textStyle: { - color: '#fff' - } + show: props.data?.options?.yAxisLabelShow || false, + interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.yAxisLabelInside || false, + formatter: props.data?.options?.yAxisLabelFormatter || null, + rotate: props.data?.options?.yAxisLabelRotate || 0, + color: props.data?.options?.yAxisLabelColor || '#fff', + fontSize: props.data?.options?.yAxisLabelFontSize || 12, + margin: props.data?.options?.yAxisLabelMargin || 3 }, splitLine: { - show: false - } + show: props.data?.options?.yAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.yAxisSplitLineType || 'solid' + } + }, } ], series: [ diff --git a/src/views/boardGenerate/nodes/board/curveNode.vue b/src/views/boardGenerate/nodes/board/curveNode.vue index 7445458..3ff3b7d 100644 --- a/src/views/boardGenerate/nodes/board/curveNode.vue +++ b/src/views/boardGenerate/nodes/board/curveNode.vue @@ -103,67 +103,86 @@ const defaultOption = { xAxis: [ { name: props.data?.options?.xName || '', + nameLocation: props.data?.options?.xNameLocation || 'end', type: 'category', + boundaryGap: props.data?.options?.boundaryGap || false, axisLine: { + show: props.data?.options?.xAxisLineShow || false, lineStyle: { - color: '#DCE2E8' + color: props.data?.options?.xAxisLineColor || '#DCE2E8' } }, axisTick: { - show: true - }, - axisLabel: { - interval: 0, - textStyle: { - color: '#fff' - }, - // 默认x轴字体大小 - fontSize: 12, - // margin:文字到x轴的距离 - margin: 3 - }, - axisPointer: { - label: { - padding: [0, 0, 0, 0], - margin: 0, - // 移入时的字体大小 - fontSize: 12 + show: props.data?.options?.xAxisTickShow || false, + inside: props.data?.options?.xAxisTickInside || false, + lineStyle: { + color: props.data?.options?.xAxisTickColor || '#DCE2E8' } }, - boundaryGap: true + axisLabel: { + show: props.data?.options?.xAxisLabelShow || false, + interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.xAxisLabelInside || false, + formatter: props.data?.options?.xAxisLabelFormatter || null, + rotate: props.data?.options?.xAxisLabelRotate || 0, + color: props.data?.options?.xAxisLabelColor || '#fff', + fontSize: props.data?.options?.xAxisLabelFontSize || 12, + margin: props.data?.options?.xAxisLabelMargin || 3 + }, + splitLine: { + show: props.data?.options?.xAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.xAxisSplitLineType || 'solid' + } + } } ], yAxis: [ { name: props.data?.options?.yName || '', + nameLocation: props.data?.options?.yNameLocation || 'end', type: 'value', - axisTick: { - show: false - }, axisLine: { - show: true, + show: props.data?.options?.yAxisLineShow || false, lineStyle: { - color: '#fff' + color: props.data?.options?.yAxisLineColor || '#DCE2E8' + } + }, + axisTick: { + show: props.data?.options?.yAxisTickShow || false, + inside: props.data?.options?.yAxisTickInside || false, + lineStyle: { + color: props.data?.options?.yAxisTickColor || '#DCE2E8' } }, axisLabel: { - textStyle: { - color: '#fff' - } + show: props.data?.options?.yAxisLabelShow || false, + interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.yAxisLabelInside || false, + formatter: props.data?.options?.yAxisLabelFormatter || null, + rotate: props.data?.options?.yAxisLabelRotate || 0, + color: props.data?.options?.yAxisLabelColor || '#fff', + fontSize: props.data?.options?.yAxisLabelFontSize || 12, + margin: props.data?.options?.yAxisLabelMargin || 3 }, splitLine: { - show: false - } + show: props.data?.options?.yAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.yAxisSplitLineType || 'solid' + } + }, } ], series: [ { type: 'line', - symbolSize: 1, - symbol: 'circle', + showSymbol: props.data?.options?.lineSymbolShow || false, + symbolSize: props.data?.options?.lineSymbolSize || 5, + symbol: props.data?.options?.lineSymbolType || 'circle', smooth: true, yAxisIndex: 0, - showSymbol: false, lineStyle: { width: 1, color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ @@ -208,12 +227,82 @@ const getOption = () => { }, xAxis: [ { - name: props.data?.options?.xName || '' + name: props.data?.options?.xName || '', + nameLocation: props.data?.options?.xNameLocation || 'end', + boundaryGap: props.data?.options?.boundaryGap || false, + axisLine: { + show: props.data?.options?.xAxisLineShow || false, + lineStyle: { + color: props.data?.options?.xAxisLineColor || '#DCE2E8' + } + }, + axisTick: { + show: props.data?.options?.xAxisTickShow || false, + inside: props.data?.options?.xAxisTickInside || false, + lineStyle: { + color: props.data?.options?.xAxisTickColor || '#DCE2E8' + } + }, + axisLabel: { + show: props.data?.options?.xAxisLabelShow || false, + interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.xAxisLabelInside || false, + formatter: props.data?.options?.xAxisLabelFormatter || null, + rotate: props.data?.options?.xAxisLabelRotate || 0, + color: props.data?.options?.xAxisLabelColor || '#fff', + fontSize: props.data?.options?.xAxisLabelFontSize || 12, + margin: props.data?.options?.xAxisLabelMargin || 3 + }, + splitLine: { + show: props.data?.options?.xAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.xAxisSplitLineType || 'solid' + } + } } ], yAxis: [ { - name: props.data?.options?.yName || '' + name: props.data?.options?.yName || '', + nameLocation: props.data?.options?.yNameLocation || 'end', + axisLine: { + show: props.data?.options?.yAxisLineShow || false, + lineStyle: { + color: props.data?.options?.yAxisLineColor || '#DCE2E8' + } + }, + axisTick: { + show: props.data?.options?.yAxisTickShow || false, + inside: props.data?.options?.yAxisTickInside || false, + lineStyle: { + color: props.data?.options?.yAxisTickColor || '#DCE2E8' + } + }, + axisLabel: { + show: props.data?.options?.yAxisLabelShow || false, + interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.yAxisLabelInside || false, + formatter: props.data?.options?.yAxisLabelFormatter || null, + rotate: props.data?.options?.yAxisLabelRotate || 0, + color: props.data?.options?.yAxisLabelColor || '#fff', + fontSize: props.data?.options?.yAxisLabelFontSize || 12, + margin: props.data?.options?.yAxisLabelMargin || 3 + }, + splitLine: { + show: props.data?.options?.yAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.yAxisSplitLineType || 'solid' + } + } + } + ], + series: [ + { + showSymbol: props.data?.options?.lineSymbolShow || false, + symbolSize: props.data?.options?.lineSymbolSize || 5, + symbol: props.data?.options?.lineSymbolType || 'circle' } ] }; diff --git a/src/views/boardGenerate/nodes/board/lineNode.vue b/src/views/boardGenerate/nodes/board/lineNode.vue index 2eeb1a1..ca36207 100644 --- a/src/views/boardGenerate/nodes/board/lineNode.vue +++ b/src/views/boardGenerate/nodes/board/lineNode.vue @@ -48,7 +48,7 @@ const props = defineProps({ }); const chartRef = ref(); let chart = null; -const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']; +const colorList = ref(['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']); const defaultOption = { title: { text: props.data.options.title || '', @@ -114,6 +114,7 @@ const defaultOption = { }, axisTick: { show: props.data?.options?.xAxisTickShow || false, + inside: props.data?.options?.xAxisTickInside || false, lineStyle: { color: props.data?.options?.xAxisTickColor || '#DCE2E8' } @@ -140,6 +141,7 @@ const defaultOption = { yAxis: [ { name: props.data?.options?.yName || '', + nameLocation: props.data?.options?.yNameLocation || 'end', type: 'value', axisLine: { show: props.data?.options?.yAxisLineShow || false, @@ -149,6 +151,7 @@ const defaultOption = { }, axisTick: { show: props.data?.options?.yAxisTickShow || false, + inside: props.data?.options?.yAxisTickInside || false, lineStyle: { color: props.data?.options?.yAxisTickColor || '#DCE2E8' } @@ -175,31 +178,23 @@ const defaultOption = { series: [ { type: 'line', - symbolSize: 1, - symbol: 'circle', + showSymbol: props.data?.options?.lineSymbolShow || false, + symbolSize: props.data?.options?.lineSymbolSize || 5, + symbol: props.data?.options?.lineSymbolType || 'circle', smooth: false, yAxisIndex: 0, - showSymbol: false, lineStyle: { width: 1, - color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ - { - offset: 0, - color: '#9effff' - }, - { - offset: 1, - color: '#9E87FF' - } - ]), + color: colorList.value[0], shadowColor: 'rgba(158,135,255, 0.3)', shadowBlur: 10, shadowOffsetY: 20 }, itemStyle: { normal: { - color: colorList[0], - borderColor: colorList[0] + color: colorList.value[0], + borderColor: colorList.value[0], + borderWidth: 1 } } } @@ -224,12 +219,82 @@ const getOption = () => { }, xAxis: [ { - name: props.data?.options?.xName || '' + name: props.data?.options?.xName || '', + nameLocation: props.data?.options?.xNameLocation || 'end', + boundaryGap: props.data?.options?.boundaryGap || false, + axisLine: { + show: props.data?.options?.xAxisLineShow || false, + lineStyle: { + color: props.data?.options?.xAxisLineColor || '#DCE2E8' + } + }, + axisTick: { + show: props.data?.options?.xAxisTickShow || false, + inside: props.data?.options?.xAxisTickInside || false, + lineStyle: { + color: props.data?.options?.xAxisTickColor || '#DCE2E8' + } + }, + axisLabel: { + show: props.data?.options?.xAxisLabelShow || false, + interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.xAxisLabelInside || false, + formatter: props.data?.options?.xAxisLabelFormatter || null, + rotate: props.data?.options?.xAxisLabelRotate || 0, + color: props.data?.options?.xAxisLabelColor || '#fff', + fontSize: props.data?.options?.xAxisLabelFontSize || 12, + margin: props.data?.options?.xAxisLabelMargin || 3 + }, + splitLine: { + show: props.data?.options?.xAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.xAxisSplitLineType || 'solid' + } + } } ], yAxis: [ { - name: props.data?.options?.yName || '' + name: props.data?.options?.yName || '', + nameLocation: props.data?.options?.yNameLocation || 'end', + axisLine: { + show: props.data?.options?.yAxisLineShow || false, + lineStyle: { + color: props.data?.options?.yAxisLineColor || '#DCE2E8' + } + }, + axisTick: { + show: props.data?.options?.yAxisTickShow || false, + inside: props.data?.options?.yAxisTickInside || false, + lineStyle: { + color: props.data?.options?.yAxisTickColor || '#DCE2E8' + } + }, + axisLabel: { + show: props.data?.options?.yAxisLabelShow || false, + interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.yAxisLabelInside || false, + formatter: props.data?.options?.yAxisLabelFormatter || null, + rotate: props.data?.options?.yAxisLabelRotate || 0, + color: props.data?.options?.yAxisLabelColor || '#fff', + fontSize: props.data?.options?.yAxisLabelFontSize || 12, + margin: props.data?.options?.yAxisLabelMargin || 3 + }, + splitLine: { + show: props.data?.options?.yAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.yAxisSplitLineType || 'solid' + } + } + } + ], + series: [ + { + showSymbol: props.data?.options?.lineSymbolShow || false, + symbolSize: props.data?.options?.lineSymbolSize || 5, + symbol: props.data?.options?.lineSymbolType || 'circle' } ] }; diff --git a/src/views/boardGenerate/nodes/board/multiLinesNode.vue b/src/views/boardGenerate/nodes/board/multiLinesNode.vue index 70e0c93..dad90c8 100644 --- a/src/views/boardGenerate/nodes/board/multiLinesNode.vue +++ b/src/views/boardGenerate/nodes/board/multiLinesNode.vue @@ -48,7 +48,7 @@ const props = defineProps({ }); const chartRef = ref(); let chart = null; -const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']; +const colorList = ref(['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']); const sortData = (data) => { let obj = []; Object.keys(data).forEach((key) => { @@ -76,7 +76,7 @@ const getOption = () => { top: '5%' }, legend: { - show:props.data?.options?.legend||false, + show: props.data?.options?.legend || false, icon: 'circle', top: '5%', right: '5%', @@ -87,7 +87,7 @@ const getOption = () => { } }, tooltip: { - show:props.data?.options?.tooltip||false, + show: props.data?.options?.tooltip || false, trigger: 'axis', axisPointer: { label: { @@ -115,84 +115,96 @@ const getOption = () => { }, xAxis: [ { + name: props.data?.options?.xName || '', + nameLocation: props.data?.options?.xNameLocation || 'end', type: 'category', + boundaryGap: props.data?.options?.boundaryGap || false, axisLine: { + show: props.data?.options?.xAxisLineShow || false, lineStyle: { - color: '#DCE2E8' + color: props.data?.options?.xAxisLineColor || '#DCE2E8' } }, axisTick: { - show: true - }, - axisLabel: { - interval: 0, - textStyle: { - color: '#fff' - }, - // 默认x轴字体大小 - fontSize: 12, - // margin:文字到x轴的距离 - margin: 3 - }, - axisPointer: { - label: { - padding: [0, 0, 0, 0], - margin: 0, - // 移入时的字体大小 - fontSize: 12 + show: props.data?.options?.xAxisTickShow || false, + inside: props.data?.options?.xAxisTickInside || false, + lineStyle: { + color: props.data?.options?.xAxisTickColor || '#DCE2E8' } }, - boundaryGap: true + axisLabel: { + show: props.data?.options?.xAxisLabelShow || false, + interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.xAxisLabelInside || false, + formatter: props.data?.options?.xAxisLabelFormatter || null, + rotate: props.data?.options?.xAxisLabelRotate || 0, + color: props.data?.options?.xAxisLabelColor || '#fff', + fontSize: props.data?.options?.xAxisLabelFontSize || 12, + margin: props.data?.options?.xAxisLabelMargin || 3 + }, + splitLine: { + show: props.data?.options?.xAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.xAxisSplitLineType || 'solid' + } + } } ], yAxis: { + name: props.data?.options?.yName || '', + nameLocation: props.data?.options?.yNameLocation || 'end', type: 'value', - axisTick: { - show: false - }, axisLine: { - show: true, + show: props.data?.options?.yAxisLineShow || false, lineStyle: { - color: '#fff' + color: props.data?.options?.yAxisLineColor || '#DCE2E8' + } + }, + axisTick: { + show: props.data?.options?.yAxisTickShow || false, + inside: props.data?.options?.yAxisTickInside || false, + lineStyle: { + color: props.data?.options?.yAxisTickColor || '#DCE2E8' } }, axisLabel: { - textStyle: { - color: '#fff' - } + show: props.data?.options?.yAxisLabelShow || false, + interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto', + inside: props.data?.options?.yAxisLabelInside || false, + formatter: props.data?.options?.yAxisLabelFormatter || null, + rotate: props.data?.options?.yAxisLabelRotate || 0, + color: props.data?.options?.yAxisLabelColor || '#fff', + fontSize: props.data?.options?.yAxisLabelFontSize || 12, + margin: props.data?.options?.yAxisLabelMargin || 3 }, splitLine: { - show: false + show: props.data?.options?.yAxisSplitLineShow || false, + lineStyle: { + color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8', + type: props.data?.options?.yAxisSplitLineType || 'solid' + } } }, series: props.data.options?.yNames.map(() => { return { type: 'line', - symbolSize: 1, - symbol: 'circle', + showSymbol: props.data?.options?.lineSymbolShow || false, + symbolSize: props.data?.options?.lineSymbolSize || 5, + symbol: props.data?.options?.lineSymbolType || 'circle', smooth: false, yAxisIndex: 0, - showSymbol: false, lineStyle: { width: 1, - color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ - { - offset: 0, - color: '#9effff' - }, - { - offset: 1, - color: '#9E87FF' - } - ]), + color: colorList.value[0], shadowColor: 'rgba(158,135,255, 0.3)', shadowBlur: 10, shadowOffsetY: 20 }, itemStyle: { normal: { - color: colorList[0], - borderColor: colorList[0] + color: colorList.value[0], + borderColor: colorList.value[0] } } }; diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js index 804c01c..c92f23c 100644 --- a/src/views/boardGenerate/tool.js +++ b/src/views/boardGenerate/tool.js @@ -17,12 +17,13 @@ const getOption = (e) => { gridLeft: 5, gridBottom: 10, gridRight: 10, + boundaryGap: true, xName: '', xNameLocation: 'end', xAxisLineShow: true, - boundaryGap: true, xAxisLineColor: '#DCE2E8', xAxisTickShow: true, + xAxisTickInside: false, xAxisTickColor: '#DCE2E8', xAxisLabelShow: true, xAxisLabelInterval: false, @@ -36,6 +37,26 @@ const getOption = (e) => { xAxisSplitLineColor: '#DCE2E8', xAxisSplitLineType: 'solid', yName: '', + yNameLocation: 'end', + yAxisLineShow: true, + yAxisLineColor: '#DCE2E8', + yAxisTickShow: true, + yAxisTickInside: false, + yAxisTickColor: '#DCE2E8', + yAxisLabelShow: true, + yAxisLabelInterval: false, + yAxisLabelInside: false, + yAxisLabelRotate: 0, + yAxisLabelFormatter: '', + yAxisLabelColor: '#fff', + yAxisLabelFontSize: 12, + yAxisLabelMargin: 3, + yAxisSplitLineShow: false, + yAxisSplitLineColor: '#DCE2E8', + yAxisSplitLineType: 'solid', + lineSymbolShow: false, + lineSymbolSize: 5, + lineSymbolType: 'circle', tooltip: true, legend: true }; @@ -47,8 +68,43 @@ const getOption = (e) => { gridLeft: 5, gridBottom: 10, gridRight: 10, + boundaryGap: true, xName: '', + xNameLocation: 'end', + xAxisLineShow: true, + xAxisLineColor: '#DCE2E8', + xAxisTickShow: true, + xAxisTickInside: false, + xAxisTickColor: '#DCE2E8', + xAxisLabelShow: true, + xAxisLabelInterval: false, + xAxisLabelInside: false, + xAxisLabelRotate: 0, + xAxisLabelFormatter: '', + xAxisLabelColor: '#fff', + xAxisLabelFontSize: 12, + xAxisLabelMargin: 3, + xAxisSplitLineShow: false, + xAxisSplitLineColor: '#DCE2E8', + xAxisSplitLineType: 'solid', yName: '', + yNameLocation: 'end', + yAxisLineShow: true, + yAxisLineColor: '#DCE2E8', + yAxisTickShow: true, + yAxisTickInside: false, + yAxisTickColor: '#DCE2E8', + yAxisLabelShow: true, + yAxisLabelInterval: false, + yAxisLabelInside: false, + yAxisLabelRotate: 0, + yAxisLabelFormatter: '', + yAxisLabelColor: '#fff', + yAxisLabelFontSize: 12, + yAxisLabelMargin: 3, + yAxisSplitLineShow: false, + yAxisSplitLineColor: '#DCE2E8', + yAxisSplitLineType: 'solid', tooltip: true, legend: true }; @@ -60,8 +116,43 @@ const getOption = (e) => { gridLeft: 5, gridBottom: 10, gridRight: 10, + boundaryGap: true, xName: '', + xNameLocation: 'end', + xAxisLineShow: true, + xAxisLineColor: '#DCE2E8', + xAxisTickShow: true, + xAxisTickInside: false, + xAxisTickColor: '#DCE2E8', + xAxisLabelShow: true, + xAxisLabelInterval: false, + xAxisLabelInside: false, + xAxisLabelRotate: 0, + xAxisLabelFormatter: '', + xAxisLabelColor: '#fff', + xAxisLabelFontSize: 12, + xAxisLabelMargin: 3, + xAxisSplitLineShow: false, + xAxisSplitLineColor: '#DCE2E8', + xAxisSplitLineType: 'solid', yName: '', + yNameLocation: 'end', + yAxisLineShow: true, + yAxisLineColor: '#DCE2E8', + yAxisTickShow: true, + yAxisTickInside: false, + yAxisTickColor: '#DCE2E8', + yAxisLabelShow: true, + yAxisLabelInterval: false, + yAxisLabelInside: false, + yAxisLabelRotate: 0, + yAxisLabelFormatter: '', + yAxisLabelColor: '#fff', + yAxisLabelFontSize: 12, + yAxisLabelMargin: 3, + yAxisSplitLineShow: false, + yAxisSplitLineColor: '#DCE2E8', + yAxisSplitLineType: 'solid', tooltip: true, legend: true, backgroundColor: 'rgba(180, 180, 180, 0.2)' @@ -74,8 +165,46 @@ const getOption = (e) => { gridLeft: 5, gridBottom: 10, gridRight: 10, + boundaryGap: true, xName: '', + xNameLocation: 'end', + xAxisLineShow: true, + xAxisLineColor: '#DCE2E8', + xAxisTickShow: true, + xAxisTickInside: false, + xAxisTickColor: '#DCE2E8', + xAxisLabelShow: true, + xAxisLabelInterval: false, + xAxisLabelInside: false, + xAxisLabelRotate: 0, + xAxisLabelFormatter: '', + xAxisLabelColor: '#fff', + xAxisLabelFontSize: 12, + xAxisLabelMargin: 3, + xAxisSplitLineShow: false, + xAxisSplitLineColor: '#DCE2E8', + xAxisSplitLineType: 'solid', yName: '', + yNameLocation: 'end', + yAxisLineShow: true, + yAxisLineColor: '#DCE2E8', + yAxisTickShow: true, + yAxisTickInside: false, + yAxisTickColor: '#DCE2E8', + yAxisLabelShow: true, + yAxisLabelInterval: false, + yAxisLabelInside: false, + yAxisLabelRotate: 0, + yAxisLabelFormatter: '', + yAxisLabelColor: '#fff', + yAxisLabelFontSize: 12, + yAxisLabelMargin: 3, + yAxisSplitLineShow: false, + yAxisSplitLineColor: '#DCE2E8', + yAxisSplitLineType: 'solid', + lineSymbolShow: false, + lineSymbolSize: 5, + lineSymbolType: 'circle', tooltip: true, legend: true }; @@ -88,7 +217,44 @@ const getOption = (e) => { gridBottom: 10, gridRight: 10, xName: '', + xNameLocation: 'end', + xAxisLineShow: true, + xAxisLineColor: '#DCE2E8', + xAxisTickShow: true, + xAxisTickInside: false, + xAxisTickColor: '#DCE2E8', + xAxisLabelShow: true, + xAxisLabelInterval: false, + xAxisLabelInside: false, + xAxisLabelRotate: 0, + xAxisLabelFormatter: '', + xAxisLabelColor: '#fff', + xAxisLabelFontSize: 12, + xAxisLabelMargin: 3, + xAxisSplitLineShow: false, + xAxisSplitLineColor: '#DCE2E8', + xAxisSplitLineType: 'solid', yName: '', + yNameLocation: 'end', + yAxisLineShow: true, + yAxisLineColor: '#DCE2E8', + yAxisTickShow: true, + yAxisTickInside: false, + yAxisTickColor: '#DCE2E8', + yAxisLabelShow: true, + yAxisLabelInterval: false, + yAxisLabelInside: false, + yAxisLabelRotate: 0, + yAxisLabelFormatter: '', + yAxisLabelColor: '#fff', + yAxisLabelFontSize: 12, + yAxisLabelMargin: 3, + yAxisSplitLineShow: false, + yAxisSplitLineColor: '#DCE2E8', + yAxisSplitLineType: 'solid', + lineSymbolShow: false, + lineSymbolSize: 5, + lineSymbolType: 'circle', tooltip: true, legend: true };