refactor(视图): 增加标签、tooltip、坐标轴设置

2021-03-23 14:32:39 +08:00 · 2021-03-23 14:32:39 +08:00 · 4c920bdcd2
commit 4c920bdcd2
parent fb23a459dd
16 changed files with 665 additions and 16 deletions
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -658,7 +658,21 @@ export default {
    legend: '图例',
    shape: '形状',
    polygon: '多边形',
-    circle: '圆形'
+    circle: '圆形',
+    label: '标签',
+    label_position: '标签位置',
+    content_formatter: '内容格式',
+    inside: '内',
+    tooltip: '提示',
+    tooltip_item: '数据项',
+    tooltip_axis: '坐标轴',
+    formatter_plc: '内容格式为空时，显示默认格式',
+    xAxis: '横轴',
+    yAxis: '纵轴',
+    position: '位置',
+    rotate: '角度',
+    name: '名称',
+    icon: '图标'
  },
  dataset: {
    datalist: '数据集',
--- a/frontend/src/views/chart/chart/bar/bar.js
+++ b/frontend/src/views/chart/chart/bar/bar.js
@ -9,6 +9,13 @@ export function baseBarOption(chart_option, chart) {
    if (customAttr.color) {
      chart_option.color = customAttr.color.colors
    }
+    // tooltip
+    if (customAttr.tooltip) {
+      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+      const reg = new RegExp('\n', 'g')
+      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
+      chart_option.tooltip = tooltip
+    }
  }
  // 处理data
  if (chart.data) {
@ -30,6 +37,10 @@ export function baseBarOption(chart_option, chart) {
          y.barGap = customAttr.size.barGap
        }
      }
+      // label
+      if (customAttr.label) {
+        y.label = customAttr.label
+      }
      y.type = 'bar'
      chart_option.legend.data.push(y.name)
      chart_option.series.push(y)
@ -61,6 +72,12 @@ export function horizontalBarOption(chart_option, chart) {
    if (customAttr.color) {
      chart_option.color = customAttr.color.colors
    }
+    if (customAttr.tooltip) {
+      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+      const reg = new RegExp('\n', 'g')
+      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
+      chart_option.tooltip = tooltip
+    }
  }
  // 处理data
  if (chart.data) {
@ -82,6 +99,10 @@ export function horizontalBarOption(chart_option, chart) {
          y.barGap = customAttr.size.barGap
        }
      }
+      // label
+      if (customAttr.label) {
+        y.label = customAttr.label
+      }
      y.type = 'bar'
      chart_option.legend.data.push(y.name)
      chart_option.series.push(y)
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@ -18,10 +18,26 @@ export const DEFAULT_SIZE = {
  funnelWidth: 80,
  radarShape: 'polygon'
 }
+export const DEFAULT_LABEL = {
+  show: false,
+  position: 'top',
+  color: '#909399',
+  fontSize: '10',
+  formatter: '{c}'
+}
+export const DEFAULT_TOOLTIP = {
+  show: true,
+  trigger: 'item',
+  textStyle: {
+    fontSize: '10',
+    color: '#909399'
+  },
+  formatter: ''
+}
 export const DEFAULT_TITLE_STYLE = {
  show: true,
  fontSize: '18',
-  color: '#000000',
+  color: '#303133',
  hPosition: 'center',
  vPosition: 'top',
  isItalic: false
@ -30,8 +46,30 @@ export const DEFAULT_LEGEND_STYLE = {
  show: true,
  hPosition: 'center',
  vPosition: 'bottom',
-  orient: 'horizontal'
+  orient: 'horizontal',
+  icon: 'rect',
+  textStyle: {
+    color: '#333333',
+    fontSize: '12'
+  }
 }
+export const DEFAULT_XAXIS_STYLE = {
+  show: true,
+  position: 'bottom',
+  name: '',
+  axisLabel: {
+    rotate: 0
+  }
+}
+export const DEFAULT_YAXIS_STYLE = {
+  show: true,
+  position: 'left',
+  name: '',
+  axisLabel: {
+    rotate: 0
+  }
+}
+// chart config
 export const BASE_BAR = {
  title: {
    text: ''
@ -40,6 +78,9 @@ export const BASE_BAR = {
  legend: {
    show: true,
    type: 'scroll',
+    itemWidth: 10,
+    itemHeight: 10,
+    icon: 'rect',
    data: []
  },
  xAxis: {
@ -63,6 +104,9 @@ export const HORIZONTAL_BAR = {
  legend: {
    show: true,
    type: 'scroll',
+    itemWidth: 10,
+    itemHeight: 10,
+    icon: 'rect',
    data: []
  },
  xAxis: {
@ -87,6 +131,9 @@ export const BASE_LINE = {
  legend: {
    show: true,
    type: 'scroll',
+    itemWidth: 10,
+    itemHeight: 10,
+    icon: 'rect',
    data: []
  },
  xAxis: {
@ -108,13 +155,13 @@ export const BASE_PIE = {
  title: {
    text: ''
  },
-  tooltip: {
-    trigger: 'item',
-    formatter: '{a} <br/>{b}: {c} ({d}%)'
-  },
+  tooltip: {},
  legend: {
    show: true,
-    type: 'scroll'
+    type: 'scroll',
+    itemWidth: 10,
+    itemHeight: 10,
+    icon: 'rect'
  },
  series: [
    {
@ -143,7 +190,10 @@ export const BASE_FUNNEL = {
  },
  legend: {
    show: true,
-    type: 'scroll'
+    type: 'scroll',
+    itemWidth: 10,
+    itemHeight: 10,
+    icon: 'rect'
  },
  series: [
    {
@ -190,6 +240,11 @@ export const BASE_RADAR = {
  },
  tooltip: {},
  legend: {
+    show: true,
+    type: 'scroll',
+    itemWidth: 10,
+    itemHeight: 10,
+    icon: 'rect',
    data: []
  },
  radar: {
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@ -16,6 +16,20 @@ export function componentStyle(chart_option, chart) {
      chart_option.legend.left = customStyle.legend.hPosition
      chart_option.legend.top = customStyle.legend.vPosition
      chart_option.legend.orient = customStyle.legend.orient
+      chart_option.legend.icon = customStyle.legend.icon
+      chart_option.legend.textStyle = customStyle.legend.textStyle
+    }
+    if (customStyle.xAxis && (chart.type.includes('bar') || chart.type.includes('line'))) {
+      chart_option.xAxis.show = customStyle.xAxis.show
+      chart_option.xAxis.position = customStyle.xAxis.position
+      chart_option.xAxis.name = customStyle.xAxis.name
+      chart_option.xAxis.axisLabel = customStyle.xAxis.axisLabel
+    }
+    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
    }
  }
 }
--- a/frontend/src/views/chart/chart/funnel/funnel.js
+++ b/frontend/src/views/chart/chart/funnel/funnel.js
@ -9,6 +9,13 @@ export function baseFunnelOption(chart_option, chart) {
    if (customAttr.color) {
      chart_option.color = customAttr.color.colors
    }
+    // tooltip
+    if (customAttr.tooltip) {
+      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+      const reg = new RegExp('\n', 'g')
+      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
+      chart_option.tooltip = tooltip
+    }
  }
  // 处理data
  if (chart.data) {
@ -19,6 +26,10 @@ export function baseFunnelOption(chart_option, chart) {
      if (customAttr.size) {
        chart_option.series[0].width = customAttr.size.funnelWidth + '%'
      }
+      // label
+      if (customAttr.label) {
+        chart_option.series[0].label = customAttr.label
+      }
      const valueArr = chart.data.series[0].data
      // max value
      chart_option.series[0].max = Math.max.apply(Math, valueArr)
--- a/frontend/src/views/chart/chart/line/line.js
+++ b/frontend/src/views/chart/chart/line/line.js
@ -9,6 +9,13 @@ export function baseLineOption(chart_option, chart) {
    if (customAttr.color) {
      chart_option.color = customAttr.color.colors
    }
+    // tooltip
+    if (customAttr.tooltip) {
+      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+      const reg = new RegExp('\n', 'g')
+      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
+      chart_option.tooltip = tooltip
+    }
  }
  // 处理data
  if (chart.data) {
@ -31,6 +38,10 @@ export function baseLineOption(chart_option, chart) {
        y.smooth = customAttr.size.lineSmooth
        customAttr.size.lineArea ? y.areaStyle = { opacity: 0.6 } : { opacity: 0 }
      }
+      // label
+      if (customAttr.label) {
+        y.label = customAttr.label
+      }
      y.type = 'line'
      chart_option.legend.data.push(y.name)
      chart_option.series.push(y)
--- a/frontend/src/views/chart/chart/pie/pie.js
+++ b/frontend/src/views/chart/chart/pie/pie.js
@ -9,6 +9,13 @@ export function basePieOption(chart_option, chart) {
    if (customAttr.color) {
      chart_option.color = customAttr.color.colors
    }
+    // tooltip
+    if (customAttr.tooltip) {
+      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+      const reg = new RegExp('\n', 'g')
+      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
+      chart_option.tooltip = tooltip
+    }
  }
  // 处理data
  if (chart.data) {
@ -19,6 +26,10 @@ export function basePieOption(chart_option, chart) {
      if (customAttr.size) {
        chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']
      }
+      // label
+      if (customAttr.label) {
+        chart_option.series[0].label = customAttr.label
+      }
      const valueArr = chart.data.series[0].data
      for (let i = 0; i < valueArr.length; i++) {
        const y = {
--- a/frontend/src/views/chart/chart/radar/radar.js
+++ b/frontend/src/views/chart/chart/radar/radar.js
@ -13,6 +13,13 @@ export function baseRadarOption(chart_option, chart) {
    if (customAttr.size) {
      chart_option.radar.shape = customAttr.size.radarShape
    }
+    // tooltip
+    if (customAttr.tooltip) {
+      const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip))
+      const reg = new RegExp('\n', 'g')
+      tooltip.formatter = tooltip.formatter.replace(reg, '<br/>')
+      chart_option.tooltip = tooltip
+    }
  }
  // 处理data
  if (chart.data) {
@ -26,6 +33,10 @@ export function baseRadarOption(chart_option, chart) {
      y.itemStyle = {
        color: hexColorToRGBA(customAttr.color.colors[i % 9], customAttr.color.alpha)
      }
+      // label
+      if (customAttr.label) {
+        y.label = customAttr.label
+      }
      chart_option.legend.data.push(y.name)
      y.value = JSON.parse(JSON.stringify(y.data))
      chart_option.series[0].data.push(y)
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@ -46,7 +46,7 @@ export default {
    drawEcharts() {
      const chart = this.chart
      let chart_option = {}
-      // todo type
+      // type
      if (chart.type === 'bar') {
        chart_option = baseBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
      } else if (chart.type === 'bar-stack') {
--- a/frontend/src/views/chart/components/component_style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component_style/LegendSelector.vue
@ -11,12 +11,30 @@
            <el-form-item :label="$t('chart.show')" class="form-item">
              <el-checkbox v-model="legendForm.show" @change="changeLegendStyle">{{ $t('chart.show') }}</el-checkbox>
            </el-form-item>
+            <el-form-item :label="$t('chart.icon')" class="form-item">
+              <el-select v-model="legendForm.icon" :placeholder="$t('chart.icon')" @change="changeLegendStyle">
+                <el-option
+                  v-for="item in iconSymbolOptions"
+                  :key="item.value"
+                  :label="item.name"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
            <el-form-item :label="$t('chart.orient')" class="form-item">
              <el-radio-group v-model="legendForm.orient" size="mini" @change="changeLegendStyle">
                <el-radio-button label="horizontal">{{ $t('chart.horizontal') }}</el-radio-button>
                <el-radio-button label="vertical">{{ $t('chart.vertical') }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
+            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+              <el-select v-model="legendForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLegendStyle">
+                <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.text_color')" class="form-item">
+              <colorPicker v-model="legendForm.textStyle.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeLegendStyle" />
+            </el-form-item>
            <el-form-item :label="$t('chart.text_h_position')" class="form-item">
              <el-radio-group v-model="legendForm.hPosition" size="mini" @change="changeLegendStyle">
                <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
@ -53,7 +71,16 @@ export default {
  },
  data() {
    return {
-      legendForm: JSON.parse(JSON.stringify(DEFAULT_LEGEND_STYLE))
+      legendForm: JSON.parse(JSON.stringify(DEFAULT_LEGEND_STYLE)),
+      fontSize: [],
+      iconSymbolOptions: [
+        { name: this.$t('chart.line_symbol_emptyCircle'), value: 'emptyCircle' },
+        { name: this.$t('chart.line_symbol_circle'), value: 'circle' },
+        { name: this.$t('chart.line_symbol_rect'), value: 'rect' },
+        { name: this.$t('chart.line_symbol_roundRect'), value: 'roundRect' },
+        { name: this.$t('chart.line_symbol_triangle'), value: 'triangle' },
+        { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' }
+      ]
    }
  },
  watch: {
@ -70,8 +97,19 @@ export default {
    }
  },
  mounted() {
+    this.init()
  },
  methods: {
+    init() {
+      const arr = []
+      for (let i = 10; i <= 60; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
    changeLegendStyle() {
      this.$emit('onLegendChange', this.legendForm)
    }
--- a/frontend/src/views/chart/components/component_style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component_style/XAxisSelector.vue
@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <el-col>
+          <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
+            <el-form-item :label="$t('chart.show')" class="form-item">
+              <el-checkbox v-model="axisForm.show" @change="changeXAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('chart.position')" class="form-item">
+              <el-radio-group v-model="axisForm.position" size="mini" @change="changeXAxisStyle">
+                <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
+                <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('chart.name')" class="form-item">
+              <el-input v-model="axisForm.name" size="mini" @blur="changeXAxisStyle" />
+            </el-form-item>
+            <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>
+        </el-col>
+
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.xAxis') }}<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_XAXIS_STYLE } from '../../chart/chart'
+
+export default {
+  name: 'XAxisSelector',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE))
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        const chart = JSON.parse(JSON.stringify(this.chart))
+        if (chart.customStyle) {
+          const customStyle = JSON.parse(chart.customStyle)
+          if (customStyle.xAxis) {
+            this.axisForm = customStyle.xAxis
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeXAxisStyle() {
+      this.$emit('onChangeXAxisForm', this.axisForm)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shape-item{
+  padding: 6px;
+  border: none;
+}
+.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;
+  }
+</style>
--- a/frontend/src/views/chart/components/component_style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component_style/YAxisSelector.vue
@ -0,0 +1,95 @@
+<template>
+  <div>
+    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <el-col>
+          <el-form ref="axisForm" :model="axisForm" label-width="80px" size="mini">
+            <el-form-item :label="$t('chart.show')" class="form-item">
+              <el-checkbox v-model="axisForm.show" @change="changeYAxisStyle">{{ $t('chart.show') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('chart.position')" class="form-item">
+              <el-radio-group v-model="axisForm.position" size="mini" @change="changeYAxisStyle">
+                <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+                <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('chart.name')" class="form-item">
+              <el-input v-model="axisForm.name" size="mini" @blur="changeYAxisStyle" />
+            </el-form-item>
+            <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>
+        </el-col>
+
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.yAxis') }}<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_YAXIS_STYLE } from '../../chart/chart'
+
+export default {
+  name: 'YAxisSelector',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      axisForm: JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE))
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        const chart = JSON.parse(JSON.stringify(this.chart))
+        if (chart.customStyle) {
+          const customStyle = JSON.parse(chart.customStyle)
+          if (customStyle.yAxis) {
+            this.axisForm = customStyle.yAxis
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    changeYAxisStyle() {
+      this.$emit('onChangeYAxisForm', this.axisForm)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shape-item{
+  padding: 6px;
+  border: none;
+}
+.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;
+  }
+</style>
--- a/frontend/src/views/chart/components/shape_attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape_attr/LabelSelector.vue
@ -0,0 +1,115 @@
+<template>
+  <div>
+    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <el-col>
+          <el-form ref="labelForm" :model="labelForm" label-width="80px" size="mini">
+            <el-form-item :label="$t('chart.show')" class="form-item">
+              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+              <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
+                <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.text_color')" class="form-item">
+              <colorPicker v-model="labelForm.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeLabelAttr" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.label_position')" class="form-item">
+              <el-radio-group v-model="labelForm.position" size="mini" @change="changeLabelAttr">
+                <el-radio-button label="inside">{{ $t('chart.inside') }}</el-radio-button>
+                <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
+                <el-radio-button label="bottom">{{ $t('chart.text_pos_bottom') }}</el-radio-button>
+                <el-radio-button label="left">{{ $t('chart.text_pos_left') }}</el-radio-button>
+                <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('chart.content_formatter')" class="form-item">
+              <el-input v-model="labelForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" @blur="changeLabelAttr"/>
+            </el-form-item>
+          </el-form>
+        </el-col>
+
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.label') }}<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_LABEL } from '../../chart/chart'
+
+export default {
+  name: 'LabelSelector',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
+      fontSize: []
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        const chart = JSON.parse(JSON.stringify(this.chart))
+        if (chart.customAttr) {
+          const customAttr = JSON.parse(chart.customAttr)
+          if (customAttr.label) {
+            this.labelForm = customAttr.label
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const arr = []
+      for (let i = 10; i <= 20; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeLabelAttr() {
+      this.$emit('onLabelChange', this.labelForm)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shape-item{
+  padding: 6px;
+  border: none;
+}
+.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;
+  }
+</style>
--- a/frontend/src/views/chart/components/shape_attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape_attr/TooltipSelector.vue
@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div style="width:100%;height: 32px;margin:0;padding:0 4px;border-radius: 4px;border: 1px solid #DCDFE6;display: flex;align-items: center;">
+      <el-popover
+        placement="right"
+        width="400"
+        trigger="click"
+      >
+        <el-col>
+          <el-form ref="tooltipForm" :model="tooltipForm" label-width="80px" size="mini">
+            <el-form-item :label="$t('chart.show')" class="form-item">
+              <el-checkbox v-model="tooltipForm.show" @change="changeTooltipAttr">{{ $t('chart.show') }}</el-checkbox>
+            </el-form-item>
+            <el-form-item :label="$t('chart.label_position')" class="form-item">
+              <el-radio-group v-model="tooltipForm.trigger" size="mini" @change="changeTooltipAttr">
+                <el-radio-button label="item">{{ $t('chart.tooltip_item') }}</el-radio-button>
+                <el-radio-button label="axis">{{ $t('chart.tooltip_axis') }}</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+              <el-select v-model="tooltipForm.textStyle.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTooltipAttr">
+                <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.text_color')" class="form-item">
+              <colorPicker v-model="tooltipForm.textStyle.color" style="padding-top: 6px;cursor: pointer;z-index: 999" @change="changeTooltipAttr" />
+            </el-form-item>
+            <el-form-item :label="$t('chart.content_formatter')" class="form-item">
+              <el-input v-model="tooltipForm.formatter" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :placeholder="$t('chart.formatter_plc')" @blur="changeTooltipAttr" />
+            </el-form-item>
+          </el-form>
+        </el-col>
+
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.tooltip') }}<i class="el-icon-setting el-icon--right" /></el-button>
+      </el-popover>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_TOOLTIP } from '../../chart/chart'
+
+export default {
+  name: 'TooltipSelector',
+  props: {
+    chart: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      tooltipForm: JSON.parse(JSON.stringify(DEFAULT_TOOLTIP)),
+      fontSize: []
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        const chart = JSON.parse(JSON.stringify(this.chart))
+        if (chart.customAttr) {
+          const customAttr = JSON.parse(chart.customAttr)
+          if (customAttr.tooltip) {
+            this.tooltipForm = customAttr.tooltip
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      const arr = []
+      for (let i = 10; i <= 20; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
+    changeTooltipAttr() {
+      this.$emit('onTooltipChange', this.tooltipForm)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.shape-item{
+  padding: 6px;
+  border: none;
+}
+.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;
+  }
+</style>
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@ -211,7 +211,14 @@
 <script>
 import { post } from '@/api/chart/chart'
 import TableSelector from '../view/TableSelector'
-import { DEFAULT_COLOR_CASE, DEFAULT_LEGEND_STYLE, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '../chart/chart'
+import {
+  DEFAULT_COLOR_CASE,
+  DEFAULT_LABEL,
+  DEFAULT_LEGEND_STYLE,
+  DEFAULT_SIZE,
+  DEFAULT_TITLE_STYLE,
+  DEFAULT_TOOLTIP
+} from '../chart/chart'

 export default {
  name: 'Group',
@ -507,7 +514,9 @@ export default {
      view.type = 'bar'
      view.customAttr = JSON.stringify({
        color: DEFAULT_COLOR_CASE,
-        size: DEFAULT_SIZE
+        size: DEFAULT_SIZE,
+        label: DEFAULT_LABEL,
+        tooltip: DEFAULT_TOOLTIP
      })
      view.customStyle = JSON.stringify({
        text: DEFAULT_TITLE_STYLE,
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -106,10 +106,14 @@
            <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
              <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
              <size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
+              <label-selector class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+              <tooltip-selector 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 class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+              <x-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
+              <y-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
            </el-tab-pane>
          </el-tabs>
        </div>
@ -168,15 +172,26 @@ import DimensionItem from '../components/DimensionItem'
 import QuotaItem from '../components/QuotaItem'
 import ChartComponent from '../components/ChartComponent'
 // shape attr,component style
-import { DEFAULT_COLOR_CASE, DEFAULT_SIZE, DEFAULT_TITLE_STYLE, DEFAULT_LEGEND_STYLE } from '../chart/chart'
+import {
+  DEFAULT_COLOR_CASE,
+  DEFAULT_SIZE,
+  DEFAULT_TITLE_STYLE,
+  DEFAULT_LEGEND_STYLE,
+  DEFAULT_LABEL,
+  DEFAULT_TOOLTIP
+} from '../chart/chart'
 import ColorSelector from '../components/shape_attr/ColorSelector'
 import SizeSelector from '../components/shape_attr/SizeSelector'
+import LabelSelector from '../components/shape_attr/LabelSelector'
 import TitleSelector from '../components/component_style/TitleSelector'
 import LegendSelector from '../components/component_style/LegendSelector'
+import TooltipSelector from '../components/shape_attr/TooltipSelector'
+import XAxisSelector from '../components/component_style/XAxisSelector'
+import YAxisSelector from '../components/component_style/YAxisSelector'

 export default {
  name: 'ChartEdit',
-  components: { LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
+  components: { XAxisSelector, YAxisSelector, TooltipSelector, LabelSelector, LegendSelector, TitleSelector, SizeSelector, ColorSelector, ChartComponent, QuotaItem, DimensionItem, draggable },
  data() {
    return {
      table: {},
@ -190,7 +205,9 @@ export default {
        title: '',
        customAttr: {
          color: DEFAULT_COLOR_CASE,
-          size: DEFAULT_SIZE
+          size: DEFAULT_SIZE,
+          label: DEFAULT_LABEL,
+          tooltip: DEFAULT_TOOLTIP
        },
        customStyle: {
          text: DEFAULT_TITLE_STYLE,
@ -417,6 +434,26 @@ export default {
    onLegendChange(val) {
      this.view.customStyle.legend = val
      this.save()
+    },
+
+    onLabelChange(val) {
+      this.view.customAttr.label = val
+      this.save()
+    },
+
+    onTooltipChange(val) {
+      this.view.customAttr.tooltip = val
+      this.save()
+    },
+
+    onChangeXAxisForm(val) {
+      this.view.customStyle.xAxis = val
+      this.save()
+    },
+
+    onChangeYAxisForm(val) {
+      this.view.customStyle.yAxis = val
+      this.save()
    }
  }
 }