Merge pull request #131 from dataease/pr@dev@feat_视图坐标轴样式设置增加可选项

frontend/src/lang/en.js

@@ -734,7 +734,9 @@ export default {
     text_style: 'Font Style',
     bolder: 'Bolder',
     change_ds: 'Change Dataset',
-    change_ds_tip: 'Tips：Change Dataset will change fields,you need rebuild chart'
+    change_ds_tip: 'Tips：Change Dataset will change fields,you need rebuild chart',
+    axis_name_color: 'Name Color',
+    axis_name_fontsize: 'Name Fontsize'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
@@ -848,7 +850,7 @@ export default {
     edit_field: 'Edit Field',
     preview_100_data: 'Show 100 lines data',
     invalid_table_check: 'Please sync data first.',
-    parse_error: 'Parse Error,please check.Reference：https://dataease.io/docs/faq/dataset_faq/',
+    parse_error: 'Parse failed,please check.Reference：https://dataease.io/docs/faq/dataset_faq/',
     origin_field_type: 'Origin Type',
     edit_excel_table: 'Edit Excel Dataset',
     edit_excel: 'Edit Excel',

frontend/src/lang/tw.js

@@ -776,7 +776,9 @@ export default {
     text_style: '字體樣式',
     bolder: '加粗',
     change_ds: '更換數據集',
-    change_ds_tip: '提示：更換數據集將導致字段發生變化，需重新製作視圖'
+    change_ds_tip: '提示：更換數據集將導致字段發生變化，需重新製作視圖',
+    axis_name_color: '名稱顏色',
+    axis_name_fontsize: '名稱字體'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',
@@ -890,7 +892,7 @@ export default {
     edit_field: '編輯自斷',
     preview_100_data: '顯示前100行數據',
     invalid_table_check: '非直連數據集請先完成數據同步',
-    parse_error: 'Excel解析錯誤，請檢查格式、字段等信息。具體參考：https://dataease.io/docs/faq/dataset_faq/',
+    parse_error: 'Excel解析失敗，請檢查格式、字段等信息。具體參考：https://dataease.io/docs/faq/dataset_faq/',
     origin_field_type: '原始類型',
     edit_excel_table: '編輯Excel數據集',
     edit_excel: '編輯Excel',

frontend/src/lang/zh.js

@@ -734,7 +734,9 @@ export default {
     text_style: '字体样式',
     bolder: '加粗',
     change_ds: '更换数据集',
-    change_ds_tip: '提示：更换数据集将导致字段发生变化，需重新制作视图'
+    change_ds_tip: '提示：更换数据集将导致字段发生变化，需重新制作视图',
+    axis_name_color: '名称颜色',
+    axis_name_fontsize: '名称字体'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
@@ -848,7 +850,7 @@ export default {
     edit_field: '编辑字段',
     preview_100_data: '显示前100行数据',
     invalid_table_check: '非直连数据集请先完成数据同步',
-    parse_error: 'Excel解析错误，请检查格式、字段等信息。具体参考：https://dataease.io/docs/faq/dataset_faq/',
+    parse_error: 'Excel解析失败，请检查格式、字段等信息。具体参考：https://dataease.io/docs/faq/dataset_faq/',
     origin_field_type: '原始类型',
     edit_excel_table: '编辑Excel数据集',
     edit_excel: '编辑Excel',
@@ -889,7 +891,7 @@ export default {
     input_limit_0_50: '0-50字符',
     oracle_connection_type: '服务名/SID',
     oracle_sid: 'SID',
-    oracle_service_name: '服务名',
+    oracle_service_name: '服务名'
   },
   pblink: {
     key_pwd: '请输入密码打开链接',

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

@@ -81,6 +81,10 @@ export const DEFAULT_XAXIS_STYLE = {
   show: true,
   position: 'bottom',
   name: '',
+  nameTextStyle: {
+    color: '#333333',
+    fontSize: 12
+  },
   axisLabel: {
     show: true,
     color: '#333333',
@@ -101,6 +105,10 @@ export const DEFAULT_YAXIS_STYLE = {
   show: true,
   position: 'left',
   name: '',
+  nameTextStyle: {
+    color: '#333333',
+    fontSize: 12
+  },
   axisLabel: {
     show: true,
     color: '#333333',

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

@@ -28,6 +28,7 @@ export function componentStyle(chart_option, chart) {
       chart_option.xAxis.name = customStyle.xAxis.name
       chart_option.xAxis.axisLabel = customStyle.xAxis.axisLabel
       chart_option.xAxis.splitLine = customStyle.xAxis.splitLine
+      chart_option.xAxis.nameTextStyle = customStyle.xAxis.nameTextStyle
     }
     if (customStyle.yAxis && (chart.type.includes('bar') || chart.type.includes('line'))) {
       chart_option.yAxis.show = customStyle.yAxis.show
@@ -35,6 +36,7 @@ export function componentStyle(chart_option, chart) {
       chart_option.yAxis.name = customStyle.yAxis.name
       chart_option.yAxis.axisLabel = customStyle.yAxis.axisLabel
       chart_option.yAxis.splitLine = customStyle.yAxis.splitLine
+      chart_option.yAxis.nameTextStyle = customStyle.yAxis.nameTextStyle
     }
     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,14 @@
             <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-form-item :label="$t('chart.axis_name_color')" class="form-item">
+              <colorPicker v-model="axisForm.nameTextStyle.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_name_fontsize')" class="form-item form-item-slider">
+              <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeXAxisStyle">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </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>
@@ -112,6 +120,9 @@ export default {
             if (!this.axisForm.splitLine) {
               this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
             }
+            if (!this.axisForm.nameTextStyle) {
+              this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
+            }
           }
         }
       }

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

@@ -24,6 +24,14 @@
             <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-form-item :label="$t('chart.axis_name_color')" class="form-item">
+              <colorPicker v-model="axisForm.nameTextStyle.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_name_fontsize')" class="form-item form-item-slider">
+              <el-select v-model="axisForm.nameTextStyle.fontSize" :placeholder="$t('chart.axis_name_fontsize')" @change="changeYAxisStyle">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </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>
@@ -112,6 +120,9 @@ export default {
             if (!this.axisForm.splitLine) {
               this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
             }
+            if (!this.axisForm.nameTextStyle) {
+              this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
+            }
           }
         }
       }