From b427f4ccd9885af97373809637c61076b17b0122 Mon Sep 17 00:00:00 2001
From: ulleo <ulleo.wang@gmail.com>
Date: Mon, 3 Jun 2024 14:11:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E7=BD=91=E6=A0=BC=E7=BA=BF=E8=AE=BE=E7=BD=AE=E4=B8=BA=E8=99=9A?=
 =?UTF-8?q?=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#9904
---
 .../components/DualYAxisSelectorInner.vue     | 24 ++++++++++++-
 .../editor-style/components/XAxisSelector.vue | 34 +++++++++----------
 .../editor-style/components/YAxisSelector.vue | 34 +++++++++----------
 .../components/js/panel/common/common_antv.ts |  5 +--
 4 files changed, 60 insertions(+), 37 deletions(-)

diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
index 58eb11adc0..e3508f9d1a 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/DualYAxisSelectorInner.vue
@@ -33,6 +33,12 @@ const state = reactive({
 
 const emit = defineEmits(['onChangeYAxisForm'])
 
+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' }
+]
+
 watch(
   () => props.form,
   () => {
@@ -284,10 +290,26 @@ onMounted(() => {
             is-custom
           />
         </el-form-item>
+        <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
+          <el-select
+            :disabled="!state.axisForm.splitLine.show"
+            style="width: 62px"
+            :effect="props.themes"
+            v-model="state.axisForm.splitLine.lineStyle.style"
+            @change="changeAxisStyle('splitLine.lineStyle.style')"
+          >
+            <el-option
+              v-for="option in splitLineStyle"
+              :key="option.value"
+              :value="option.value"
+              :label="option.label"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
           <el-input-number
             :disabled="!state.axisForm.splitLine.show"
-            style="width: 108px"
+            style="width: 74px"
             :effect="props.themes"
             v-model="state.axisForm.splitLine.lineStyle.width"
             :min="1"
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 68bb9b3687..c6b361e35f 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
@@ -316,10 +316,26 @@ onMounted(() => {
             is-custom
           />
         </el-form-item>
+        <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
+          <el-select
+            :disabled="!state.axisForm.splitLine.show"
+            style="width: 62px"
+            :effect="props.themes"
+            v-model="state.axisForm.splitLine.lineStyle.style"
+            @change="changeAxisStyle('splitLine.lineStyle.style')"
+          >
+            <el-option
+              v-for="option in splitLineStyle"
+              :key="option.value"
+              :value="option.value"
+              :label="option.label"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
           <el-input-number
             :disabled="!state.axisForm.splitLine.show"
-            style="width: 108px"
+            style="width: 74px"
             :effect="props.themes"
             v-model="state.axisForm.splitLine.lineStyle.width"
             :min="1"
@@ -330,22 +346,6 @@ 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 8869e05f89..62c7fdfe0e 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
@@ -298,10 +298,26 @@ onMounted(() => {
             is-custom
           />
         </el-form-item>
+        <el-form-item class="form-item" :class="'form-item-' + themes" style="padding: 0 4px">
+          <el-select
+            :disabled="!state.axisForm.splitLine.show"
+            style="width: 62px"
+            :effect="props.themes"
+            v-model="state.axisForm.splitLine.lineStyle.style"
+            @change="changeAxisStyle('splitLine.lineStyle.style')"
+          >
+            <el-option
+              v-for="option in splitLineStyle"
+              :key="option.value"
+              :value="option.value"
+              :label="option.label"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item class="form-item" :class="'form-item-' + themes" style="padding-left: 4px">
           <el-input-number
             :disabled="!state.axisForm.splitLine.show"
-            style="width: 108px"
+            style="width: 74px"
             :effect="props.themes"
             v-model="state.axisForm.splitLine.lineStyle.width"
             :min="1"
@@ -312,22 +328,6 @@ 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
       v-if="showProperty('axisLabel')"
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 a2e3f53e06..510086322b 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
@@ -530,7 +530,8 @@ export function getYAxisExt(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)
           }
         }
       }
@@ -780,7 +781,7 @@ export function getAnalyseHorizontal(chart: Chart) {
   return assistLine
 }
 
-function getLineDash(type) {
+export function getLineDash(type) {
   switch (type) {
     case 'solid':
       return [0, 0]