diff --git a/nezha-fronted/src/components/charts/chart-alert-list.vue b/nezha-fronted/src/components/charts/chart-alert-list.vue
index 7f0401e06..eaeb17561 100644
--- a/nezha-fronted/src/components/charts/chart-alert-list.vue
+++ b/nezha-fronted/src/components/charts/chart-alert-list.vue
@@ -42,6 +42,7 @@
         </div>
         <div class="mt-10 table-container" v-cloak  v-show="firstShow || isPreview">
           <alertMessageTable
+            :id="'tableContainer'+chartIndex"
             :tableData="storedTableData"
             :loading="loadingTable"
             :tableHeight="tableHeight"
@@ -66,6 +67,7 @@
 <!--            <span class="float-right  dialog-tool" @click="screenRefreshChart"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
           </div>
           <alertMessageTable
+            :id="'tableContainer'+chartIndex"
             :tableData="storedScreanTableData"
             :loading="loadingTable"
             :tableHeight="'95%'"
diff --git a/nezha-fronted/src/components/charts/chart-list.vue b/nezha-fronted/src/components/charts/chart-list.vue
index 94368a21c..bbc6a9d05 100644
--- a/nezha-fronted/src/components/charts/chart-list.vue
+++ b/nezha-fronted/src/components/charts/chart-list.vue
@@ -157,6 +157,19 @@
                           @on-edit-chart-block="editData"
                           @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
         ></chart-alert-list>
+
+        <chart-pie  :from="from" :key="'inner' + item.id" :ref="'editChart'+item.id" v-if="item.type === 'pie'" :temp-dom="tempDom"
+                            @on-refresh-data="refreshChart"
+                            @on-search-data="searchData"
+                            @on-remove-chart-block="removeChart"
+                            @on-duplicate-chart-block="duplicateChart"
+                            @on-drag-chart="editChartForDrag"
+                            @on-edit-chart-block="editData"
+                            :chart-data="item"
+                            :is-lock="panelLock"
+                            :panel-id="filter.panelId"
+                            @dropmenu-change="(show) => {dropmenuChange(item.id, show)}"
+                            :chart-index="index"></chart-pie>
       </div>
    </draggable>
     <el-row v-if="dataList.length === 0"  class="noData"></el-row>
@@ -176,6 +189,7 @@
   import chartDataFormat from "./chartDataFormat";
   import chartAlertList from './chart-alert-list'
   import textChart from './text-chart'
+  import chartPie from './chart-pie'
   // import visNetwork from './visNetwork'
   export default {
     name: 'chartList',
@@ -196,7 +210,8 @@
       chartUrl,
       chartSingleStat,
       draggable,
-      textChart
+      textChart,
+      chartPie,
       // visNetwork,
     },
     data() {
@@ -681,7 +696,7 @@
                 this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
                   panelId, filter,'',errorMsg);
               }
-            } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+            } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4||chartItem.type ==='pie') {
               if (filterType === 'showFullScreen') {//全屏查询
                 this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
                   panelId, filter, legend, filterType,errorMsg);
@@ -817,6 +832,28 @@
                     threshold: null,
                   };*/
                   let errorMsg = "";
+                  let pieSeries;
+                  if(chartInfo.type ==='pie'){
+                    pieSeries={
+                      type: 'pie',
+                      radius: ['20%', '100%'],
+                      center: ['50%', '50%'],
+                      roseType: 'radius',
+                      minAngle:10,
+                      itemStyle: {
+                        borderRadius: 5
+                      },
+                      label: {
+                        show: false
+                      },
+                      emphasis: {
+                        label: {
+                          show: false
+                        }
+                      },
+                      data:[]
+                    }
+                  }
                   res.forEach((response, innerPos) => {
                     if (response.status === 'success') {
                       errorMsg = "";
@@ -939,8 +976,12 @@
                                 });
                                 return [dpsItem[0] * 1000, dpsItem[1]];
                               });
-                              series.push(seriesItem.theData);
-                              seriesItem = null;
+                              if(chartInfo.type === 'pie'){
+                                pieSeries.data.push({value:bus.getSingleStatRlt(chartInfo.param.statistics,seriesItem.theData.data),name:host+"-"+chartItem.elements[innerPos].id+"-" + resIndex})
+                              }else{
+                                series.push(seriesItem.theData);
+                                seriesItem = null;
+                              }
                             } else if (chartItem.elements && chartItem.elements[innerPos]) {
                               // 无数据提示
                               /*
@@ -971,6 +1012,9 @@
                   });
 
                   if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                    if(chartInfo.type === 'pie'){
+                      series.push(pieSeries)
+                    }
                     let chartData = {
                       chartItem: chartItem,
                       series: series,
@@ -991,7 +1035,7 @@
                         this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
                           this.filter.panelId, this.filter, '', errorMsg);
                       }
-                    } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
+                    } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4||chartItem.type == 'pie') {
                       if (series.length && chartItem.type === 4) {//曲线汇总
                         //series.push(sumData);//后续需要
                       }
@@ -1023,7 +1067,7 @@
                         this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
                           this.filter);
                       }
-                    } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
+                    } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4||chartItem.type === 'pie') {
                       if (filterType === 'showFullScreen') {//table的全屏查询
                         this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
                           this.filter, filterType);
diff --git a/nezha-fronted/src/components/charts/chart-pie.vue b/nezha-fronted/src/components/charts/chart-pie.vue
new file mode 100644
index 000000000..adb1a535d
--- /dev/null
+++ b/nezha-fronted/src/components/charts/chart-pie.vue
@@ -0,0 +1,623 @@
+<style lang="scss">
+@import './chart.scss';
+</style>
+<template>
+  <div class="nz-chart-resize">
+    <div class="resize-shadow" ref="resizeShadow"></div>
+    <div class="resize-box resize-box-echarts" ref="resizeBox">
+      <div class="chart-single-stat"  :id="'chartPieChart'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
+        <loading  :ref="'localLoading'+chartIndex"></loading>
+        <div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
+          <el-popover
+            v-if="isError"
+            :close-delay=10
+            placement="top-start"
+            trigger="hover"
+            popper-class="chart-error-popper">
+            <div >{{errorContent}}</div>
+            <span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
+              <i class="nz-icon nz-icon-warning fa"></i>
+              <span class="panel-info-corner-inner"></span>
+            </span>
+          </el-popover>
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos" :class="{'move-able':!isLock}">
+            <el-dropdown-menu style="display: none"></el-dropdown-menu>
+            <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
+              <span class="chart-title-text">{{chartData.title}}</span>
+              <span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze  "  :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+            </span>
+            <ul slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex"  class="el-dropdown-menu nz-chart-dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
+              <li  @click="refreshChart"  class="el-dropdown-menu__item">
+                <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
+              <li  @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`">
+                <i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
+              <li  @click="removeChart" class="el-dropdown-menu__item" v-has="`${from}_chart_delete`">
+                <i class="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
+              <li  @click="showAllScreen"  class="el-dropdown-menu__item">
+                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
+              <li  @click="duplicate" class="el-dropdown-menu__item" v-has="`${from}_chart_duplicate`">
+                <i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
+            </ul>
+          </el-dropdown>
+        </div>
+        <div :id="'pie-chart-local-'+chartIndex" ref="pieChartLocal" ></div>
+        <div class="chart-no-data" v-show="noData">No Data</div>
+        <div class='legend-container' ref="legendArea" v-show="firstShow">
+          <div v-for="(item, index) in legend" :title="item.alias?item.alias:item.name"  @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
+            <span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+          </div>
+        </div>
+        <!--全屏-->
+        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" @opened="initChart('screen')"
+                   :visible.sync="screenModal"
+                   width="96%"  @close="screenModal = false" :modal-append-to-body="false">
+          <div slot="title">
+            <span class="nz-dialog-title">{{data.title}}</span>
+            <div class="float-right panel-calendar dialog-tool">
+<!--              <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
+              <pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;" id="single-chart"></pick-time>
+            </div>
+<!--            <span class="float-right  dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
+          </div>
+          <div class="single-stat-screen-container"  >
+            <div :id="'pie-chart-screen-'+chartIndex" ref="pieChartScreen" style="width: 100%;height: 100%;"></div>
+            <div :id="'screenLegendArea'+chartIndex"   class="legend-container legend-container-screen">
+              <div v-for="(item, index) in legendScreen" :title="item.alias?item.alias:item.name"  @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}"  :key="'legend_' + item.name+'_'+index">
+                <span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':item.color)}"></span>{{item.alias?item.alias:item.name}}
+                <br/><!--bgColorList[index]-->
+              </div>
+            </div>
+          </div>
+          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+        </el-dialog>
+      </div>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+import chartDataFormat from './chartDataFormat'
+import loading from "../common/loading";
+import timePicker from '../common/timePicker'
+import * as echarts from 'echarts'
+import {getChart, setChart} from "../common/js/common";
+import chart from '../page/dashboard/overview/chart'
+import chartConfig from "../page/dashboard/overview/chartConfig";
+import {randomcolor} from "../common/js/radomcolor/randomcolor";
+export default {
+  name: 'pieChart',
+  components: {
+    'loading': loading,
+    'time-picker':timePicker,
+    chart,
+  },
+  props: {
+    tempDom:Object,
+    chartData: {
+      type: Object
+    },
+    // 看板id
+    panelId: {
+      type: Number,
+      default: 0,
+    },
+    editChartId: {
+      type: String,
+      default: 'editChartId',
+    },
+    chartIndex:{
+      type: Number,
+      default: 0,
+    },
+    from: {type: String},
+    isLock:{type:Boolean,default:false}
+  },
+  data() {
+    return {
+      data: {}, // 该图表信息,chartItem
+      noData:false,
+      unit:{},
+      isError:false,
+      errorContent:'',
+      seriesItem: [], // 保存信息
+      seriesItemScreen:[],//全屏数据
+      pieData:[],
+      mapping:'',//满足valueMapping时 mapping的值
+      images: '',
+      loading:Object,
+      items: {
+        metric_name: [], // 每条数据列名称
+        xAxis: [],
+        theData: [], // series数据组
+      },
+      panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+      firstLoad: false, // 是否第一次加载
+      screenModal: false,
+      // 查询数据使用
+      filter: {
+          start_time: '',
+          end_time: '',
+      },
+      firstShow: false, // 默认不显示操作按钮,
+      caretShow:false,
+      dragTitleShow:false,
+      dropdownMenuShow:false,
+      divFirstShow:false,
+      searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
+      oldSearchTime: [],
+      legend:[],
+      legendScreen:[],
+      isGrey:[],
+      isGreyScreen:[],
+      echart:null,
+      echartScreen:null,
+      bgColorList:[],
+      option:{
+        title: {
+          show: false,
+        },
+        legend:{
+          show:false,
+        },
+        grid: {
+          left:'center',
+          top:'middle',
+        },
+        tooltip:{
+          trigger:'item',
+          backgroundColor:'rgba(221,228,237,1)',
+          borderColor :'rgba(255,255,255,0)',
+          textStyle:{
+            color:'#000'
+          },
+          textStyle:{
+            color:'#000'
+          },
+          axisPointer:{
+            snap:false,
+            animation:false,
+          },
+          extraCssText:'z-index:1000;',
+        },
+        series:null,
+      }
+    };
+  },
+  created() {
+  },
+  computed: {},
+    watch: {
+      dropdownMenuShow(n) {
+        this.$emit("dropmenu-change", n);
+      }
+    },
+    methods: {
+      startResize(e) {
+        let vm = this;
+        this.$chartResizeTool.start(vm, this.data, e,this.chartIndex);
+      },
+      startLoading(area){
+        if(area==='screen'){
+          this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
+        }else {
+          //this.showLoading = true;
+          this.$refs['localLoading'+this.chartIndex].startLoading();
+        }
+      },
+      endLoading(area){
+        if(area==='screen'){
+          //this.showLoadingScreen = false;
+          this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
+        }else {
+          //this.showLoading = false;
+          this.$refs['localLoading'+this.chartIndex].endLoading();
+        }
+      },
+      showLoad(chartItem) {
+        this.$nextTick(() => {
+          const chartBox = document.getElementById('chartPieChart'+this.chartIndex);
+          let height = Math.floor(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
+          if(height<this.$chartResizeTool.minHeight){
+            height = this.$chartResizeTool.minHeight;
+          }
+          chartBox.style.height = `${height-this.$chartResizeTool.chartBlankHeight}px`;
+        });
+        this.clearData();
+        this.firstShow = false;
+        this.$refs['localLoading'+this.chartIndex].startLoading();
+        this.divFirstShow = true;
+      },
+      clearData(){
+        if(getChart(this.chartIndex)){
+          getChart(this.chartIndex).clear();
+          // getChart(this.chartIndex).dispose();//关闭销毁实例 不再占用内存
+        }
+      },
+      screenRefreshChart(){
+        this.$refs['calendarPanel'].timeChange(this.$refs['calendarPanel'].nowTimeType,'chart')
+      },
+      // 重新请求数据 刷新操作-local
+      refreshChart() {
+        this.dropdownMenuShow=false;
+        let id = this.data.id;
+        this.clearChart();
+        this.$refs['localLoading'+this.chartIndex].startLoading();
+        this.firstShow = false;
+        this.$emit('on-refresh-data', id);
+      },
+      // 编辑图表
+      editChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-edit-chart-block', this.data.id);
+      },
+      // 删除该图表
+      removeChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-remove-chart-block', this.data.id);
+      },
+      //全屏时间条件查询
+      dateChange(time) {
+        this.seriesItemScreen = [];
+        this.seriePieChart = "";
+        this.startLoading('screen');
+        this.$emit('on-search-data', this.data.id, this.searchTime);
+      },
+      clickos() {
+        this.dropdownMenuShow=false;
+      },
+      clearChart(){
+        this.data = {};
+      },
+      duplicate(){
+        this.dropdownMenuShow=false;
+        this.$confirm(this.$t("tip.confirmDuplicate"), {
+          confirmButtonText: this.$t("tip.yes"),
+          cancelButtonText: this.$t("tip.no"),
+          type: 'info'
+        }).then(() => {
+          const param = {id:this.data.id};
+          this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
+            if (response.code === 200) {
+              this.$message({
+                duration: 2000,
+                type: 'success',
+                message: this.$t("tip.duplicateSuccess")
+              });
+              this.$emit('on-duplicate-chart-block', this.data.id,response.data);
+            }else {
+              if(response.msg){
+                this.$message.error(response.msg);
+              }else if(response.error){
+                this.$message.error(response.error);
+              }else {
+                this.$message.error(response);
+              }
+            }
+          });
+        });
+      },
+      // 全屏查看
+      showAllScreen() {
+          this.dropdownMenuShow=false;
+          this.searchTime = [];
+          this.$set(this.searchTime, 0, this.oldSearchTime[0]);
+          this.$set(this.searchTime, 1, this.oldSearchTime[1]);
+          // this.$refs.calendarPanel.setCustomTime(this.searchTime);
+          this.screenModal = true;
+      },
+      resize(chartItem) {
+        getChart(this.chartIndex).resize()
+      },
+      // 设置数据, filter区分
+      setData(chartItem, seriesItem, panelId, filter,legend,area,errorMsg) {
+        if(errorMsg && errorMsg!==''){
+          this.isError = true;
+          this.errorContent = errorMsg;
+        }else {
+          this.isError = false;
+          this.errorContent = '';
+        }
+        if(seriesItem||seriesItem.data.length<1){ //0 为false
+          this.noData=false;
+        }else{
+          this.noData=true;
+        }
+        this.legend = legend;
+        this.legendScreen=legend
+        legend && this.setColor(legend.length);
+        legend && legend.forEach((t,i)=>{t.color = this.bgColorList[i]});
+
+        this.$set(this.option,'color',this.bgColorList)
+
+        console.log('legend',legend)
+        this.pieData = seriesItem;
+        if(area==='showFullScreen'){//全屏按时间查询
+          this.data = chartItem;
+          this.unit = chartDataFormat.getUnit(this.data.unit);
+          this.initChart('screen')
+          this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
+          this.searchTime[1] = filter.end_time;
+          this.endLoading('screen');
+        }else{
+          this.divFirstShow = true;
+
+          this.firstShow = true; // 展示操作按键
+
+          this.panelIdInner = panelId;
+          this.data = chartItem;
+          this.unit = chartDataFormat.getUnit(this.data.unit);
+          this.initChart('local')
+          if (filter) { // 保存数据,用于同步时间
+            this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
+            this.searchTime[1] = filter.end_time;
+            this.oldSearchTime[0] = this.searchTime[0];
+            this.oldSearchTime[1] = this.searchTime[1];
+          }
+          this.endLoading();
+        }
+      },
+      formatLegend(chartWidth,name){
+        if(!name){
+          return '';
+        }
+        //计算宽度
+        let span = document.querySelector(".temp-dom");
+        span.textContent = name;
+        let txtWidth = parseFloat(window.getComputedStyle(span).width) - this.tempDom.width;
+        if(txtWidth < chartWidth){
+          return name;
+        }else {
+          let charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
+          return name.slice(0,charNum)+'...';
+        }
+      },
+      initChart:function(type){
+        this.option.series = this.pieData;
+
+        if(type == 'local'){
+          this.initLocal();
+        }else{
+          this.initScreen()
+        }
+      },
+      initLocal:function(){
+        let self=this;
+        let dom = document.getElementById('pie-chart-local-'+this.chartIndex)
+        if(!this.echart){
+          this.echart= echarts.init(dom);
+          setChart(this.chartIndex, this.echart);
+        }
+        if(this.legend){
+          this.isGrey=[];
+          this.legend.map((item, i) => {
+            const legend = {
+              name:item.name,
+              alias:item.alias,
+              color:item.color,
+              showText:this.formatLegend(dom.clientWidth,item.name)
+            };
+            self.isGrey.push(false);
+            return legend
+          });
+        }
+
+        this.$nextTick(() => {
+          setTimeout(function () {
+            let divHeight = self.$refs.legendArea.offsetHeight;
+            if(!self.chartData.height){
+              getChart(self.chartIndex).resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
+            }else {
+              getChart(self.chartIndex).resize({height:(self.chartData.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
+            }
+            self.$set(self.option.tooltip,'formatter',self.formatterFunc)
+            if(self.pieData[0].data.length>0){
+              getChart(self.chartIndex).clear();
+              getChart(self.chartIndex).setOption(self.option);//创建图表
+              self.noData=false;
+            }else{
+              self.noData=true;
+              self.option=chartConfig.getOption('noData')
+              getChart(self.chartIndex).clear();
+              getChart(self.chartIndex).setOption(self.option);//创建图表
+            }
+
+            self.$refs['localLoading'+self.chartIndex].endLoading();
+            self.firstShow = true; // 展示操作按键
+          }, 100);
+        })
+      },
+      initScreen:function(){
+        let self=this;
+        let  dom = document.getElementById('pie-chart-screen-'+this.chartIndex)
+        if(!this.echartScreen){
+          this.echartScreen = echarts.init(dom)
+        }
+        if(this.legendScreen){
+          this.isGreyScreen=[];
+          this.legendScreen=this.legendScreen.map((item, i) => {
+            const legend = {
+              name:item.name,
+              alias:item.alias,
+              color:item.color,
+              showText:this.formatLegend(dom.clientWidth,item.name)
+            };
+            self.isGreyScreen.push(false);
+            return legend
+          });
+        }
+        if(self.echartScreen){
+          self.echartScreen.clear();
+          self.showLegend = true;
+          self.$refs['localLoadingScreen'+self.chartIndex].endLoading();
+        }
+        this.$nextTick(() => {
+            let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
+            let divHeight = legendDiv.offsetHeight;
+            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
+            let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
+            self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`;
+            self.echartScreen.resize({height: (sumHeight - divHeight - 58)});//图表的高度
+            setTimeout(function () {
+              if(self.pieData[0].data.length>0){
+                console.log('option',self.option)
+                self.echartScreen.setOption(self.option);//显示全屏界面
+                self.noData=false;
+              }else{
+                self.noData=true;
+                self.option=chartConfig.getOption('noData')
+                self.echartScreen.setOption(self.option);//显示全屏界面
+              }
+              self.echartScreen.on('finished', function () {
+                let legendDiv = document.getElementById('screenLegendArea'+self.chartIndex);
+                let divHeight = legendDiv.offsetHeight;
+                let screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
+                let sumHeight = Math.floor(screenHeight*0.99*0.8);//margin-top:1vh; dailog:80%
+                self.$refs.pieChartScreen.style.height = `${sumHeight - divHeight - 58}px`;
+                self.echartScreen.resize({height: (sumHeight - divHeight - 58)});//图表的高度
+                self.echartScreen.off('finished');
+              })
+            }, 100);
+
+          })
+      },
+      dealLegendAlias:function(legend,expression){
+        if(/\{\{.+\}\}/.test(expression)){
+          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
+            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
+            let reg=new RegExp(label+'=".+?"');
+            let value=null;
+            if(reg.test(legend)){
+              let find=legend.match(reg)[0];
+              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
+            }
+            return value?value:label;
+          });
+          return labelValue
+        }else{
+          return expression;
+        }
+
+      },
+      clickLegend(legendName, index){
+        /*点击legend
+        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
+        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
+        * 3.否则只改变被点击的legend状态
+        * */
+        let highlightNum = 0; //高亮数量
+        this.isGrey.forEach(g => {
+          if (!g) {
+            highlightNum++;
+          }
+        });
+        let hasGrey = highlightNum < this.isGrey.length; //是否有置灰的
+        let curIsGrey = this.isGrey[index]; //当前legend的状态
+        let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
+
+        let echart = getChart(this.chartIndex)
+        if (echart) {
+          if (!hasGrey) { //1.除当前legend外全置灰
+            echart.dispatchAction({
+              type: 'legendInverseSelect'
+            });
+            echart.dispatchAction({
+              type: 'legendSelect',
+              name: legendName
+            });
+            this.isGrey = this.isGrey.map((g, i) => i !== index);
+          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
+            echart.dispatchAction({
+              type: 'legendAllSelect'
+            });
+            this.isGrey = this.isGrey.map(() => false);
+          } else {
+            let type = curIsGrey ? "legendSelect" : "legendUnSelect";
+            echart.dispatchAction({
+              type: type,
+              name: legendName
+            });
+            this.$set(this.isGrey, index, !this.isGrey[index]);
+          }
+        }
+      },
+      clickScreenLegend(legendName,index){
+        /*点击legend
+        * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮
+        * 2.如果点击的是唯一高亮的legend，则变为全高亮状态
+        * 3.否则只改变被点击的legend状态
+        * */
+        let highlightNum = 0; //高亮数量
+        this.isGreyScreen.forEach(g => {
+          if (!g) {
+            highlightNum++;
+          }
+        });
+        let hasGrey = highlightNum < this.isGreyScreen.length; //是否有置灰的
+        let curIsGrey = this.isGreyScreen[index]; //当前legend的状态
+        let currentIsTheOnlyOneHighlight = !curIsGrey && highlightNum === 1; //当前legend是否是目前唯一高亮的
+
+        let echart = this.echartScreen;
+        if (echart) {
+          if (!hasGrey) { //1.除当前legend外全置灰
+            echart.dispatchAction({
+              type: 'legendInverseSelect'
+            });
+            echart.dispatchAction({
+              type: 'legendSelect',
+              name: legendName
+            });
+            this.isGreyScreen = this.isGreyScreen.map((g, i) => i !== index);
+          } else if (currentIsTheOnlyOneHighlight) { //2.全高亮
+            echart.dispatchAction({
+              type: 'legendAllSelect'
+            });
+            this.isGreyScreen = this.isGreyScreen.map(() => false);
+          } else {
+            let type = curIsGrey ? "legendSelect" : "legendUnSelect";
+            echart.dispatchAction({
+              type: type,
+              name: legendName
+            });
+            this.$set(this.isGreyScreen, index, !this.isGreyScreen[index]);
+          }
+        }
+      },
+      setColor(colorNum){
+        this.bgColorList = [
+          '#FF5200','#3685FF','#FF8D00','#00DCA2',
+          '#954Eff','#FFCB01','#f65A96','#00BFD0',
+          '#FF8BEA','#4D7693','#72577C','#99D750',
+          '#DD8270','#C475EE','#7E83FB','#7EB090',
+          '#FF9094','#00CCF5','#CF6684','#4E55FF'
+        ];
+        for(let i=0;i<colorNum-19;i++) {
+          this.bgColorList.push(randomcolor())
+        }
+      },
+      formatterFunc:function(params, ticket, callback){
+        return `
+                <div>
+                    <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">
+                        <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;">${this.legend[params.dataIndex].alias}</div>
+                        <div style="display:flex;justify-content: space-between;">
+                            <div>value</div>
+                            <div>${params.value}</div>
+                        </div>
+                        <div style="display:flex;justify-content: space-between;">
+                            <div>percent</div>
+                            <div>${params.percent}%</div>
+                        </div>
+                    </div>
+                </div>
+               `
+      }
+    },
+    mounted() {
+      this.firstLoad = false;
+    },
+    beforeDestroy() {
+      this.clearChart();
+    },
+};
+</script>
diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index c7b186993..7312c7333 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -3,8 +3,6 @@
     }
     .nz-preview-picker{
     }
-    .v-modal{
-    }
     .hidden{
       visibility: hidden;
     }
@@ -76,9 +74,9 @@
         </div>
       </div>
 
-      <template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea' || chart.type == 'endpointInfo'">
+      <template v-if="chart.type==='line'||chart.type==='bar'||chart.type==='stackArea' || chart.type == 'endpointInfo' ||chart.type =='pie'">
         <div id="chartEchartPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart">
-          <div class="line-area" ref="screenShowArea"  id="screenShowArea" style="margin-top:0px;"></div>
+          <div class="line-area" ref="screenShowArea"  id="screenShowArea" style="margin-top:0px"></div>
           <div class="chart-no-data" v-show="noData">No Data</div>
 
           <template v-if="!hasLegendOptions">
@@ -267,12 +265,14 @@
         this.searchTime = bus.getTimezontDateRange();
         this.chart = JSON.parse(JSON.stringify(chartInfo));
 
+        console.log('chart',this.chart,chartInfo)
+
         let chartType= chartInfo.type;
         let chartContainerId = 'chartEchartPreview';
         if(chartType==='table'){
           this.tableShow = false;
           chartContainerId = 'chartTablePreview';
-        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
+        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4||chartType == 'pie') {
           this.isGreyScreen=[];
           this.showLegend = false;
           chartContainerId = 'chartEchartPreview';
@@ -346,7 +346,7 @@
         let chartType= this.chart.type;
         if(chartType==='table'){
 
-        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo") {
+        }else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4 || chartType == "endpointInfo"||chartType == 'pie') {
           if(this.echartModalStore){
             this.echartModalStore.clear();
           }
@@ -381,7 +381,7 @@
           this.$nextTick(() => {
             if (chartItem.type === 'table') {//表格
               this.setTableData([]);
-            } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === "endpointInfo") {
+            } else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4 || chartItem.type === "endpointInfo"||chartItem == 'pie') {
               this.setData(chartItem, [], []);
             }else if(chartItem.type ==='singleStat'){
               this.serieSingleStat = "";
@@ -415,12 +415,28 @@
                 let singleStatRlt = '';
                 const legend = [];
                 const tableData = [];
-                const sumData = {
-                  name: 'sum',
-                  data: [],
-                  visible: true,
-                  threshold: null,
-                };
+                let pieSeries;
+                if(chartItem.type ==='pie'){
+                  pieSeries={
+                    type: 'pie',
+                    radius: ['20%', '100%'],
+                    center: ['50%', '50%'],
+                    roseType: 'radius',
+                    minAngle:10,
+                    itemStyle: {
+                      borderRadius: 5
+                    },
+                    label: {
+                      show: false
+                    },
+                    emphasis: {
+                      label: {
+                        show: false
+                      }
+                    },
+                    data:[]
+                  }
+                }
                 res.forEach((response, innerPos) => {
                   if (response.status === 'success') {
                     this.isError = false;
@@ -513,8 +529,12 @@
                               });
                               return [dpsItem[0] * 1000, dpsItem[1]];
                             });
-                            series.push(seriesItem.theData);
-
+                            if(chartItem.type === 'pie'){
+                              console.log(chartItem.param.statistics,seriesItem.theData.data)
+                              pieSeries.data.push({value:bus.getSingleStatRlt(chartItem.param.statistics,seriesItem.theData.data),name:host + resInnerPos})
+                            }else{
+                              series.push(seriesItem.theData);
+                            }
                           } else if (chartItem.elements && chartItem.elements[innerPos]) {
                             // 无数据提示
                             /*
@@ -581,6 +601,14 @@
                       this.serieSingleStat =singleStatRlt;
                     }
                     this.$refs.loadingPreview.endLoading();
+                  }else if(chartItem.type == 'pie'){
+                    series.push(pieSeries)
+                    if(series[0].data.length<1){
+                      this.noData=true;
+                    }else{
+                      this.noData=false;
+                    }
+                    this.setData(chartItem,series,legend)
                   }
                 //}
               } else {
@@ -588,7 +616,7 @@
                 //if(this.$refs.editChart[index]) {
                   if (type === 'table') {
                       this.setTableData([]);
-                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4) {
+                  } else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4||chartItem.type == 'pie') {
                       this.setData(chartItem, []);
                   }else if(chartItem.type ==='singleStat'){
                     this.serieSingleStat = "";
@@ -738,7 +766,7 @@
           this.chartType = 'line';
         }
         this.echartModalStore = echarts.init(ele);
-
+        console.log('height',ele.clientWidth,ele.clientHeight)
         var chartWidth = ele.clientWidth;
         var title = {
           show:false,
@@ -1040,6 +1068,71 @@
           }
         });
       },
+      initPie:function(chartInfo, dataArg, legend){
+        let option={
+          title: {
+            show: false,
+          },
+          legend:{
+            show:false,
+          },
+          grid: {
+            left:'center',
+            top:'middle',
+          },
+          tooltip:{
+            trigger:'item',
+            backgroundColor:'rgba(221,228,237,1)',
+            borderColor :'rgba(255,255,255,0)',
+            textStyle:{
+              color:'#000'
+            },
+            textStyle:{
+              color:'#000'
+            },
+            axisPointer:{
+              snap:false,
+              animation:false,
+            },
+            extraCssText:'z-index:1000;',
+          },
+          series:null,
+        }
+        option.series = dataArg;
+        option.color = this.bgColorList;
+        option.tooltip.formatter=this.pieFormatterFunc;
+        let self=this;
+        let  dom = document.getElementById('screenShowArea')
+        this.echartModalStore = echarts.init(dom)
+        console.log('dom',dom.clientWidth,dom.clientHeight)
+        this.showLegend = true;
+        if(legend){
+          this.screenLegendList = [];
+          legend.forEach((item, i) => {
+            let _legend = {
+              name:item.name,
+              alias:item.alias,
+              color:item.color,
+              showText:this.formatLegend(dom.clientWidth,item.alias?item.alias:item.name)
+            };
+            this.screenLegendList.push(_legend);
+            this.isGreyScreen.push(false);
+          });
+        }
+        this.$nextTick(() => {
+          let divHeight = this.$refs.screenLegendArea.offsetHeight;
+          this.echartModalStore.resize({height:(chartInfo.height-this.chartSpaceHeight-divHeight-this.titleHeight)});
+          this.echartModalStore.clear();
+          if(dataArg[0].data.length<1){
+            this.echartModalStore.setOption(chartConfig.getOption('noData'))
+          }else{
+            console.log(option)
+            this.echartModalStore.setOption(option);//创建图表
+          }
+
+          this.$refs.loadingPreview.endLoading();
+        });
+      },
       mouseEnterFullChart(){
         if (this.echartModalStore) {
           this.echartModalStore.setOption({
@@ -1077,6 +1170,10 @@
             let sortedOptionKeys=['min','max','avg','last','total']
             this.screenLegendOptions=sortedOptionKeys.map(item=>{ return {option:item,sort:'',value:chartItem.param.legendValue[item]}})
           }
+          if(chartItem.type == 'pie'){
+            this.initPie(chartItem,seriesItem,legend)
+            return;
+          }
           this.initChart(chartItem, seriesItem, this.$refs.screenShowArea,legend);
       },
       // 设置数据
@@ -1444,6 +1541,23 @@
           legend.sort((x,y)=>y[option.option] - x[option.option])
           option.sort = 'asc'
         }
+      },
+      pieFormatterFunc:function(params, ticket, callback){
+        return `
+                <div>
+                    <div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;  min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">
+                        <div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;">${this.legend[params.dataIndex].alias}</div>
+                        <div style="display:flex;justify-content: space-between;">
+                            <div>value</div>
+                            <div>${params.value}</div>
+                        </div>
+                        <div style="display:flex;justify-content: space-between;">
+                            <div>percent</div>
+                            <div>${params.percent}%</div>
+                        </div>
+                    </div>
+                </div>
+               `
       }
     },
     beforeDestroy() {
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index b78dceca7..8402c4454 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -189,6 +189,7 @@
   import timePicker from '../common/timePicker';
   import chartConfig from "../page/dashboard/overview/chartConfig";
   import {getChart, setChart,lineChartMove,getMousePoint} from "../common/js/common";
+  import {getMetricTypeValue} from "../common/js/tools";
 
   export default {
     name: 'lineChartBlock',
@@ -578,20 +579,6 @@
           //chartId='screenShowArea';
         }
         var chartWidth = ele.clientWidth;
-        var title = {
-          show:false,
-          text: chartInfo.title || null,
-          textAlign: 'left',
-          useHTML: true,
-          textStyle: {
-            //display: 'inline-block',//无此属性
-            width: '60%',
-            fontStyle:'normal',
-            fontWeight:'bold',
-            color: "#333",
-
-          }
-        };
 
         let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
         let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
@@ -1739,94 +1726,17 @@
         let options=where =='local'?this.legendOptions:this.screenLegendOptions;
         let keys=options.filter(item=>{return item.value == 'on'}).map(item=>{return item.option});
         let $self=this;
-        keys.forEach(item=>{
-          switch (item) {
-            case 'min':
-              $self.legendMinValue(legend,dataArr);
-              break;
-            case 'max':
-              $self.legendMaxValue(legend,dataArr);
-              break;
-            case 'avg':
-              $self.legendAvgValue(legend,dataArr);
-              break;
-            case 'last':
-              $self.legendLastValue(legend,dataArr);
-              break;
-            case 'total':
-              $self.legendTotalValue(legend,dataArr);
-              break;
-          }
-        })
-      },
-      legendMinValue:function(legend,dataArr){
-        return new Promise(resolve => {
-          legend.forEach(item=>{
-            let data=dataArr.find(t=>t.name == item.name)
-            if(data&&data.data){
-              let copy=JSON.parse(JSON.stringify(data.data));
-              let min =copy.sort((x,y)=>{return parseFloat(x[1]) - parseFloat(y[1])})[0][1]
-              item['min']=parseFloat(min)
-            }
+        keys.forEach(key=>{
+          return new Promise(resolve => {
+            legend.forEach(item=>{
+              let data=dataArr.find(t=>t.name == item.name)
+              if(data&&data.data){
+                let value=getMetricTypeValue(data.data,key)
+                item[key] = parseFloat(value)
+              }
+            })
+            resolve();
           })
-
-          resolve();
-        })
-      },
-      legendMaxValue:function(legend,dataArr){
-        return new Promise(resolve => {
-          legend.forEach(item=>{
-            let data=dataArr.find(t=>t.name == item.name)
-            if(data&&data.data){
-              let copy=JSON.parse(JSON.stringify(data.data));
-              let max =copy.sort((x,y)=>{return parseFloat(y[1]) - parseFloat(x[1])})[0][1]
-              item['max']=parseFloat(max)
-            }
-          })
-          resolve();
-        })
-      },
-      legendAvgValue:function(legend,dataArr){
-        return new Promise(resolve => {
-          legend.forEach(item=>{
-            let data=dataArr.find(t=>t.name == item.name)
-            if(data&&data.data){
-              let copy=JSON.parse(JSON.stringify(data.data));
-              copy = copy.map(t=>parseFloat(t[1]))
-              let sum = eval(copy.join('+'));
-              let avg = sum / copy.length;
-
-              item['avg'] = avg;
-            }
-          })
-          resolve();
-        })
-      },
-      legendLastValue:function(legend,dataArr){
-        return new Promise(resolve => {
-          legend.forEach(item=>{
-            let data=dataArr.find(t=>t.name == item.name)
-            if(data&&data.data){
-              let copy=JSON.parse(JSON.stringify(data.data));
-              let last =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0][1]
-              item['last']=parseFloat(last)
-            }
-          })
-          resolve();
-        })
-      },
-      legendTotalValue:function(legend,dataArr){
-        return new Promise(resolve => {
-          legend.forEach(item=>{
-            let data=dataArr.find(t=>t.name == item.name)
-            if(data&&data.data){
-              let copy=JSON.parse(JSON.stringify(data.data));
-              copy = copy.map(t=>parseFloat(t[1]))
-              let sum = eval(copy.join('+'));
-              item['total'] = sum;
-            }
-          })
-          resolve();
         })
       },
       formatLegendData:function(data){
diff --git a/nezha-fronted/src/components/common/alert/alertMessageTable.vue b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
index 2201293e7..64e1b53bd 100644
--- a/nezha-fronted/src/components/common/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
@@ -6,7 +6,7 @@
     <!-- 自定义table列 -->
     <transition name="el-zoom-in-top">
       <element-set
-        :id="projectAlertId+'-element-set'"
+        :id="id+'-element-set'"
         v-if="tools.showCustomTableTitle"
         @close="tools.showCustomTableTitle = false"
         :custom-table-title.sync="tools.customTableTitle"
@@ -29,7 +29,7 @@
       @selection-change="selectChange"
       style="width: 100%;height: 100%"
       @sort-change="tableDataSort"
-      :id="projectAlertId"
+      :id="id+'-table'"
     >
       <el-table-column
         :resizable="false"
@@ -243,7 +243,8 @@
         type:Boolean,
         default:true,
       },
-      from: {type: String}
+      from: {type: String},
+      id:String,
     },
     data() {
       vm = this;
diff --git a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
index 5cbc55b48..e567b19ed 100644
--- a/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
+++ b/nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
@@ -25,7 +25,7 @@
       </div>
     </div>
     <alertMessageTable
-      :projectAlertId="from+'-sub-alert-table'"
+      :id="from+'-sub-alert-table'"
       ref="alertMessageTable"
       :tableData="tableData"
       :loading="loading"
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 688900262..7732d5c4f 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -160,6 +160,9 @@ const cn = {
           singleStat:{
             label:"SingleStat"
           },
+          pie:{
+            label:"饼图"
+          },
           alertList:{
             label:"告警列表"
           },
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index e250bd770..d5ef58c24 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -173,6 +173,9 @@ const en = {
           singleStat:{
             label:"SingleStat"
           },
+          pie:{
+            label:"Pie"
+          },
           alertList:{
             label:"Alert list"
           },
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 55ef7ca09..e8e6876d8 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -34,7 +34,7 @@
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
       <alertMessageTable
-        projectAlertId="alert-msg-table"
+        id="alert-msg-table"
         ref="alertMessageTable"
         :tableData="tableData"
         :loading="tools.loading"
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index fdca2a15f..bc4f62a6c 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -259,6 +259,14 @@
             <el-input size="mini" type="input" v-model="editChart.param.threshold" id="chart-box-threshold"></el-input>
           </el-form-item>
 
+          <el-form-item :label="$t('dashboard.panel.chartForm.statistics')" class="half-form-item" prop="param.statistics" v-if="editChart.type == 'singleStat' || editChart.type == 'pie' ">
+              <el-select placeholder="" popper-class="chart-box-dropdown-mini" size="small" v-model="editChart.param.statistics" id="chart-box-panelname">
+                <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
+                  <span class="panel-dropdown-label-txt" >{{item.label}}</span>
+                </el-option>
+              </el-select>
+          </el-form-item>
+
           <el-form-item :label="$t('dashboard.panel.chartForm.last')" v-if="editChart.type == 'table'">
             <el-switch :active-value="1" :inactive-value="0" active-color="#ee9d3f" class="exporter-switch" v-model="editChart.param.last" id="chart-box-last"></el-switch>
           </el-form-item>
@@ -315,7 +323,6 @@
                         ></promql-input>
               -->
               <el-row>
-                <template v-if="editChart.type != 'singleStat'">
                   <el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
                     {{$t('dashboard.panel.chartForm.legend')}}&nbsp;
                     <el-popover placement="top" trigger="hover" width="211">
@@ -326,19 +333,6 @@
                   <el-col style="width: calc(100% - 120px);">
                     <el-input size="small" type="text" v-model="legends[index-1]" ></el-input>
                   </el-col>
-                </template>
-                <template v-else>
-                  <el-col class="required-marker" style="width: 120px; padding-right: 20px; text-align: right; color: #666">
-                    <label >{{$t('dashboard.panel.chartForm.statistics')}}</label>&nbsp;
-                  </el-col>
-                  <el-col style="width: calc(100% - 120px);">
-                    <el-select placeholder="" popper-class="chart-box-dropdown-mini" size="small" v-model="editChart.param.statistics" id="chart-box-panelname">
-                      <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in statisticsList">
-                        <span class="panel-dropdown-label-txt" >{{item.label}}</span>
-                      </el-option>
-                    </el-select>
-                  </el-col>
-                </template>
               </el-row>
               <span class="nz-icon-minus-medium nz-icon-minus-position">
             <i class="nz-icon nz-icon-minus" @click="removeExpression(index - 1)"></i>
@@ -562,6 +556,9 @@
           ],
           'param.threshold':[
             {validator:nzNumber,trigger: 'blur'}
+          ],
+          "param.statistics":[
+            {required: true,  message: this.$t('validate.required'),  trigger: 'change'}
           ]
         },
         chartTypeList: [
@@ -581,6 +578,10 @@
             id:'singleStat',
             name:this.$t("dashboard.panel.chartForm.typeVal.singleStat.label")
           },
+          {
+            id:'pie',
+            name:this.$t("dashboard.panel.chartForm.typeVal.pie.label")
+          },
           {
             id:"table",
             name:this.$t("dashboard.panel.chartForm.typeVal.table.label")
@@ -941,7 +942,7 @@
               },
               sync: this.editChart.sync
             };
-            if(this.editChart.type === 'singleStat'){
+            if(this.editChart.type === 'singleStat'||this.editChart.type == 'pie'){
               // params.param.statistics=this.statistics;
             } else {
               delete params.param.statistics;
@@ -1041,7 +1042,7 @@
             this.$refs.alertParamBox.saveParam();
             return ;
           }
-          if(this.editChart.type == 'singleStat'){
+          if(this.editChart.type == 'singleStat'||this.editChart.type == 'pie'){
             // this.$set(this.editChart.param, "statistics", this.statistics);
           } else {
             delete this.editChart.param.statistics;
@@ -1435,15 +1436,15 @@
                 height: this.editChart.height,
                 type: this.editChart.type,
                 unit:this.editChart.unit,
-                param:{
-
-                },
+                param:this.editChart.param,
                 sync: this.editChart.sync
               };
-              if(this.editChart.type === 'singleStat'){
+              if(this.editChart.type === 'singleStat'||this.editChart.type === 'table'){
                 // params.param.statistics=this.statistics;
                 params.param.valueMapping=this.editChart.param.valueMapping;
-              } else {
+              }
+              console.log(this.editChart)
+              if(this.editChart.type != 'singleStat' && this.editChart.type != 'pie'){
                 delete params.param.statistics;
               }
               if(this.editChart.type==='line'||this.editChart.type==='bar'||this.editChart.type==='stackArea'||this.editChart.type==='table'){
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 96caa202e..e21685cdb 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -334,25 +334,25 @@
                 if(chartList[i].id === data.id){
                   chartList.splice(i,1);
                 }
-                if(data.next != -1){
-                  if(chartList[i].id === data.next){
-                    nextChart = chartList[i]
-                  }
-                }
-                if(data.prev != 0){
-                  if(chartList[i].id === data.prev){
-                    prevChart = chartList[i]
-                  }
-                }
+                // if(data.next != -1){
+                //   if(chartList[i].id === data.next){
+                //     nextChart = chartList[i]
+                //   }
+                // }
+                // if(data.prev != 0){
+                //   if(chartList[i].id === data.prev){
+                //     prevChart = chartList[i]
+                //   }
+                // }
               }
               this.$refs.chartList.loadChartData(this.scrollbarWrap.scrollTop);
-              if(nextChart&&prevChart){ //删除图表为中间位置
-                prevChart.next = nextChart.id;
-                nextChart.prev = prevChart.id;
-              }else{
-                if(!nextChart) prevChart.next = -1;
-                if(!prevChart) nextChart.prev = 0;
-              }
+              // if(nextChart&&prevChart){ //删除图表为中间位置
+              //   prevChart.next = nextChart.id;
+              //   nextChart.prev = prevChart.id;
+              // }else{
+              //   if(!nextChart) prevChart.next = -1;
+              //   if(!prevChart) nextChart.prev = 0;
+              // }
               // this.getTableData(); //删除相关图表后，刷新面板数据
             } else {
               this.$message.error(response.msg);