feat: 轴线支持线条和标签设置

frontend/src/lang/en.js

@@ -720,7 +720,17 @@ export default {
     chart_error_tips: 'Please contact admin ',
     title_cannot_empty: 'Title can not be empty',
     table_title_height: 'Table header height',
-    table_item_height: 'Table row height'
+    table_item_height: 'Table row height',
+    axis_show: 'Axis Show',
+    axis_color: 'Axis Color',
+    axis_width: 'Axis Width',
+    axis_type: 'Axis Type',
+    axis_type_solid: 'Solid',
+    axis_type_dashed: 'Dashed',
+    axis_type_dotted: 'Dotted',
+    axis_label_show: 'Label Show',
+    axis_label_color: 'Label Color',
+    axis_label_fontsize: 'Label Fontsize'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -762,7 +762,17 @@ export default {
     chart_error_tips: '如有疑問請聯系管理員',
     title_cannot_empty: '標題不能為空',
     table_title_height: '表頭行高',
-    table_item_height: '表格行高'
+    table_item_height: '表格行高',
+    axis_show: '軸線顯示',
+    axis_color: '軸線顏色',
+    axis_width: '軸線寬度',
+    axis_type: '軸線類型',
+    axis_type_solid: '實線',
+    axis_type_dashed: '虛線',
+    axis_type_dotted: '點',
+    axis_label_show: '標簽顯示',
+    axis_label_color: '標簽顏色',
+    axis_label_fontsize: '標簽大小'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -720,7 +720,17 @@ export default {
     chart_error_tips: '如有疑问请联系管理员',
     title_cannot_empty: '标题不能为空',
     table_title_height: '表头行高',
-    table_item_height: '表格行高'
+    table_item_height: '表格行高',
+    axis_show: '轴线显示',
+    axis_color: '轴线颜色',
+    axis_width: '轴线宽度',
+    axis_type: '轴线类型',
+    axis_type_solid: '实线',
+    axis_type_dashed: '虚线',
+    axis_type_dotted: '点',
+    axis_label_show: '标签显示',
+    axis_label_color: '标签颜色',
+    axis_label_fontsize: '标签大小'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

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

@@ -81,8 +81,19 @@ export const DEFAULT_XAXIS_STYLE = {
   position: 'bottom',
   name: '',
   axisLabel: {
+    show: true,
+    color: '#333333',
+    fontSize: '12',
     rotate: 0,
     formatter: '{value}'
+  },
+  splitLine: {
+    show: false,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
   }
 }
 export const DEFAULT_YAXIS_STYLE = {
@@ -90,8 +101,19 @@ export const DEFAULT_YAXIS_STYLE = {
   position: 'left',
   name: '',
   axisLabel: {
+    show: true,
+    color: '#333333',
+    fontSize: '12',
     rotate: 0,
     formatter: '{value}'
+  },
+  splitLine: {
+    show: true,
+    lineStyle: {
+      color: '#cccccc',
+      width: 1,
+      style: 'solid'
+    }
   }
 }
 export const DEFAULT_BACKGROUND_COLOR = {

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

@@ -26,12 +26,14 @@ export function componentStyle(chart_option, chart) {
       chart_option.xAxis.position = customStyle.xAxis.position
       chart_option.xAxis.name = customStyle.xAxis.name
       chart_option.xAxis.axisLabel = customStyle.xAxis.axisLabel
+      chart_option.xAxis.splitLine = customStyle.xAxis.splitLine
     }
     if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line'))) {
       chart_option.yAxis.show = customStyle.yAxis.show
       chart_option.yAxis.position = customStyle.yAxis.position
       chart_option.yAxis.name = customStyle.yAxis.name
       chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel
+      chart_option.yAxis.splitLine = customStyle.yAxis.splitLine
     }
     if (customStyle.background) {
       chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)

frontend/src/views/chart/components/component-style/XAxisSelector.vue

@@ -24,6 +24,40 @@
             <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeXAxisStyle" />
             </el-form-item>
+            <el-divider />
+            <el-form-item :label="$t('chart.axis_show')" class="form-item">
+              <el-checkbox v-model="axisForm.splitLine.show" @change="changeXAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="axisForm.splitLine.show">
+              <el-form-item :label="$t('chart.axis_color')" class="form-item">
+                <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
+                <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeXAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_type')" class="form-item">
+                <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeXAxisStyle">
+                  <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
+                  <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
+                  <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </span>
+            <el-divider />
+            <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
+              <el-checkbox v-model="axisForm.axisLabel.show" @change="changeXAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="axisForm.axisLabel.show">
+              <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+                <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeXAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
+                <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeXAxisStyle">
+                  <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+                </el-select>
+              </el-form-item>
+            </span>
+            <el-divider />
             <el-form-item :label="$t('chart.content_formatter')" class="form-item">
               <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeXAxisStyle" />
             </el-form-item>
@@ -58,7 +92,8 @@ export default {
   data() {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE)),
-      isSetting: false
+      isSetting: false,
+      fontSize: []
     }
   },
   watch: {
@@ -74,14 +109,28 @@ export default {
           }
           if (customStyle.xAxis) {
             this.axisForm = customStyle.xAxis
+            if (!this.axisForm.splitLine) {
+              this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
+            }
           }
         }
       }
     }
   },
   mounted() {
+    this.init()
   },
   methods: {
+    init() {
+      const arr = []
+      for (let i = 10; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
     changeXAxisStyle() {
       if (!this.axisForm.show) {
         this.isSetting = false
@@ -93,6 +142,9 @@ export default {
 </script>
 
 <style scoped>
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
 .shape-item{
   padding: 6px;
   border: none;

frontend/src/views/chart/components/component-style/YAxisSelector.vue

@@ -24,6 +24,40 @@
             <el-form-item :label="$t('chart.rotate')" class="form-item form-item-slider">
               <el-slider v-model="axisForm.axisLabel.rotate" show-input :show-input-controls="false" :min="-90" :max="90" input-size="mini" @change="changeYAxisStyle" />
             </el-form-item>
+            <el-divider />
+            <el-form-item :label="$t('chart.axis_show')" class="form-item">
+              <el-checkbox v-model="axisForm.splitLine.show" @change="changeYAxisStyle">{{ $t('chart.axis_show') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="axisForm.splitLine.show">
+              <el-form-item :label="$t('chart.axis_color')" class="form-item">
+                <colorPicker v-model="axisForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_width')" class="form-item form-item-slider">
+                <el-slider v-model="axisForm.splitLine.lineStyle.width" :min="1" :max="10" show-input :show-input-controls="false" input-size="mini" @change="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_type')" class="form-item">
+                <el-radio-group v-model="axisForm.splitLine.lineStyle.type" size="mini" @change="changeYAxisStyle">
+                  <el-radio-button label="solid">{{ $t('chart.axis_type_solid') }}</el-radio-button>
+                  <el-radio-button label="dashed">{{ $t('chart.axis_type_dashed') }}</el-radio-button>
+                  <el-radio-button label="dotted">{{ $t('chart.axis_type_dotted') }}</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </span>
+            <el-divider />
+            <el-form-item :label="$t('chart.axis_label_show')" class="form-item">
+              <el-checkbox v-model="axisForm.axisLabel.show" @change="changeYAxisStyle">{{ $t('chart.axis_label_show') }}</el-checkbox>
+            </el-form-item>
+            <span v-show="axisForm.axisLabel.show">
+              <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+                <colorPicker v-model="axisForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeYAxisStyle" />
+              </el-form-item>
+              <el-form-item :label="$t('chart.axis_label_fontsize')" class="form-item form-item-slider">
+                <el-select v-model="axisForm.axisLabel.fontSize" :placeholder="$t('chart.axis_label_fontsize')" @change="changeYAxisStyle">
+                  <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+                </el-select>
+              </el-form-item>
+            </span>
+            <el-divider />
             <el-form-item :label="$t('chart.content_formatter')" class="form-item">
               <el-input v-model="axisForm.axisLabel.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeYAxisStyle" />
             </el-form-item>
@@ -58,7 +92,8 @@ export default {
   data() {
     return {
       axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE)),
-      isSetting: false
+      isSetting: false,
+      fontSize: []
     }
   },
   watch: {
@@ -74,14 +109,28 @@ export default {
           }
           if (customStyle.yAxis) {
             this.axisForm = customStyle.yAxis
+            if (!this.axisForm.splitLine) {
+              this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
+            }
           }
         }
       }
     }
   },
   mounted() {
+    this.init()
   },
   methods: {
+    init() {
+      const arr = []
+      for (let i = 10; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
     changeYAxisStyle() {
       if (!this.axisForm.show) {
         this.isSetting = false
@@ -93,6 +142,9 @@ export default {
 </script>
 
 <style scoped>
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
 .shape-item{
   padding: 6px;
   border: none;

frontend/src/views/chart/view/ChartEdit.vue

@@ -208,10 +208,10 @@
               <tooltip-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
             </el-tab-pane>
             <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
-              <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-              <legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
               <x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
               <y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+              <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
+              <legend-selector v-show="!view.type.includes('table') && !view.type.includes('text')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
               <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
             </el-tab-pane>
           </el-tabs>