diff --git a/nezha-fronted/src/components/chart/chart/chartAutotopology.vue b/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
index a576c6be3..da7f20fe5 100644
--- a/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
+++ b/nezha-fronted/src/components/chart/chart/chartAutotopology.vue
@@ -38,7 +38,11 @@ export default {
     topology
   },
   methods: {
+    initChart () {
+      this.queryAllProjectData()
+    },
     queryAllProjectData () {
+      this.isInit = false
       this.$get('monitor/project', { pageSize: -1 }).then(res => {
         this.topologyLoading = true
         const axiosAll = []
diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue
index 444a99bf9..1759a3728 100644
--- a/nezha-fronted/src/components/chart/chart/chartBar.vue
+++ b/nezha-fronted/src/components/chart/chart/chartBar.vue
@@ -11,6 +11,7 @@
       :chart-data="chartData"
       :chart-info="chartInfo"
       :legends="legends"
+      :series="series"
       :is-fullscreen="isFullscreen"
     ></chart-legend>
   </div>
@@ -80,7 +81,7 @@ export default {
     initChart (chartOption = this.chartOption) {
       const self = this
       this.legends = []
-      chartOption.series = this.initBarData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
+      this.series = chartOption.series = this.initBarData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
       if (this.isNoData) {
         return
       }
@@ -129,12 +130,13 @@ export default {
             const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             // eslint-disable-next-line vue/no-mutating-props
             mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
+            const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
             s.data.push({
               value: value,
               realValue: value,
               showValue: showValue,
-              name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name,
-              alias: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias,
+              name: legend.name,
+              alias: legend.alias,
               labels: data.metric,
               seriesIndex: expressionIndex,
               dataIndex: dataIndex,
diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue
index 11460a54d..de5e69a41 100644
--- a/nezha-fronted/src/components/chart/chart/chartGauge.vue
+++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue
@@ -61,6 +61,7 @@ export default {
     },
     initGaugeData (chartInfo, originalDatas) {
       this.gaugeData = []
+      this.isInit = false
       return new Promise(resolve => {
         let colorIndex = 0
         originalDatas.forEach((originalData, expressionIndex) => {
diff --git a/nezha-fronted/src/components/chart/chart/chartMap.vue b/nezha-fronted/src/components/chart/chart/chartMap.vue
index f28bab69f..5d3775d9b 100644
--- a/nezha-fronted/src/components/chart/chart/chartMap.vue
+++ b/nezha-fronted/src/components/chart/chart/chartMap.vue
@@ -56,6 +56,7 @@ export default {
             loadPromise = this.loadDataCenterMapData()
           }
         })
+        this.isInit = false
         return loadPromise
       }, 500)
     },
diff --git a/nezha-fronted/src/components/chart/chart/chartPie.vue b/nezha-fronted/src/components/chart/chart/chartPie.vue
index b1ff4c961..1dea690ab 100644
--- a/nezha-fronted/src/components/chart/chart/chartPie.vue
+++ b/nezha-fronted/src/components/chart/chart/chartPie.vue
@@ -106,12 +106,13 @@ export default {
             const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             // eslint-disable-next-line vue/no-mutating-props
             mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
+            const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
             s.data.push({
               value: value,
               realValue: value,
               showValue: showValue,
-              name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name,
-              alias: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias,
+              name: legend.name,
+              alias: legend.alias,
               labels: data.metric,
               seriesIndex: expressionIndex,
               dataIndex: dataIndex,
diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue
index c04ebf2ba..faf397f5b 100644
--- a/nezha-fronted/src/components/chart/chart/chartStat.vue
+++ b/nezha-fronted/src/components/chart/chart/chartStat.vue
@@ -137,6 +137,7 @@ export default {
           item.width = width
         }
       })
+      this.isInit = false
     },
     resize () {
       this.getLayout().then(layout => {
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index 1b3e57d86..114870520 100644
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -87,6 +87,7 @@ export default {
         this.tableData = arr
         this.oldTableData = lodash.cloneDeep(arr)
         this.$refs.dataTable && this.$refs.dataTable.doLayout()
+        this.isInit = false
       }, 200)
     },
     initTableData (chartInfo, originalDatas) {
@@ -249,10 +250,8 @@ export default {
     // 本地正序
     asce (prop) {
       return function (obj1, obj2) {
-        console.log(obj1, obj2)
         const val1 = obj1.display[prop + 'display'].replace(/\s*/g, '')
         const val2 = obj2.display[prop + 'display'].replace(/\s*/g, '')
-        console.log(val1, val2, val1 < val2)
         if (val1 < val2) {
           return -1
         } else if (val1 > val2) {
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index 3f50b5d5b..7bcb9b690 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -43,7 +43,6 @@ export default {
     return {
       stackTotalColor: null,
       isStack: false,
-      series: []
     }
   },
   computed: {
diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
index 80fb49754..c79d3d7ba 100644
--- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
@@ -11,6 +11,7 @@
       :chart-data="chartData"
       :chart-info="chartInfo"
       :legends="legends"
+      :series="series"
       :is-fullscreen="isFullscreen"
     ></chart-legend>
   </div>
@@ -79,7 +80,7 @@ export default {
   methods: {
     initChart (chartOption = this.chartOption) {
       this.legends = []
-      chartOption.series[0] = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
+      this.series = chartOption.series = this.initTreeMapData(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
       chartOption.tooltip.formatter = this.formatterFunc
       chartOption.tooltip.position = this.tooltipPosition
       /* 使用setTimeout延迟渲染图表，避免样式错乱 */
@@ -104,12 +105,13 @@ export default {
             const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             // eslint-disable-next-line vue/no-mutating-props
             this.chartOption.color && mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
+            const legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
             s.data.push({
               value: value,
               realValue: value,
               showValue: showValue,
-              name: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).name,
-              alias: this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex).alias,
+              name: legend.name,
+              alias: legend.alias,
               labels: data.metric,
               seriesIndex: expressionIndex,
               dataIndex: dataIndex,
@@ -130,7 +132,7 @@ export default {
         })
       })
       this.$emit('chartIsNoData', this.isNoData)
-      return s
+      return [s]
     },
     formatterFunc (params, ticket, callback) {
       const self = this
diff --git a/nezha-fronted/src/components/chart/chart/legend.vue b/nezha-fronted/src/components/chart/chart/legend.vue
index 16b83a41a..2824ccf0b 100644
--- a/nezha-fronted/src/components/chart/chart/legend.vue
+++ b/nezha-fronted/src/components/chart/chart/legend.vue
@@ -79,6 +79,15 @@ export default {
       const curIsGrey = this.isGrey[index] // 当前legend的状态
       const currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1 // 当前legend是否是目前唯一高亮的
       const echarts = getChart(this.chartId)
+      if (this.chartInfo.type === 'bar') {
+        this.clickLegendBar(legendName, index, hasGrey, curIsGrey, currentIsTheOnlyOneHighlight)
+        return
+      }
+      if (this.chartInfo.type === 'treemap') {
+        this.clickLegendTreemap(legendName, index, hasGrey, curIsGrey, currentIsTheOnlyOneHighlight)
+        return
+      }
+
       if (echarts) {
         if (!hasGrey) { // 1.除当前legend外全置灰
           echarts.dispatchAction({
@@ -102,32 +111,86 @@ export default {
           })
           this.$set(this.isGrey, index, !this.isGrey[index])
         }
-        // 处理点击后的 Y轴
-        const chartInfo = this.chartInfo
-        const dataArg = this.series.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])
-        const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
-        const maxValue = maxValueCopies.maxValue
-        const copies = maxValueCopies.copies
-        const unit = maxValueCopies.unit
-        const option = {
-          yAxis: {
-            minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
-            maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
+        if (this.chartInfo.type !== 'pie' && this.chartInfo.type !== 'bar' && this.chartInfo.type !== 'treemap') {
+          // 处理点击后的 Y轴
+          const chartInfo = this.chartInfo
+          const dataArg = this.series.filter((seriesItem, seriesIndex) => !this.isGrey[seriesIndex])
+          const maxValueCopies = this.getMaxValue(dataArg, chartInfo)
+          const maxValue = maxValueCopies.maxValue
+          const copies = maxValueCopies.copies
+          const unit = maxValueCopies.unit
+          const option = {
+            yAxis: {
+              minInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'min'),
+              maxInterval: chartDataFormat.Interval(maxValue, copies, unit.type, 'max') * Math.ceil(dataArg.length / 5)
+            }
           }
-        }
-        if (!maxValueCopies.copies) {
-          option.yAxis.min = 0
-          option.yAxis.max = 1
-        } else {
-          option.yAxis.max = undefined
-        }
-        if (unit.type == 'Time' || option.yAxis.maxInterval === 1) {
-          delete option.yAxis.maxInterval
-        }
-        getChart(this.chartId) && getChart(this.chartId).setOption({
-          yAxis: {
-            ...option.yAxis
+          if (!maxValueCopies.copies) {
+            option.yAxis.min = 0
+            option.yAxis.max = 1
+          } else {
+            option.yAxis.max = undefined
           }
+          if (unit.type == 'Time' || option.yAxis.maxInterval === 1) {
+            delete option.yAxis.maxInterval
+          }
+          getChart(this.chartId) && getChart(this.chartId).setOption({
+            yAxis: {
+              ...option.yAxis
+            }
+          })
+        }
+      }
+    },
+    clickLegendBar (legendName, index, hasGrey, curIsGrey, currentIsTheOnlyOneHighlight) {
+      const echarts = getChart(this.chartId)
+      if (echarts) {
+        let data = []
+        const xAxis = {
+          data: []
+        }
+        data = lodash.cloneDeep(this.series)
+        if (!hasGrey) { // 1.除当前legend外全置灰
+          this.isGrey = this.isGrey.map((g, i) => i !== index)
+        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+          this.isGrey = this.isGrey.map(() => false)
+        } else { // 对应高亮
+          this.$set(this.isGrey, index, !this.isGrey[index])
+        }
+        data[0].data = data[0].data.filter((item, i) => !this.isGrey[i])
+        xAxis.data = data[0].data.map(item => {
+          if (this.chartInfo.param.text == 'all' || this.chartInfo.param.text == 'legend') {
+            return item.name
+          } else {
+            return ''
+          }
+        })
+        echarts.setOption({
+          series: data,
+          xAxis: {
+            data: xAxis.data
+          }
+        })
+      }
+    },
+    clickLegendTreemap (legendName, index, hasGrey, curIsGrey, currentIsTheOnlyOneHighlight) {
+      const echarts = getChart(this.chartId)
+      if (echarts) {
+        let data = []
+        const xAxis = {
+          data: []
+        }
+        data = lodash.cloneDeep(this.series)
+        if (!hasGrey) { // 1.除当前legend外全置灰
+          this.isGrey = this.isGrey.map((g, i) => i !== index)
+        } else if (currentIsTheOnlyOneHighlight) { // 2.全高亮
+          this.isGrey = this.isGrey.map(() => false)
+        } else { // 对应高亮
+          this.$set(this.isGrey, index, !this.isGrey[index])
+        }
+        data[0].data = data[0].data.filter((item, i) => !this.isGrey[i])
+        echarts.setOption({
+          series: data
         })
       }
     },
@@ -181,7 +244,7 @@ export default {
         unit,
         oldDot
       }
-    },
+    }
   },
   watch: {
     legends (n) {
diff --git a/nezha-fronted/src/components/chart/chart/options/chartGauge.js b/nezha-fronted/src/components/chart/chart/options/chartGauge.js
index 4977610a8..d0f7b1750 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartGauge.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartGauge.js
@@ -9,6 +9,9 @@ const chartGaugeOption = {
     appendToBody: true,
     className: 'chart-gauge'
   },
+  legend: {
+    show: false
+  },
   series: [
     {
       type: 'gauge',
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index e273be2af..5860d6a04 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -15,6 +15,7 @@ export default {
       },
       chartId: '',
       isNoData: true,
+      series: []
     }
   },
   props: {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index e7aed8a2f..6063ce1d7 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -385,6 +385,7 @@
               :label="$t('dashboard.panel.chartForm.legendValues')"
               class="form-item--half-width"
               prop="param.legend.values"
+              v-if="isShowLegendVlaues(chartConfig.type)"
             >
               <el-select
                 id="chart-box-legend-value"
@@ -802,11 +803,8 @@ export default {
           })
           break
         case 'stat':
-        case 'bar':
-        case 'treemap':
         case 'guage':
-        case 'pie':
-          if (this.oldType === 'stat' || this.oldType === 'bar' || this.oldType === 'treemap' || this.oldType === 'guage' || this.oldType === 'pie') {
+          if (this.oldType === 'stat' || this.oldType === 'guage') {
             break
           }
           this.chartConfig.param = {
@@ -824,6 +822,28 @@ export default {
             }
           }
           break
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          if (this.oldType === 'bar' || this.oldType === 'treemap' || this.oldType === 'pie') {
+            break
+          }
+          this.chartConfig.param = {
+            nullType: this.chartConfig.param.nullType,
+            link: this.chartConfig.param.link,
+            statistics: 'last',
+            text: 'value',
+            valueMapping: [],
+            legend: { placement: 'bottom', values: [], show: true },
+            min: 0,
+            max: 100,
+            enable: {
+              legend: true,
+              valueMapping: false,
+              thresholds: false
+            }
+          }
+          break
         case 'table':
           if (this.oldType === 'table') {
             break
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 00b7434ac..7cf1a244b 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -436,6 +436,9 @@ export default {
           if (!this.editChart.param.link) {
             this.$set(this.editChart.param, 'link', '')
           }
+          if (this.editChart.param.enable.legend && !this.editChart.param.legend) {
+            this.editChart.param.legend = { placement: 'bottom', values: [], show: true }
+          }
         }
       }
     },
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
index 23901a398..f7a71657a 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
@@ -79,17 +79,26 @@ export default {
         case 'line':
         case 'area':
         case 'point':
+        case 'treemap':
+        case 'pie':
+        case 'bar':
           return true
         case 'table':
         case 'stat':
-        case 'bar':
         case 'guage':
-        case 'treemap':
-        case 'pie':
           return false
         default: return false
       }
     },
+    isShowLegendVlaues (type) {
+      switch (type) {
+        case 'line':
+        case 'area':
+        case 'point':
+          return true
+        default: return false
+      }
+    },
     isShowValueMapping (type) {
       switch (type) {
         case 'line':
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index a7283033c..fbcab02bc 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -278,7 +278,67 @@
           </el-select>
         </el-form-item>
       </div>
-
+      <!--legend-->
+      <div v-if="isShowLegend(chartConfig.type)">
+        <!--legendConfig-->
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.legendConfig')}}</span>
+          <el-switch v-model="chartConfig.param.enable.legend" size="small" @change="change"></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <div
+            v-if="chartConfig.param.enable.legend"
+            class="form-items--half-width-group"
+          >
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.legendPosition')"
+              class="form-item--half-width"
+              prop="param.legend.placement"
+            >
+              <el-select
+                id="chart-box-legend-show"
+                v-model="chartConfig.param.legend.placement"
+                placeholder=""
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+              >
+                <el-option
+                  v-for="item in legendPositionList"
+                  :key="item.value"
+                  :label="$t(item.label)"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.legendValues')"
+              class="form-item--half-width"
+              prop="param.legend.values"
+              v-if="isShowLegendVlaues(chartConfig.type)"
+            >
+              <el-select
+                id="chart-box-legend-value"
+                v-model="chartConfig.param.legend.values"
+                multiple
+                collapse-tags
+                :placeholder="$t('el.select.placeholder')"
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                @change="change"
+              >
+                <el-option
+                  v-for="item in statisticsList"
+                  :key="item.value"
+                  :label="$t(item.label)"
+                  :value="item.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </transition>
+      </div>
       <!--      table column-->
       <div v-if="isTable(chartConfig.type)">
         <div class="form__sub-title">
@@ -590,38 +650,45 @@ export default {
     chartTypeChange (type) {
       switch (type) {
         case 'stat':
-        case 'bar':
-        case 'pie':
         case 'guage':
-        case 'treemap':
-          if (this.oldType !== 'table') {
+          if (this.oldType === 'stat' || this.oldType === 'guage') {
             break
           }
           this.chartConfig.param = {
+            nullType: this.chartConfig.param.nullType,
             link: this.chartConfig.param.link,
-            refer: 1,
-            nullType: 'null',
             statistics: 'last',
-            valueMapping: [],
             text: 'value',
+            valueMapping: [],
+            min: 0,
+            max: 100,
+            enable: {
+              legend: true,
+              valueMapping: false,
+              thresholds: false
+            }
+          }
+          break
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          if (this.oldType === 'bar' || this.oldType === 'treemap' || this.oldType === 'pie') {
+            break
+          }
+          this.chartConfig.param = {
+            nullType: this.chartConfig.param.nullType,
+            link: this.chartConfig.param.link,
+            statistics: 'last',
+            text: 'value',
+            valueMapping: [],
+            legend: { placement: 'bottom', values: [], show: true },
             min: 0,
             max: 100,
             enable: {
               legend: true,
               valueMapping: false,
               thresholds: false
-            },
-            datasource: [{
-              name: 'System',
-              type: '',
-              systemGroup: '',
-              systemSelect: '',
-              group: '',
-              select: '',
-              limit: 100,
-              sort: 'desc'
             }
-            ]
           }
           break
         case 'table':