diff --git a/src/views/boardGenerate/nodes/board/lineNode.vue b/src/views/boardGenerate/nodes/board/lineNode.vue index 1c9a895..2eeb1a1 100644 --- a/src/views/boardGenerate/nodes/board/lineNode.vue +++ b/src/views/boardGenerate/nodes/board/lineNode.vue @@ -103,7 +103,9 @@ 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: { @@ -119,35 +121,55 @@ const defaultOption = { 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 }, - boundaryGap: props.data?.options?.boundaryGap || false + 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 || '', 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, + 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/tool.js b/src/views/boardGenerate/tool.js index cedec87..804c01c 100644 --- a/src/views/boardGenerate/tool.js +++ b/src/views/boardGenerate/tool.js @@ -18,27 +18,67 @@ const getOption = (e) => { gridBottom: 10, gridRight: 10, xName: '', + xNameLocation: 'end', xAxisLineShow: true, + boundaryGap: true, xAxisLineColor: '#DCE2E8', xAxisTickShow: true, xAxisTickColor: '#DCE2E8', xAxisLabelShow: true, xAxisLabelInterval: false, + xAxisLabelInside: false, + xAxisLabelRotate: 0, xAxisLabelFormatter: '', xAxisLabelColor: '#fff', xAxisLabelFontSize: 12, xAxisLabelMargin: 3, - boundaryGap: true, + xAxisSplitLineShow: false, + xAxisSplitLineColor: '#DCE2E8', + xAxisSplitLineType: 'solid', yName: '', tooltip: true, legend: true }; } else if (e === 'bar' || e === 'multiBars') { - return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true }; + return { + title: '', + yNames: [], + gridTop: 30, + gridLeft: 5, + gridBottom: 10, + gridRight: 10, + xName: '', + yName: '', + tooltip: true, + legend: true + }; } else if (e === 'backgroundBar') { - return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true,backgroundColor:'rgba(180, 180, 180, 0.2)' }; + return { + title: '', + yNames: [], + gridTop: 30, + gridLeft: 5, + gridBottom: 10, + gridRight: 10, + xName: '', + yName: '', + tooltip: true, + legend: true, + backgroundColor: 'rgba(180, 180, 180, 0.2)' + }; } else if (e === 'curve' || e === 'multiCurves') { - return { title: '', yNames: [], gridTop: 30, gridLeft: 5, gridBottom: 10, gridRight: 10, xName: '', yName: '', tooltip:true, legend:true }; + return { + title: '', + yNames: [], + gridTop: 30, + gridLeft: 5, + gridBottom: 10, + gridRight: 10, + xName: '', + yName: '', + tooltip: true, + legend: true + }; } else if (e === 'lineBar') { return { title: '', @@ -83,7 +123,7 @@ const getOption = (e) => { } else if (e === 'video') { return { videoSrc: '' }; } else if (e === 'timeline') { - return { color: '#fff',timestampColor: '#fff', field: 'content', timestampField: 'timestamp', isTimestamp: true }; + return { color: '#fff', timestampColor: '#fff', field: 'content', timestampField: 'timestamp', isTimestamp: true }; } else if (e === 'scrollTable' || e === 'table') { return { tableOptions: [], @@ -94,7 +134,7 @@ const getOption = (e) => { tdColor: ['#fff'], thBgColor: '#fff', tdBgColor: ['#000'] - } + }; } else if (e === 'carousel') { return { swiperOptions: {}, imageFit: 'contain', carouselImages: [] }; } else if (e === 'background') { @@ -204,5 +244,5 @@ export const options = { } } return false; - },getId + }, getId };