From 60fda515611c09f41960b05d97447bd941d57167 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Mon, 20 May 2024 14:23:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BD=91=E6=A0=BC=E7=BA=BF=E7=B1=BB=E5=9E=8B=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/data-visualization/dvMain.ts      |  9 +++++++-
 .../editor-style/components/XAxisSelector.vue | 22 +++++++++++++++++++
 .../editor-style/components/YAxisSelector.vue | 22 +++++++++++++++++++
 .../components/js/panel/common/common_antv.ts |  6 +++--
 4 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
index 20edffc4b9..511d4e20b3 100644
--- a/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/dvMain.ts
@@ -362,8 +362,15 @@ export const dvMainStore = defineStore('dataVisualization', {
       }
       //如果当前的组件是UserView 图表，则想canvasView中增加一项 UserView ID 和componentID保持一致
       if (component.component === 'UserView') {
+        const defaultConfig = JSON.parse(JSON.stringify(BASE_VIEW_CONFIG))
+        if (component.innerType === 'bar-range') {
+          defaultConfig.customStyle.xAxis.axisLine.show = false
+          defaultConfig.customStyle.xAxis.splitLine.show = true
+          defaultConfig.customStyle.yAxis.axisLine.show = true
+          defaultConfig.customStyle.yAxis.splitLine.show = false
+        }
         let newView = {
-          ...JSON.parse(JSON.stringify(BASE_VIEW_CONFIG)),
+          ...defaultConfig,
           id: component.id,
           type: component.innerType,
           render: component.render
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
index 968fbc6ab4..b681691c36 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/XAxisSelector.vue
@@ -52,6 +52,12 @@ const fontSizeList = computed(() => {
   return arr
 })
 
+const splitLineStyle = [
+  { label: t('chart.line_type_solid'), value: 'solid' },
+  { label: t('chart.line_type_dashed'), value: 'dashed' },
+  { label: t('chart.line_type_dotted'), value: 'dotted' }
+]
+
 const isBarRangeTime = computed<boolean>(() => {
   if (props.chart.type === 'bar-range') {
     const tempYAxis = props.chart.yAxis[0]
@@ -326,6 +332,22 @@ onMounted(() => {
           />
         </el-form-item>
       </div>
+      <el-form-item class="form-item" :class="'form-item-' + themes">
+        <el-select
+          :disabled="!state.axisForm.splitLine.show"
+          style="width: 108px"
+          :effect="props.themes"
+          v-model="state.axisForm.splitLine.lineStyle.style"
+          @change="changeAxisStyle('splitLine.lineStyle')"
+        >
+          <el-option
+            v-for="option in splitLineStyle"
+            :key="option.value"
+            :value="option.value"
+            :label="option.label"
+          ></el-option>
+        </el-select>
+      </el-form-item>
     </div>
     <el-divider class="m-divider" :class="'m-divider--' + themes" />
     <el-form-item
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
index ad0df2c5a5..004839728c 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/YAxisSelector.vue
@@ -52,6 +52,12 @@ const fontSizeList = computed(() => {
   return arr
 })
 
+const splitLineStyle = [
+  { label: t('chart.line_type_solid'), value: 'solid' },
+  { label: t('chart.line_type_dashed'), value: 'dashed' },
+  { label: t('chart.line_type_dotted'), value: 'dotted' }
+]
+
 const changeAxisStyle = prop => {
   if (
     state.axisForm.axisValue.splitCount &&
@@ -303,6 +309,22 @@ onMounted(() => {
           />
         </el-form-item>
       </div>
+      <el-form-item class="form-item" :class="'form-item-' + themes">
+        <el-select
+          :disabled="!state.axisForm.splitLine.show"
+          style="width: 108px"
+          :effect="props.themes"
+          v-model="state.axisForm.splitLine.lineStyle.style"
+          @change="changeAxisStyle('splitLine.lineStyle')"
+        >
+          <el-option
+            v-for="option in splitLineStyle"
+            :key="option.value"
+            :value="option.value"
+            :label="option.label"
+          ></el-option>
+        </el-select>
+      </el-form-item>
     </div>
     <el-divider class="m-divider" :class="'m-divider--' + themes" />
     <el-form-item
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
index 667875a2a3..c174ca9a86 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_antv.ts
@@ -357,7 +357,8 @@ export function getXAxis(chart: Chart) {
               line: {
                 style: {
                   stroke: a.splitLine.lineStyle.color,
-                  lineWidth: a.splitLine.lineStyle.width
+                  lineWidth: a.splitLine.lineStyle.width,
+                  lineDash: getLineDash(a.splitLine.lineStyle.style)
                 }
               }
             }
@@ -435,7 +436,8 @@ export function getYAxis(chart: Chart) {
         line: {
           style: {
             stroke: yAxis.splitLine.lineStyle.color,
-            lineWidth: yAxis.splitLine.lineStyle.width
+            lineWidth: yAxis.splitLine.lineStyle.width,
+            lineDash: getLineDash(yAxis.splitLine.lineStyle.style)
           }
         }
       }