feat: radar支持轴线样式设置

frontend/src/lang/en.js

@@ -781,7 +781,14 @@ export default {
     axis_name_fontsize: 'Name Fontsize',
     pie_label_line_show: 'Line',
     outside: 'Outside',
-    center: 'Center'
+    center: 'Center',
+    split: 'Axis',
+    axis_line: 'Axis Line',
+    axis_label: 'Axis Label',
+    label_fontsize: 'Label Fontsize',
+    split_line: 'Split Line',
+    split_color: 'Split Color',
+    shadow: 'Shadow'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
@@ -938,7 +945,7 @@ export default {
     oracle_service_name: 'Service Name',
     get_schema: 'Get Schema',
     schema: 'Database Schema',
-    please_choose_schema: 'Please select Schema',
+    please_choose_schema: 'Please select Schema'
   },
   pblink: {
     key_pwd: 'Please enter the password to open the link',

frontend/src/lang/tw.js

@@ -781,7 +781,14 @@ export default {
     axis_name_fontsize: '名稱字體',
     pie_label_line_show: '引導線',
     outside: '外',
-    center: '中心'
+    center: '中心',
+    split: '軸線',
+    axis_line: '軸線',
+    axis_label: '軸標簽',
+    label_fontsize: '標簽大小',
+    split_line: '分割線',
+    split_color: '分割顏色',
+    shadow: '陰影'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -781,7 +781,14 @@ export default {
     axis_name_fontsize: '名称字体',
     pie_label_line_show: '引导线',
     outside: '外',
-    center: '中心'
+    center: '中心',
+    split: '轴线',
+    axis_line: '轴线',
+    axis_label: '轴标签',
+    label_fontsize: '标签大小',
+    split_line: '分割线',
+    split_color: '分割颜色',
+    shadow: '阴影'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',
@@ -939,7 +946,7 @@ export default {
     oracle_service_name: '服务名',
     get_schema: '获取 Schema',
     schema: '数据库 Schema',
-    please_choose_schema: '请选择数据库 Schema',
+    please_choose_schema: '请选择数据库 Schema'
   },
   pblink: {
     key_pwd: '请输入密码打开链接',

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

@@ -132,6 +132,50 @@ export const DEFAULT_BACKGROUND_COLOR = {
   color: '#ffffff',
   alpha: 0
 }
+export const DEFAULT_SPLIT = {
+  name: {
+    show: true,
+    color: '#999999',
+    fontSize: '12'
+  },
+  splitNumber: 5,
+  axisLine: {
+    show: true,
+    lineStyle: {
+      color: '#999999',
+      width: 1,
+      type: 'solid'
+    }
+  },
+  axisTick: {
+    show: false,
+    length: 5,
+    lineStyle: {
+      color: '#999999',
+      width: 1,
+      type: 'solid'
+    }
+  },
+  axisLabel: {
+    show: false,
+    rotate: 0,
+    margin: 8,
+    color: '#999999',
+    fontSize: '12',
+    formatter: '{value}'
+  },
+  splitLine: {
+    show: true,
+    lineStyle: {
+      color: '#999999',
+      width: 1,
+      type: 'solid'
+    }
+  },
+  splitArea: {
+    show: true
+  }
+}
 // chart config
 export const BASE_BAR = {
   title: {
@@ -349,13 +393,47 @@ export const BASE_RADAR = {
   radar: {
     shape: 'polygon',
     name: {
-      textStyle: {
-        color: '#000000'
-        // backgroundColor: '#999',
-        // borderRadius: 3,
-        // padding: [3, 5]
+      show: true,
+      color: '#999999',
+      fontSize: '12'
+    },
+    splitNumber: 5,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#999999',
+        width: 1,
+        type: 'solid'
+      }
+    },
+    axisTick: {
+      show: false,
+      length: 5,
+      lineStyle: {
+        color: '#999999',
+        width: 1,
+        type: 'solid'
       }
     },
+    axisLabel: {
+      show: false,
+      rotate: 0,
+      margin: 8,
+      color: '#999999',
+      fontSize: '12',
+      formatter: '{value}'
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: '#999999',
+        width: 1,
+        type: 'solid'
+      }
+    },
+    splitArea: {
+      show: true
+    },
     indicator: []
   },
   series: [{

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

@@ -38,6 +38,15 @@ export function componentStyle(chart_option, chart) {
       chart_option.yAxis.splitLine = customStyle.yAxis.splitLine
       chart_option.yAxis.nameTextStyle = customStyle.yAxis.nameTextStyle
     }
+    if (customStyle.split && chart.type.includes('radar')) {
+      chart_option.radar.name = customStyle.split.name
+      chart_option.radar.splitNumber = customStyle.split.splitNumber
+      chart_option.radar.axisLine = customStyle.split.axisLine
+      chart_option.radar.axisTick = customStyle.split.axisTick
+      chart_option.radar.axisLabel = customStyle.split.axisLabel
+      chart_option.radar.splitLine = customStyle.split.splitLine
+      chart_option.radar.splitArea = customStyle.split.splitArea
+    }
     if (customStyle.background) {
       chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
     }

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

+<template>
+  <div>
+    <div style="width: 100%">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <el-col>
+          <el-form ref="splitForm" :model="splitForm" label-width="80px" size="mini">
+            <el-form-item :label="$t('chart.name')" class="form-item">
+              <el-checkbox v-model="splitForm.name.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('chart.color')" class="form-item">
+              <colorPicker v-model="splitForm.name.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.text_fontsize')" class="form-item form-item-slider">
+              <el-select v-model="splitForm.name.fontSize" :placeholder="$t('chart.text_fontsize')" @change="changeSplitStyle">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_line')" class="form-item">
+              <el-checkbox v-model="splitForm.axisLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_color')" class="form-item">
+              <colorPicker v-model="splitForm.axisLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_label')" class="form-item">
+              <el-checkbox v-model="splitForm.axisLabel.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('chart.axis_label_color')" class="form-item">
+              <colorPicker v-model="splitForm.axisLabel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.label_fontsize')" class="form-item form-item-slider">
+              <el-select v-model="splitForm.axisLabel.fontSize" :placeholder="$t('chart.label_fontsize')" @change="changeSplitStyle">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('chart.split_line')" class="form-item">
+              <el-checkbox v-model="splitForm.splitLine.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('chart.split_color')" class="form-item">
+              <colorPicker v-model="splitForm.splitLine.lineStyle.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeSplitStyle" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.shadow')" class="form-item">
+              <el-checkbox v-model="splitForm.splitArea.show" @change="changeSplitStyle">{{ $t('chart.show') }}</el-checkbox>
+            </el-form-item>
+          </el-form>
+        </el-col>
+
+        <el-button slot="reference" size="mini" class="shape-item">
+          {{ $t('chart.split') }}<i class="el-icon-setting el-icon--right" />
+        </el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_SPLIT } from '../../chart/chart'
+
+export default {
+  name: 'SplitSelector',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      splitForm: JSON.parse(JSON.stringify(DEFAULT_SPLIT)),
+      isSetting: false,
+      fontSize: []
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        const chart = JSON.parse(JSON.stringify(this.chart))
+        if (chart.customStyle) {
+          let customStyle = null
+          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+          } else {
+            customStyle = JSON.parse(chart.customStyle)
+          }
+          if (customStyle.split) {
+            this.splitForm = customStyle.split
+          } else {
+            this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const arr = []
+      for (let i = 6; i <= 40; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeSplitStyle() {
+      if (!this.splitForm.show) {
+        this.isSetting = false
+      }
+      this.$emit('onChangeSplitForm', this.splitForm)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 10px 0
+  }
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider>>>.el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item>>>.el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+</style>

frontend/src/views/chart/group/Group.vue

@@ -341,7 +341,8 @@ import {
   DEFAULT_TOOLTIP,
   DEFAULT_XAXIS_STYLE,
   DEFAULT_YAXIS_STYLE,
-  DEFAULT_BACKGROUND_COLOR
+  DEFAULT_BACKGROUND_COLOR,
+  DEFAULT_SPLIT
 } from '../chart/chart'
 
 export default {
@@ -750,7 +751,8 @@ export default {
         legend: DEFAULT_LEGEND_STYLE,
         xAxis: DEFAULT_XAXIS_STYLE,
         yAxis: DEFAULT_YAXIS_STYLE,
-        background: DEFAULT_BACKGROUND_COLOR
+        background: DEFAULT_BACKGROUND_COLOR,
+        split: DEFAULT_SPLIT
       })
       view.customFilter = JSON.stringify([])
       post('/chart/view/save', view).then(response => {

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

@@ -213,6 +213,7 @@
             <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
               <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" />
+              <split-selector v-show="view.type.includes('radar')" class="attr-selector" :chart="chart" @onChangeSplitForm="onChangeSplitForm" />
               <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" />
@@ -373,7 +374,8 @@ import {
   DEFAULT_TITLE_STYLE,
   DEFAULT_TOOLTIP,
   DEFAULT_XAXIS_STYLE,
-  DEFAULT_YAXIS_STYLE
+  DEFAULT_YAXIS_STYLE,
+  DEFAULT_SPLIT
 } from '../chart/chart'
 import ColorSelector from '../components/shape-attr/ColorSelector'
 import SizeSelector from '../components/shape-attr/SizeSelector'
@@ -384,6 +386,7 @@ import TooltipSelector from '../components/shape-attr/TooltipSelector'
 import XAxisSelector from '../components/component-style/XAxisSelector'
 import YAxisSelector from '../components/component-style/YAxisSelector'
 import BackgroundColorSelector from '../components/component-style/BackgroundColorSelector'
+import SplitSelector from '../components/component-style/SplitSelector'
 import QuotaFilterEditor from '../components/filter/QuotaFilterEditor'
 import DimensionFilterEditor from '../components/filter/DimensionFilterEditor'
 import TableNormal from '../components/table/TableNormal'
@@ -393,7 +396,7 @@ import TableSelector from './TableSelector'
 
 export default {
   name: 'ChartEdit',
-  components: { TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { SplitSelector, TableSelector, ResultFilterEditor, LabelNormal, DimensionFilterEditor, TableNormal, DatasetChartDetail, QuotaFilterEditor, BackgroundColorSelector, XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
   props: {
     param: {
       type: Object,
@@ -423,7 +426,8 @@ export default {
           legend: DEFAULT_LEGEND_STYLE,
           xAxis: DEFAULT_XAXIS_STYLE,
           yAxis: DEFAULT_YAXIS_STYLE,
-          background: DEFAULT_BACKGROUND_COLOR
+          background: DEFAULT_BACKGROUND_COLOR,
+          split: DEFAULT_SPLIT
         },
         customFilter: []
       },
@@ -861,6 +865,11 @@ export default {
       this.save()
     },
 
+    onChangeSplitForm(val) {
+      this.view.customStyle.split = val
+      this.save()
+    },
+
     showDimensionEditFilter(item) {
       this.dimensionItem = JSON.parse(JSON.stringify(item))
       this.dimensionFilterEdit = true