From b02cebe3645a8ba8e7df1a51930c2122610ba387 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Mon, 17 Oct 2022 13:45:55 +0800 Subject: [PATCH 1/3] =?UTF-8?q?style(=E4=BB=AA=E8=A1=A8=E6=9D=BF-=E6=95=B0?= =?UTF-8?q?=E5=80=BC=E5=8C=BA=E9=97=B4=E8=BF=87=E6=BB=A4=E5=99=A8):=20?= =?UTF-8?q?=E4=B8=8E=E5=85=B6=E5=AE=83=E8=BF=87=E6=BB=A4=E5=99=A8=E5=B7=A6?= =?UTF-8?q?=E5=8F=B3=E8=BE=B9=E8=B7=9D=E4=B8=8D=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/widget/DeWidget/DeNumberRange.vue | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/widget/DeWidget/DeNumberRange.vue b/frontend/src/components/widget/DeWidget/DeNumberRange.vue index 66590a87c0..bc0ce6c281 100644 --- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue +++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue @@ -4,10 +4,14 @@ v-if="element.options!== null && element.options.attrs!==null" ref="form" :model="form" + style="width: 100%;" :rules="rules" >
- + {{ $t('denumberrange.split_placeholder') }} - + Date: Mon, 17 Oct 2022 16:44:09 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=9D=90=E6=A0=87=E8=BD=B4=E8=BD=B4=E7=BA=BF=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=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') }} Date: Mon, 17 Oct 2022 16:48:46 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat(=E8=A7=86=E5=9B=BE):=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=9D=90=E6=A0=87=E8=BD=B4=E8=BD=B4=E7=BA=BF=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=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/views/chart/chart/util.js | 89 -------------------------- 1 file changed, 89 deletions(-) diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index 94cbb279ab..881ced1e30 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -592,95 +592,6 @@ 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', category: 'chart.chart_type_compare',