feat: AntV轴分割线支持设置虚线

core/frontend/src/lang/en.js

@@ -1221,6 +1221,9 @@ export default {
     axis_width: 'Axis Width',
     axis_type: 'Axis Type',
     grid_show: 'Grid Show',
+    dash_show: 'Dash Show',
+    dash_width: 'Dash Width',
+    dash_offset: 'Dash Offset',
     grid_color: 'Grid Color',
     grid_width: 'Grid Width',
     grid_type: 'Grid Type',

core/frontend/src/lang/tw.js

@@ -1219,6 +1219,9 @@ export default {
     axis_width: '軸線寬度',
     axis_type: '軸線類型',
     grid_show: '網格線顯示',
+    dash_show: '虛線顯示',
+    dash_width: '虛線寬度',
+    dash_offset: '虛線間距',
     grid_color: '網格線顏色',
     grid_width: '網格線寬度',
     grid_type: '網格線類型',

core/frontend/src/lang/zh.js

@@ -1219,6 +1219,9 @@ export default {
     axis_width: '轴线宽度',
     axis_type: '轴线类型',
     grid_show: '网格线显示',
+    dash_show: '虚线显示',
+    dash_width: '虚线宽度',
+    dash_offset: '虚线间距',
     grid_color: '网格线颜色',
     grid_width: '网格线宽度',
     grid_type: '网格线类型',

core/frontend/src/views/chart/chart/chart.js

@@ -328,6 +328,11 @@ export const DEFAULT_XAXIS_STYLE = {
       color: '#cccccc',
       width: 1,
       style: 'solid'
+    },
+    enableDash: false,
+    dashStyle: {
+      width: 4,
+      offset: 5
     }
   },
   axisValue: {
@@ -374,6 +379,11 @@ export const DEFAULT_YAXIS_STYLE = {
       color: '#cccccc',
       width: 1,
       style: 'solid'
+    },
+    enableDash: false,
+    dashStyle: {
+      width: 4,
+      offset: 5
     }
   },
   axisValue: {
@@ -420,6 +430,11 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
       color: '#cccccc',
       width: 1,
       style: 'solid'
+    },
+    enableDash: false,
+    dashStyle: {
+      width: 4,
+      offset: 5
     }
   },
   axisValue: {

core/frontend/src/views/chart/chart/common/common_antv.js

@@ -656,11 +656,16 @@ export function getXAxis(chart) {
           },
           spacing: 8
         } : null
+        const gridCfg = a.splitLine ? a.splitLine : DEFAULT_XAXIS_STYLE.splitLine
+        if (!gridCfg.dashStyle) {
+          gridCfg.dashStyle = DEFAULT_XAXIS_STYLE.splitLine.dashStyle
+        }
         const grid = a.splitLine.show ? {
           line: {
             style: {
               stroke: a.splitLine.lineStyle.color,
-              lineWidth: parseInt(a.splitLine.lineStyle.width)
+              lineWidth: parseInt(a.splitLine.lineStyle.width),
+              lineDash: gridCfg.enableDash ? [gridCfg.dashStyle.width, gridCfg.dashStyle.offset] : undefined
             }
           }
         } : null
@@ -771,11 +776,16 @@ export function getYAxis(chart) {
           },
           spacing: 8
         } : null
+        const gridCfg = a.splitLine ? a.splitLine : DEFAULT_YAXIS_STYLE.splitLine
+        if (!gridCfg.dashStyle) {
+          gridCfg.dashStyle = DEFAULT_YAXIS_STYLE.splitLine.dashStyle
+        }
         const grid = a.splitLine.show ? {
           line: {
             style: {
               stroke: a.splitLine.lineStyle.color,
-              lineWidth: parseInt(a.splitLine.lineStyle.width)
+              lineWidth: parseInt(a.splitLine.lineStyle.width),
+              lineDash: gridCfg.enableDash ? [gridCfg.dashStyle.width, gridCfg.dashStyle.offset] : undefined
             }
           }
         } : null
@@ -883,11 +893,16 @@ export function getYAxisExt(chart) {
           },
           spacing: 8
         } : null
+        const gridCfg = a.splitLine ? a.splitLine : DEFAULT_YAXIS_EXT_STYLE.splitLine
+        if (!gridCfg.dashStyle) {
+          gridCfg.dashStyle = DEFAULT_YAXIS_EXT_STYLE.splitLine.dashStyle
+        }
         const grid = a.splitLine.show ? {
           line: {
             style: {
               stroke: a.splitLine.lineStyle.color,
-              lineWidth: parseInt(a.splitLine.lineStyle.width)
+              lineWidth: parseInt(a.splitLine.lineStyle.width),
+              lineDash: gridCfg.enableDash ? [gridCfg.dashStyle.width, gridCfg.dashStyle.offset] : undefined
             }
           }
         } : null

core/frontend/src/views/chart/components/componentStyle/XAxisSelectorAntV.vue

@@ -201,6 +201,46 @@
                 @change="changeXAxisStyle('splitLine')"
               />
             </el-form-item>
+
+            <el-form-item
+              :label="$t('chart.dash_show')"
+              class="form-item"
+            >
+              <el-checkbox
+                v-model="axisForm.splitLine.enableDash"
+                @change="changeXAxisStyle('splitLine')"
+              >{{ $t('chart.dash_show') }}</el-checkbox>
+            </el-form-item>
+            <template v-if="axisForm.splitLine.enableDash">
+              <el-form-item
+                :label="$t('chart.dash_width')"
+                class="form-item form-item-slider"
+              >
+                <el-slider
+                  v-model="axisForm.splitLine.dashStyle.width"
+                  :min="1"
+                  :max="10"
+                  show-input
+                  :show-input-controls="false"
+                  input-size="mini"
+                  @change="changeXAxisStyle('splitLine')"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('chart.dash_offset')"
+                class="form-item form-item-slider"
+              >
+                <el-slider
+                  v-model="axisForm.splitLine.dashStyle.offset"
+                  :min="1"
+                  :max="10"
+                  show-input
+                  :show-input-controls="false"
+                  input-size="mini"
+                  @change="changeXAxisStyle('splitLine')"
+                />
+              </el-form-item>
+            </template>
           </span>
           <el-divider v-if="showProperty('axisForm')" />
           <el-form-item
@@ -412,6 +452,9 @@ export default {
           if (!this.axisForm.axisLine) {
             this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.axisLine))
           }
+          if (!this.axisForm.splitLine.dashStyle) {
+            this.axisForm.splitLine.dashStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine.dashStyle))
+          }
         }
       }
     },

core/frontend/src/views/chart/components/componentStyle/YAxisExtSelectorAntV.vue

@@ -195,6 +195,45 @@
                 @change="changeYAxisStyle('lineStyle')"
               />
             </el-form-item>
+            <el-form-item
+              :label="$t('chart.dash_show')"
+              class="form-item"
+            >
+              <el-checkbox
+                v-model="axisForm.splitLine.enableDash"
+                @change="changeYAxisStyle('splitLine')"
+              >{{ $t('chart.dash_show') }}</el-checkbox>
+            </el-form-item>
+            <template v-if="axisForm.splitLine.enableDash">
+              <el-form-item
+                :label="$t('chart.dash_width')"
+                class="form-item form-item-slider"
+              >
+                <el-slider
+                  v-model="axisForm.splitLine.dashStyle.width"
+                  :min="1"
+                  :max="10"
+                  show-input
+                  :show-input-controls="false"
+                  input-size="mini"
+                  @change="changeYAxisStyle('splitLine')"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('chart.dash_offset')"
+                class="form-item form-item-slider"
+              >
+                <el-slider
+                  v-model="axisForm.splitLine.dashStyle.offset"
+                  :min="1"
+                  :max="10"
+                  show-input
+                  :show-input-controls="false"
+                  input-size="mini"
+                  @change="changeYAxisStyle('splitLine')"
+                />
+              </el-form-item>
+            </template>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item
@@ -408,6 +447,9 @@ export default {
           if (!this.axisForm.axisLine) {
             this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLine))
           }
+          if (!this.axisForm.splitLine.dashStyle) {
+            this.axisForm.splitLine.dashStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.splitLine.dashStyle))
+          }
         }
       }
     },

core/frontend/src/views/chart/components/componentStyle/YAxisSelectorAntV.vue

@@ -198,6 +198,45 @@
                 @change="changeYAxisStyle('splitLine')"
               />
             </el-form-item>
+            <el-form-item
+              :label="$t('chart.dash_show')"
+              class="form-item"
+            >
+              <el-checkbox
+                v-model="axisForm.splitLine.enableDash"
+                @change="changeYAxisStyle('splitLine')"
+              >{{ $t('chart.dash_show') }}</el-checkbox>
+            </el-form-item>
+            <template v-if="axisForm.splitLine.enableDash">
+              <el-form-item
+                :label="$t('chart.dash_width')"
+                class="form-item form-item-slider"
+              >
+                <el-slider
+                  v-model="axisForm.splitLine.dashStyle.width"
+                  :min="1"
+                  :max="10"
+                  show-input
+                  :show-input-controls="false"
+                  input-size="mini"
+                  @change="changeYAxisStyle('splitLine')"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('chart.dash_offset')"
+                class="form-item form-item-slider"
+              >
+                <el-slider
+                  v-model="axisForm.splitLine.dashStyle.offset"
+                  :min="1"
+                  :max="10"
+                  show-input
+                  :show-input-controls="false"
+                  input-size="mini"
+                  @change="changeYAxisStyle('splitLine')"
+                />
+              </el-form-item>
+            </template>
           </span>
           <el-divider v-if="showProperty('axisLabel')" />
           <el-form-item
@@ -408,6 +447,9 @@ export default {
           if (!this.axisForm.axisLine) {
             this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLine))
           }
+          if (!this.axisForm.splitLine.dashStyle) {
+            this.axisForm.splitLine.dashStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine.dashStyle))
+          }
         }
       }
     },

extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisExtSelectorAntV.vue

@@ -178,6 +178,45 @@
                 @change="changeYAxisStyle('lineStyle')"
               />
             </el-form-item>
+            <el-form-item
+              :label="$t('chart.dash_show')"
+              class="form-item"
+            >
+              <el-checkbox
+                v-model="axisForm.splitLine.enableDash"
+                @change="changeYAxisStyle('splitLine')"
+              >{{ $t('chart.dash_show') }}</el-checkbox>
+            </el-form-item>
+            <template v-if="axisForm.splitLine.enableDash">
+              <el-form-item
+                :label="$t('chart.dash_width')"
+                class="form-item form-item-slider"
+              >
+                <el-slider
+                  v-model="axisForm.splitLine.dashStyle.width"
+                  :min="1"
+                  :max="10"
+                  show-input
+                  :show-input-controls="false"
+                  input-size="mini"
+                  @change="changeYAxisStyle('splitLine')"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('chart.dash_offset')"
+                class="form-item form-item-slider"
+              >
+                <el-slider
+                  v-model="axisForm.splitLine.dashStyle.offset"
+                  :min="1"
+                  :max="10"
+                  show-input
+                  :show-input-controls="false"
+                  input-size="mini"
+                  @change="changeYAxisStyle('splitLine')"
+                />
+              </el-form-item>
+            </template>
           </span>
           <el-divider/>
           <el-form-item
@@ -385,6 +424,9 @@ export default {
           if (!this.axisForm.axisLine) {
             this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.axisLine))
           }
+          if (!this.axisForm.splitLine.dashStyle) {
+            this.axisForm.splitLine.dashStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_EXT_STYLE.splitLine.dashStyle))
+          }
         }
       }
     },

extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/components/selector/YAxisSelectorAntV.vue

@@ -175,6 +175,45 @@
                 @change="changeYAxisStyle('splitLine')"
               />
             </el-form-item>
+            <el-form-item
+              :label="$t('chart.dash_show')"
+              class="form-item"
+            >
+              <el-checkbox
+                v-model="axisForm.splitLine.enableDash"
+                @change="changeYAxisStyle('splitLine')"
+              >{{ $t('chart.dash_show') }}</el-checkbox>
+            </el-form-item>
+            <template v-if="axisForm.splitLine.enableDash">
+              <el-form-item
+                :label="$t('chart.dash_width')"
+                class="form-item form-item-slider"
+              >
+                <el-slider
+                  v-model="axisForm.splitLine.dashStyle.width"
+                  :min="1"
+                  :max="10"
+                  show-input
+                  :show-input-controls="false"
+                  input-size="mini"
+                  @change="changeYAxisStyle('splitLine')"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('chart.dash_offset')"
+                class="form-item form-item-slider"
+              >
+                <el-slider
+                  v-model="axisForm.splitLine.dashStyle.offset"
+                  :min="1"
+                  :max="10"
+                  show-input
+                  :show-input-controls="false"
+                  input-size="mini"
+                  @change="changeYAxisStyle('splitLine')"
+                />
+              </el-form-item>
+            </template>
           </span>
           <el-divider/>
           <el-form-item
@@ -385,6 +424,9 @@ export default {
           if (!this.axisForm.axisLine) {
             this.axisForm.axisLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.axisLine))
           }
+          if (!this.axisForm.splitLine.dashStyle) {
+            this.axisForm.splitLine.dashStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine.dashStyle))
+          }
         }
       }
     },

extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/utils/map.js

@@ -417,6 +417,11 @@ export const DEFAULT_YAXIS_STYLE = {
       color: '#cccccc',
       width: 1,
       style: 'solid'
+    },
+    enableDash: false,
+    dashStyle: {
+      width: 4,
+      offset: 5
     }
   },
   axisValue: {
@@ -463,6 +468,11 @@ export const DEFAULT_YAXIS_EXT_STYLE = {
       color: '#cccccc',
       width: 1,
       style: 'solid'
+    },
+    enableDash: false,
+    dashStyle: {
+      width: 4,
+      offset: 5
     }
   },
   axisValue: {

extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue

@@ -510,11 +510,16 @@ export default {
               },
               spacing: 8
             } : null
+            const gridCfg = a.splitLine ? a.splitLine : DEFAULT_YAXIS_STYLE.splitLine
+            if (!gridCfg.dashStyle) {
+              gridCfg.dashStyle = DEFAULT_YAXIS_STYLE.splitLine.dashStyle
+            }
             const grid = a.splitLine.show ? {
               line: {
                 style: {
                   stroke: a.splitLine.lineStyle.color,
-                  lineWidth: parseInt(a.splitLine.lineStyle.width)
+                  lineWidth: parseInt(a.splitLine.lineStyle.width),
+                  lineDash: gridCfg.enableDash ? [gridCfg.dashStyle.width, gridCfg.dashStyle.offset] : undefined
                 }
               }
             } : null
@@ -601,11 +606,16 @@ export default {
               },
               spacing: 8
             } : null
+            const gridCfg = a.splitLine ? a.splitLine : DEFAULT_YAXIS_EXT_STYLE.splitLine
+            if (!gridCfg.dashStyle) {
+              gridCfg.dashStyle = DEFAULT_YAXIS_EXT_STYLE.splitLine.dashStyle
+            }
             const grid = a.splitLine.show ? {
               line: {
                 style: {
                   stroke: a.splitLine.lineStyle.color,
-                  lineWidth: parseInt(a.splitLine.lineStyle.width)
+                  lineWidth: parseInt(a.splitLine.lineStyle.width),
+                  lineDash: gridCfg.enableDash ? [gridCfg.dashStyle.width, gridCfg.dashStyle.offset] : undefined
                 }
               }
             } : null