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

feat: 视图坐标轴设置增加属性设置
2021-07-01 18:31:48 +08:00 · 2021-07-01 18:31:48 +08:00 · 927cbb83dc
commit 927cbb83dc
parent bd2bfa0a24 7a281e8e49
7 changed files with 45 additions and 7 deletions
--- a/frontend/src/lang/en.js
+++ b/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',
--- a/frontend/src/lang/tw.js
+++ b/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',
--- a/frontend/src/lang/zh.js
+++ b/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: '请输入密码打开链接',
--- a/frontend/src/views/chart/chart/chart.js
+++ b/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',
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/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)
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/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))
+            }
          }
        }
      }
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/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))
+            }
          }
        }
      }