From c6d8fa67790748da2b0ef3d2843ea4d71578b9f9 Mon Sep 17 00:00:00 2001 From: junjun Date: Mon, 17 Oct 2022 16:44:09 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=9D=90=E6=A0=87=E8=BD=B4=E8=BD=B4=E7=BA=BF=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/lang/en.js | 4 + frontend/src/lang/tw.js | 4 + frontend/src/lang/zh.js | 4 + frontend/src/views/chart/chart/chart.js | 24 +++++ .../src/views/chart/chart/common/common.js | 12 +++ .../views/chart/chart/common/common_antv.js | 50 ++++++++++- frontend/src/views/chart/chart/util.js | 88 +++++++++++++++++++ .../component-style/XAxisSelector.vue | 21 ++++- .../component-style/XAxisSelectorAntV.vue | 19 +++- .../component-style/YAxisExtSelector.vue | 21 ++++- .../component-style/YAxisExtSelectorAntV.vue | 19 +++- .../component-style/YAxisSelector.vue | 21 ++++- .../component-style/YAxisSelectorAntV.vue | 19 +++- 13 files changed, 281 insertions(+), 25 deletions(-) diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index ae9fccca6d..6b69e5c72f 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -1153,6 +1153,10 @@ export default { axis_color: 'Axis Color', axis_width: 'Axis Width', axis_type: 'Axis Type', + grid_show: 'Grid Show', + grid_color: 'Grid Color', + grid_width: 'Grid Width', + grid_type: 'Grid Type', axis_type_solid: 'Solid', axis_type_dashed: 'Dashed', axis_type_dotted: 'Dotted', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index 1b013c7bcf..9bc33d8555 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -1153,6 +1153,10 @@ export default { axis_color: '軸線顔色', axis_width: '軸線寬度', axis_type: '軸線類型', + grid_show: '網格線顯示', + grid_color: '網格線顏色', + grid_width: '網格線寬度', + grid_type: '網格線類型', axis_type_solid: '實線', axis_type_dashed: '虛線', axis_type_dotted: '點', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index 1aba1c25c4..da23333caf 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -1152,6 +1152,10 @@ export default { axis_color: '轴线颜色', axis_width: '轴线宽度', axis_type: '轴线类型', + grid_show: '网格线显示', + grid_color: '网格线颜色', + grid_width: '网格线宽度', + grid_type: '网格线类型', axis_type_solid: '实线', axis_type_dashed: '虚线', axis_type_dotted: '点', diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index d7c580b0c6..d82f56c37d 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -242,6 +242,14 @@ export const DEFAULT_XAXIS_STYLE = { rotate: 0, formatter: '{value}' }, + axisLine: { + show: true, + lineStyle: { + color: '#cccccc', + width: 1, + style: 'solid' + } + }, splitLine: { show: false, lineStyle: { @@ -280,6 +288,14 @@ export const DEFAULT_YAXIS_STYLE = { rotate: 0, formatter: '{value}' }, + axisLine: { + show: false, + lineStyle: { + color: '#cccccc', + width: 1, + style: 'solid' + } + }, splitLine: { show: true, lineStyle: { @@ -318,6 +334,14 @@ export const DEFAULT_YAXIS_EXT_STYLE = { rotate: 0, formatter: '{value}' }, + axisLine: { + show: false, + lineStyle: { + color: '#cccccc', + width: 1, + style: 'solid' + } + }, splitLine: { show: true, lineStyle: { diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js index 1d543e5167..f587aa76e2 100644 --- a/frontend/src/views/chart/chart/common/common.js +++ b/frontend/src/views/chart/chart/common/common.js @@ -67,6 +67,9 @@ export function componentStyle(chart_option, chart) { chart_option.xAxis.axisLabel = customStyle.xAxis.axisLabel chart_option.xAxis.splitLine = customStyle.xAxis.splitLine chart_option.xAxis.nameTextStyle = customStyle.xAxis.nameTextStyle + const axisLine = customStyle.xAxis.axisLine ? customStyle.xAxis.axisLine : DEFAULT_XAXIS_STYLE.axisLine + chart_option.xAxis.axisLine = axisLine + chart_option.xAxis.axisTick = axisLine chart_option.xAxis.axisLabel.showMaxLabel = true chart_option.xAxis.axisLabel.showMinLabel = true @@ -96,6 +99,9 @@ export function componentStyle(chart_option, chart) { chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel chart_option.yAxis.splitLine = customStyle.yAxis.splitLine chart_option.yAxis.nameTextStyle = customStyle.yAxis.nameTextStyle + const axisLine = customStyle.yAxis.axisLine ? customStyle.yAxis.axisLine : DEFAULT_YAXIS_STYLE.axisLine + chart_option.yAxis.axisLine = axisLine + chart_option.yAxis.axisTick = axisLine chart_option.yAxis.axisLabel.showMaxLabel = true chart_option.yAxis.axisLabel.showMinLabel = true @@ -125,6 +131,9 @@ export function componentStyle(chart_option, chart) { chart_option.yAxis[0].axisLabel = customStyle.yAxis.axisLabel chart_option.yAxis[0].splitLine = customStyle.yAxis.splitLine chart_option.yAxis[0].nameTextStyle = customStyle.yAxis.nameTextStyle + const axisLine0 = customStyle.yAxis[0].axisLine ? customStyle.yAxis[0].axisLine : DEFAULT_YAXIS_STYLE.axisLine + chart_option.yAxis[0].axisLine = axisLine0 + chart_option.yAxis[0].axisTick = axisLine0 chart_option.yAxis[0].axisLabel.showMaxLabel = true chart_option.yAxis[0].axisLabel.showMinLabel = true @@ -155,6 +164,9 @@ export function componentStyle(chart_option, chart) { chart_option.yAxis[1].axisLabel = customStyle.yAxisExt.axisLabel chart_option.yAxis[1].splitLine = customStyle.yAxisExt.splitLine chart_option.yAxis[1].nameTextStyle = customStyle.yAxisExt.nameTextStyle + const axisLine1 = customStyle.yAxis[1].axisLine ? customStyle.yAxis[1].axisLine : DEFAULT_YAXIS_EXT_STYLE.axisLine + chart_option.yAxis[1].axisLine = axisLine1 + chart_option.yAxis[1].axisTick = axisLine1 chart_option.yAxis[1].axisLabel.showMaxLabel = true chart_option.yAxis[1].axisLabel.showMinLabel = true diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js index 7afb4b3012..2281547631 100644 --- a/frontend/src/views/chart/chart/common/common_antv.js +++ b/frontend/src/views/chart/chart/common/common_antv.js @@ -1,6 +1,6 @@ import { hexColorToRGBA } from '@/views/chart/chart/util' import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter' -import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart' +import { DEFAULT_XAXIS_STYLE, DEFAULT_YAXIS_EXT_STYLE, DEFAULT_YAXIS_STYLE } from '@/views/chart/chart/chart' export function getPadding(chart) { if (chart.drill) { @@ -455,6 +455,18 @@ export function getXAxis(chart) { } } } : null + const axisCfg = a.axisLine ? a.axisLine : DEFAULT_XAXIS_STYLE.axisLine + const axisLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color, + lineWidth: parseInt(axisCfg.lineStyle.width) + } + } : null + const tickLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color + } + } : null const label = a.axisLabel.show ? { rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180, style: { @@ -478,7 +490,9 @@ export function getXAxis(chart) { position: transAxisPosition(chart, a), title: title, grid: grid, - label: label + label: label, + line: axisLine, + tickLine: tickLine } // 轴值设置 @@ -526,6 +540,18 @@ export function getYAxis(chart) { } } } : null + const axisCfg = a.axisLine ? a.axisLine : DEFAULT_YAXIS_STYLE.axisLine + const axisLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color, + lineWidth: parseInt(axisCfg.lineStyle.width) + } + } : null + const tickLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color + } + } : null const label = a.axisLabel.show ? { rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180, style: { @@ -553,7 +579,9 @@ export function getYAxis(chart) { position: transAxisPosition(chart, a), title: title, grid: grid, - label: label + label: label, + line: axisLine, + tickLine: tickLine } // 轴值设置 @@ -601,6 +629,18 @@ export function getYAxisExt(chart) { } } } : null + const axisCfg = a.axisLine ? a.axisLine : DEFAULT_YAXIS_EXT_STYLE.axisLine + const axisLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color, + lineWidth: parseInt(axisCfg.lineStyle.width) + } + } : null + const tickLine = axisCfg.show ? { + style: { + stroke: axisCfg.lineStyle.color + } + } : null const label = a.axisLabel.show ? { rotate: parseInt(a.axisLabel.rotate) * Math.PI / 180, style: { @@ -628,7 +668,9 @@ export function getYAxisExt(chart) { position: transAxisPosition(chart, a), title: title, grid: grid, - label: label + label: label, + line: axisLine, + tickLine: tickLine } // 轴值设置 diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index 06aa6c2c29..94cbb279ab 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -592,6 +592,94 @@ export const TYPE_CONFIGS = [ ] } }, + { + render: 'antv', + category: 'chart.chart_type_trend', + value: 'chart-mix', + title: 'chart.chart_mix', + icon: 'chart-mix', + properties: [ + 'color-selector', + 'size-selector-ant-v', + 'label-selector-ant-v', + 'tooltip-selector-ant-v', + 'x-axis-selector-ant-v', + 'y-axis-selector-ant-v', + 'y-axis-ext-selector-ant-v', + 'title-selector-ant-v', + 'legend-selector-ant-v' + ], + propertyInner: { + 'color-selector': [ + 'value', + 'colorPanel', + 'customColor', + 'alpha' + ], + 'size-selector-ant-v': [ + 'mix' + ], + 'label-selector-ant-v': [ + 'show', + 'fontSize', + 'color' + ], + 'tooltip-selector-ant-v': [ + 'show', + 'textStyle' + ], + 'x-axis-selector-ant-v': [ + 'show', + 'position', + 'name', + 'nameTextStyle', + 'splitLine', + 'axisForm', + 'axisLabel' + ], + 'y-axis-selector-ant-v': [ + 'show', + 'position', + 'name', + 'nameTextStyle', + 'axisValue', + 'splitLine', + 'axisForm', + 'axisLabel' + ], + 'y-axis-ext-selector-ant-v': [ + 'show', + 'position', + 'name', + 'nameTextStyle', + 'axisValue', + 'splitLine', + 'axisForm', + 'axisLabel' + ], + 'title-selector-ant-v': [ + 'show', + 'title', + 'fontSize', + 'color', + 'hPosition', + 'isItalic', + 'isBolder', + 'remarkShow', + 'fontFamily', + 'letterSpace', + 'fontShadow' + ], + 'legend-selector-ant-v': [ + 'show', + 'icon', + 'orient', + 'textStyle', + 'hPosition', + 'vPosition' + ] + } + }, { render: 'antv', diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue index 3ba18bca48..cd859d09f4 100644 --- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue +++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue @@ -154,15 +154,25 @@ v-show="showProperty('splitLine')" :label="$t('chart.axis_show')" class="form-item" + > + {{ $t('chart.axis_show') }} + + {{ $t('chart.axis_show') }} + >{{ $t('chart.grid_show') }} + {{ $t('chart.axis_show') }} + + {{ $t('chart.axis_show') }} + >{{ $t('chart.grid_show') }} + {{ $t('chart.axis_show') }} + + {{ $t('chart.axis_show') }} + >{{ $t('chart.grid_show') }} + {{ $t('chart.axis_show') }} + + {{ $t('chart.axis_show') }} + >{{ $t('chart.grid_show') }} + {{ $t('chart.axis_show') }} + + {{ $t('chart.axis_show') }} + >{{ $t('chart.grid_show') }} + {{ $t('chart.axis_show') }} + + {{ $t('chart.axis_show') }} + >{{ $t('chart.grid_show') }}