From 4c920bdcd22623513b96de5a05f731c4aad309c9 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Tue, 23 Mar 2021 14:32:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E8=A7=86=E5=9B=BE):=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=20=E6=A0=87=E7=AD=BE=E3=80=81tooltip=E3=80=81?=
 =?UTF-8?q?=E5=9D=90=E6=A0=87=E8=BD=B4=20=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/zh.js                       |  16 ++-
 frontend/src/views/chart/chart/bar/bar.js     |  21 ++++
 frontend/src/views/chart/chart/chart.js       |  71 +++++++++--
 .../src/views/chart/chart/common/common.js    |  14 +++
 .../src/views/chart/chart/funnel/funnel.js    |  11 ++
 frontend/src/views/chart/chart/line/line.js   |  11 ++
 frontend/src/views/chart/chart/pie/pie.js     |  11 ++
 frontend/src/views/chart/chart/radar/radar.js |  11 ++
 .../views/chart/components/ChartComponent.vue |   2 +-
 .../component_style/LegendSelector.vue        |  40 +++++-
 .../component_style/XAxisSelector.vue         |  95 +++++++++++++++
 .../component_style/YAxisSelector.vue         |  95 +++++++++++++++
 .../components/shape_attr/LabelSelector.vue   | 115 ++++++++++++++++++
 .../components/shape_attr/TooltipSelector.vue | 112 +++++++++++++++++
 frontend/src/views/chart/group/Group.vue      |  13 +-
 frontend/src/views/chart/view/ChartEdit.vue   |  43 ++++++-
 16 files changed, 665 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/views/chart/components/component_style/XAxisSelector.vue
 create mode 100644 frontend/src/views/chart/components/component_style/YAxisSelector.vue
 create mode 100644 frontend/src/views/chart/components/shape_attr/LabelSelector.vue
 create mode 100644 frontend/src/views/chart/components/shape_attr/TooltipSelector.vue

diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 83ec00e644..a72074f27a 100644
--- 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: '数据集',
diff --git a/frontend/src/views/chart/chart/bar/bar.js b/frontend/src/views/chart/chart/bar/bar.js
index 1710015b53..fdb3f08a07 100644
--- 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)
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 8e11dc813e..06703dd01c 100644
--- 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: {
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index 3c764bb830..6d19b2eba2 100644
--- 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
     }
   }
 }
diff --git a/frontend/src/views/chart/chart/funnel/funnel.js b/frontend/src/views/chart/chart/funnel/funnel.js
index 23cec85820..8a5c4fc9c2 100644
--- 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)
diff --git a/frontend/src/views/chart/chart/line/line.js b/frontend/src/views/chart/chart/line/line.js
index dc9bf65664..ff1bce7272 100644
--- 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)
diff --git a/frontend/src/views/chart/chart/pie/pie.js b/frontend/src/views/chart/chart/pie/pie.js
index 24abb5f9bb..7ca1d77d6c 100644
--- 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 = {
diff --git a/frontend/src/views/chart/chart/radar/radar.js b/frontend/src/views/chart/chart/radar/radar.js
index 1ea585dc35..798f7cf0e3 100644
--- 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)
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 59bf4f9e45..20ea449dcb 100644
--- 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') {
diff --git a/frontend/src/views/chart/components/component_style/LegendSelector.vue b/frontend/src/views/chart/components/component_style/LegendSelector.vue
index 3b7c3aefa9..98b0153adf 100644
--- 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)
     }
diff --git a/frontend/src/views/chart/components/component_style/XAxisSelector.vue b/frontend/src/views/chart/components/component_style/XAxisSelector.vue
new file mode 100644
index 0000000000..e265eb2794
--- /dev/null
+++ 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>
diff --git a/frontend/src/views/chart/components/component_style/YAxisSelector.vue b/frontend/src/views/chart/components/component_style/YAxisSelector.vue
new file mode 100644
index 0000000000..5a03bbfdd0
--- /dev/null
+++ 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>
diff --git a/frontend/src/views/chart/components/shape_attr/LabelSelector.vue b/frontend/src/views/chart/components/shape_attr/LabelSelector.vue
new file mode 100644
index 0000000000..62d3093d36
--- /dev/null
+++ 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>
diff --git a/frontend/src/views/chart/components/shape_attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape_attr/TooltipSelector.vue
new file mode 100644
index 0000000000..873504e014
--- /dev/null
+++ 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>
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index a5230de522..0548fd9989 100644
--- 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,
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 2ee1994e07..a2de6850cd 100644
--- 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()
     }
   }
 }