diff --git a/nezha-fronted/src/components/common/project/a.svg b/nezha-fronted/src/components/common/project/a.svg
deleted file mode 100644
index d3b3479ba..000000000
--- a/nezha-fronted/src/components/common/project/a.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="8px" height="32px" viewBox="0 0 8 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
-    <title>矩形</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="画板" transform="translate(-114.000000, -46.000000)" fill="#2D88FA">
-            <path d="M114,46 L114,46 C118.418278,46 122,49.581722 122,54 L122,70 C122,74.418278 118.418278,78 114,78 L114,46 Z" id="矩形"></path>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/nezha-fronted/src/components/common/project/popData/chart.scss b/nezha-fronted/src/components/common/project/popData/chart.scss
new file mode 100644
index 000000000..53104c9ab
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/popData/chart.scss
@@ -0,0 +1,597 @@
+.clearfix:after{
+  display: block;
+  content: "";
+  clear: both;
+}
+.clearfix{
+  margin-bottom: 0px;
+}
+.hidden{
+  visibility: hidden;
+}
+.visible{
+  visibility: visible;
+}
+.legend-shape{
+  display:inline-block;
+  margin-right:5px;
+  border-radius:10px;
+  width:15px;
+  height:5px;
+  vertical-align: middle;
+}
+.ft-gr{
+  color:lightgray;
+}
+.legend-container{
+  width: calc(100% - 30px);
+  max-height:80px;
+  min-height:25px;
+  font-size:12px;
+  text-align:left;
+  left: 10px;
+  bottom: 0px;
+  line-height: 18px;
+  position: absolute;
+  padding-bottom:3px;
+}
+.nz-icon-warning{
+  color:  #e6a23c;
+}
+.legend-container-screen.legend-container {
+  max-height: 80px;
+  min-height:25px;
+}
+.legend-item{
+  text-overflow:ellipsis;
+  white-space:nowrap;
+  /*width:100%;*/
+  margin-right:10px;
+  overflow-x:hidden;
+  cursor:pointer;
+  display:inline-block;
+  float:left;
+  line-height: 20px;
+}
+.nz-chart-dropdown {
+  height: 180px;
+  li {
+    padding-left:15px !important;
+    padding-right:0px !important;
+    width:140px;
+    text-align: left;
+    i {
+      margin-right: 10px;
+    }
+  }
+}
+.nz-chart-dropdown-one {
+  height: 36px;
+  li {
+    padding-left:15px !important;
+    padding-right:0px !important;
+    width:140px;
+    text-align: left;
+    i {
+      margin-right: 10px;
+    }
+  }
+}
+.panel-info-corner {
+  color: #767980;
+  cursor: pointer;
+  position: absolute;
+  display: none;
+  left: 0;
+  width: 28px;
+  height: 28px;
+  z-index: 2;
+  top: 0;
+}
+.panel-info-corner--error {
+  display: block;
+  color: #fff;
+}
+.panel-info-corner .fa {
+  position: relative;
+  top: -6px;
+  left: -6px;
+  font-size: 75%;
+  z-index: 3;
+}
+.panel-info-corner .fa-model {
+  position: relative;
+  top: -3px;
+  left: 4px;
+  font-size: 75%;
+  z-index: 3;
+}
+.fa, .fa-model{
+  display: inline-block;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+.panel-info-corner--error .panel-info-corner-inner {
+   border-left: 28px solid #e02f44;
+   border-right: none;
+   border-bottom: 28px solid rgba(0,0,0,0);
+ }
+.panel-info-corner-inner {
+  width: 0;
+  height: 0;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.chart-error-popper[x-placement^=top] .popper__arrow::after {
+  border-top-color: #e02f44;
+  bottom:0px;
+}
+.chart-error-popper[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: #e02f44;
+}
+.popper__arrow::after{
+  border:solid 3px yellow
+}
+.chart-error-popper{
+  background-color:#e02f44;
+  color:#FFF;
+  word-wrap:break-word;
+  word-break:break-word;
+  max-width:280px;
+  border: 1px solid #e02f44;
+}
+.chart-warring-popper[x-placement^=top] .popper__arrow::after {
+  border-top-color: #e6a23c;
+  bottom:0px;
+}
+.chart-warring-popper[x-placement^=bottom] .popper__arrow::after {
+  border-bottom-color: #e6a23c;
+}
+.popper__arrow::after{
+  border:solid 3px yellow
+}
+.chart-warring-popper{
+  background-color:#e6a23c;
+  color:#FFF;
+  word-wrap:break-word;
+  word-break:break-word;
+  max-width:280px;
+  border: 1px solid #e6a23c;
+}
+.moreTitle{
+  .panel-info-corner--error .panel-info-corner-inner {
+    border-left: 28px solid #e6a23c;
+    border-right: none;
+    border-bottom: 28px solid rgba(0,0,0,0);
+  }
+  .panel-info-corner-inner {
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+  .nz-icon-warning:before {
+    color: #fff;
+  }
+}
+.nz-chart-resize {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.resize-box {
+  border: 1px solid #d8dce1;
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.resize-shadow {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  box-sizing: border-box;
+}
+.resize-shadow-active {
+  background-color: #f5f9ff;
+  border: 1px solid #b7d0f7;
+  box-shadow: 1px 1px 1px #d3e1f8;
+}
+.drag-disabled .el-dropdown-link {
+  cursor: default !important;
+}
+.resize-box {
+  .pagination {
+    padding-top: 0;
+  }
+  .success {
+    background-color: #50d050;
+    color: white;
+    padding: 2px 5px;
+    border-radius: 4px;
+  }
+  .danger {
+    background-color: #d64f40;
+    color: white;
+    padding:2px 5px;
+    border-radius: 4px;
+  }
+  .chart-table, .chart-alert-info {
+    width: 100%;
+    .table-container {
+      padding: 0 6px;
+      box-sizing: border-box;
+      .nz-table {
+        margin-top: 6px;
+        box-sizing: border-box;
+      }
+    }
+  }
+  .chart-single-stat {
+    width: 100%;
+    .single-stat-container {
+      padding-left: 8px;
+      padding-right: 8px;
+      display: table;
+      text-align: center;
+      width: calc(100% - 16px);
+      .single-stat-content{
+        text-align:center;
+        vertical-align: middle;
+        display:table-cell;
+        font-size:30px;
+      }
+    }
+  }
+  .chart-container.chart-detail {
+    height: 100%;
+    position: relative;
+    background-color: white;
+    .chart-title:hover {
+      background-color:#d8dce1;
+    }
+    .chart-title:not(.drag-disabled) {
+      cursor: move;
+    }
+    .chart-title {
+      text-align: center;
+      width: 100%;
+      line-height: 30px;
+      padding: 1px 3px 0 3px;
+      box-sizing: border-box;
+      .nz-chart-top{
+        width:100%;
+      }
+      .el-dropdown-link {
+        cursor: move;
+      }
+      .el-icon-arrow-down {
+        font-size: 12px;
+      }
+      .chart-title-text {
+        font-size: 16px;
+        line-height: 26px;
+        color: #52545c;
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        max-width:calc(100% - 20px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        .chart-title-icon{
+          display: inline-block;
+          cursor: pointer;
+        }
+      }
+    }
+    .chart-info {
+      padding-top: 6px;
+      width: 100%;
+      height: calc(100% - 34px);
+    }
+    .active-icon {
+      margin: 0;
+    }
+    .chart-sub {
+      padding: 0 15px;
+      margin-bottom: 5px;
+      :last-of-type {
+        margin-bottom: 0;
+      }
+    }
+    .chart-sub-title {
+      background-color: #efefef;
+      font-size: 13px;
+      color: #505255;
+      padding-left: 2px;
+      height: 25px;
+      line-height: 25px;
+      user-select: none;
+    }
+    .chart-sub-content, .chart-third-content, .chart-forth-content {
+      width: 100%;
+      box-sizing: border-box;
+      >.content-item>.item-tip {
+        display: inline-block;
+        box-sizing: border-box;
+      }
+      >.content-item>.item-tip:not(.content-item-value-muti) {
+        padding: 0 3px 0 13px;
+      }
+      >.content-item {
+        font-size: 13px;
+        line-height: 26px;
+        border-top: 1px solid rgb(235, 238, 245);
+        display: flex;
+        position: relative;
+        flex-wrap: wrap;
+        .item-tip> {
+          .item-tip-hide {
+            display: none;
+            position: absolute;
+            bottom: 34px;
+            min-width: 50px;
+            white-space: normal;
+          }
+          .item-tip-key {
+            left: 17%;
+            transform: translateX(-50%);
+            width: 33%;
+          }
+          .item-tip-value {
+            left: 67%;
+            width: 63%;
+            transform: translateX(-50%);
+          }
+          .item-tip-hide::after {
+            content: '';
+            display: block;
+            width:0;
+            height:0;
+            overflow: hidden;
+            font-size: 0;
+            line-height: 0;
+            border: 5px;
+            border-style: dashed dashed solid dashed;
+            border-color: white transparent transparent transparent;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translate(-50%, 10px);
+          }
+        }
+        .item-tip:hover>.item-tip-show {
+          display: block;
+        }
+        .item-tip.deep {
+          padding-left: 26px;
+          box-sizing: border-box;
+          height: 26px;
+        }
+        .item-tip.deepp {
+          padding-left: 39px;
+          box-sizing: border-box;
+          height: 26px;
+        }
+        .item-tip.deep:nth-of-type(2) {
+          padding-left: 13px;
+          box-sizing: border-box;
+          height: 26px;
+        }
+        .item-tip.deepp:last-of-type {
+          padding-left: 13px;
+          box-sizing: border-box;
+          height: 26px;
+        }
+        .tag-value:hover .item-tip-show {
+          display: block;
+        }
+        .tag-value {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+        .content-item-key {
+          color: #666;
+          width: 35%;
+          height: 26px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+        .content-item-key .no-overflow, .content-item-value .no-overflow {
+          text-overflow: unset;
+          white-space: normal;
+        }
+        .content-item-value {
+          .item-value-sub {
+            padding: 0 3px 0 13px;
+            box-sizing: border-box;
+          }
+          .item-value-sub:not(:last-of-type) {
+            border-bottom: 1px solid rgb(235, 238, 245);
+          }
+          .nz-table {
+            th .cell {
+              height: 25px;
+              line-height: 25px;
+            }
+            td .cell {
+              min-height: 26px;
+              line-height: 26px;
+            }
+            .el-table__body {
+              background-color: white;
+            }
+            .el-table__body tr:last-of-type td {
+              border: none;
+            }
+            .el-table__body tr td {
+              background-color: white;
+            }
+            .el-table__body tr:hover>td {
+              background-color: white;
+            }
+          }
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          border-left: 1px solid rgb(235, 238, 245);
+          color: #1a1a1a;
+          width: 65%;
+          height: 99%;
+        }
+      }
+    }
+    .chart-sub-content {
+      >.content-item:first-of-type {
+        border-top: none;
+      }
+      >.content-item:last-of-type {
+        border-bottom: 1px solid rgb(235, 238, 245);
+      }
+    }
+  }
+  .chart-url {
+    .url-container {
+      padding: 0 8px 8px 8px;
+      box-sizing: border-box;
+    }
+  }
+  .line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info ,.vis-network{
+    height: 100%;
+    position: relative;
+    background-color: white;
+    .chartTitle:hover {
+      background-color:#d8dce1;
+    }
+    .chartTitle {
+      text-align: center;
+      width: 100%;
+      line-height: 30px;
+      height: 28px;
+      padding: 1px 3px 0 3px;
+      box-sizing: border-box;
+      .nz-chart-top{
+        width:100%;
+      }
+      .el-dropdown-link {
+        cursor: move;
+      }
+      .el-icon-arrow-down {
+        font-size: 12px;
+      }
+      .chart-title {
+        font-size: 16px;
+        line-height: 26px;
+        color: #52545c;
+        display:flex;
+        justify-content:center;
+        align-items:center;
+        .chart-title-text{
+          max-width:calc(100% - 20px);
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+        .chart-title-icon{
+          display: inline-block;
+          cursor: pointer;
+        }
+      }
+    }
+
+    .line-area {
+      box-sizing: border-box;
+      background: #FFF;
+      min-height: 95px;
+      padding-left:8px;
+      padding-right:8px;
+    }
+    .button-panel-height{
+      height:26px;
+    }
+    .button-panel-height button{
+      height:26px;
+    }
+    .edit {
+      position: absolute;
+      right: 20px;
+      top: 17px;
+      z-index: 10;
+
+    }
+    .chart-select {
+      position: absolute;
+      left: 40px;
+      top: 25px;
+      z-index: 10;
+      font-size: 14px;
+      .chart-select-btn {
+        margin-right: 10px;
+        cursor: pointer;
+        &.active {
+          color: #5aacff;
+        }
+      }
+    }
+    /*没有数据显示*/
+    .null {
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      text-align: center;
+      font-size: 24px;
+      font-weight: 600;
+    }
+  }
+}
+.dialog-tool {
+  margin-right: 40px;
+}
+.line-chart-block-modal {
+  .el-dialog{
+    height: 80%;
+  }
+  .line-area {
+    box-sizing: border-box;
+    background: #FFF;
+    height: 100%;
+    span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/
+      display: block !important;
+      width: 50%;
+      font-size: 14px !important;
+      overflow: hidden;
+      word-wrap: break-word !important;
+      white-space: pre-wrap !important;
+    }
+  }
+  .element-top-border {
+    padding-bottom: 5px;
+    border-top: 1px solid #dfe7f2;
+    margin-top:-25px;
+  }
+
+  .element-bottom-border {
+    border-bottom: 1px solid #dfe7f2;
+    margin-bottom:-20px;
+  }
+  .pt10{
+    padding-top:10px;
+  }
+  .el-dialog__body {
+    height: calc(100% - 80px);
+  }
+
+  .el-dialog__header{
+    padding: 20px 20px 0px;
+  }
+
+}
diff --git a/nezha-fronted/src/components/common/project/popData/lineChart.vue b/nezha-fronted/src/components/common/project/popData/lineChart.vue
new file mode 100644
index 000000000..164b582a9
--- /dev/null
+++ b/nezha-fronted/src/components/common/project/popData/lineChart.vue
@@ -0,0 +1,1450 @@
+<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="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
+        <loading :ref="'localLoading'+chartIndex"></loading>
+        <div class="clearfix chartTitle" :class="{'drag-disabled': this.filter.from == 'alertRule'}" :id="'chartTitle'+chartIndex" >
+          <el-popover
+            v-if="isError"
+            placement="top-start"
+            :close-delay=10
+            trigger="hover"
+            popper-class="chart-error-popper">
+            <div >{{errorContent}}</div>
+            <span slot="reference" 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>
+          <span class="moreTitle">
+            <el-popover
+              v-if="seriesItem.length!==seriesItemArr.length"
+              placement="top-start"
+              :close-delay=10
+              trigger="hover"
+              popper-class="chart-warring-popper">
+            <div class="moreTitle">{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{seriesItem.length}}</div>
+            <span slot="reference" class="panel-info-corner panel-info-corner--error"  @click="loadMore">
+              <i class="nz-icon nz-icon-warning fa"></i>
+              <span class="panel-info-corner-inner"></span>
+           </span>
+          </el-popover>
+          </span>
+          <el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex"  v-clickoutside="clickos">
+            <el-dropdown-menu style="display: none"></el-dropdown-menu>
+            <span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
+              <span class="chart-title-text">{{chartData.title}}</span>
+              <span class="chart-title-icon" v-if="filter.from != 'alertRule'"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
+            </span>
+            <ul v-if="filter.from != 'alertRule'" slot="dropdown" v-show="dropdownMenuShow"  :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}"    style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
+              <li v-show="!isExplore"  @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="showAllScreen"  class="el-dropdown-menu__item">
+                <i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
+            </ul>
+          </el-dropdown>
+        </div>
+        <!--<div  v-if="seriesItem.length!==seriesItemArr.length" class="more"><i class="el-icon-warning"></i> {{$t('dashboard.panel.moreFirstTitle')}} {{seriesLength}}{{$t('dashboard.panel.moreSecondTitle')}}<span @click="loadMore" class="moreClick">{{$t('dashboard.panel.moreThirdTitle')}}{{seriesItem.length}}</span></div>-->
+        <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;height: calc( 100% - 60px )"></div>
+        <div class="chart-no-data" v-show="noData">No Data</div>
+        <div class='legend-container' id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
+          <div v-for="(item, index) in legendListMore" :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':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
+          </div>
+        </div>
+        <!--
+        <Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
+        <el-dialog class="line-chart-block-modal nz-dialog"
+                   :title="$t('dashboard.panel.view')"
+                   :visible.sync="screenModal"
+                   width="90%"
+                   @close="screenModal = false;screenLegendListMore=[]"
+                   style="margin-top: 1vh !important;"
+                   @opened="initDialog">
+          <el-popover
+            v-if="isError"
+            placement="top-start"
+            :close-delay=10
+            trigger="hover"
+            popper-class="chart-error-popper">
+            <div >{{errorContent}}</div>
+            <span slot="reference"  class="panel-info-corner panel-info-corner--error">
+                <i class="nz-icon nz-icon-warning fa-model" ></i>
+                <span class="panel-info-corner-inner"></span>
+            </span>
+          </el-popover>
+          <span class="moreTitle">
+            <el-popover
+              v-if="seriesItemScreen.length!==seriesItemArrScreen.length"
+              placement="top-start"
+              :close-delay=10
+              trigger="hover"
+              popper-class="chart-warring-popper">
+            <div class="moreTitle">{{$t('dashboard.panel.moreTitle')}}{{$t('dashboard.panel.showAll')}}{{seriesItemScreen.length}}</div>
+            <span slot="reference" class="panel-info-corner panel-info-corner--error"  @click="loadScreenMore">
+              <i class="nz-icon nz-icon-warning fa-model"></i>
+              <span class="panel-info-corner-inner"></span>
+           </span>
+          </el-popover>
+          </span>
+          <div slot="title" >
+            <span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
+            <span class="nz-dialog-title" v-show="isExplore">&nbsp;</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>
+            </div>
+          </div>
+          <div class="line-area" ref="screenShowArea"  id="screenShowArea"  style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
+          <div class="chart-no-data" v-show="noData">No Data</div>
+          <div class="legend-container legend-container-screen"  :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
+            <div v-for="(item, index) in screenLegendListMore" :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':bgColorList[index])}"></span>{{item.alias?item.alias:item.name}}
+              <br/><!--bgColorList[index]-->
+            </div>
+          </div>
+
+          <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
+        </el-dialog>
+      </div>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="filter.from != 'alertRule'"></span>
+    </div>
+  </div>
+</template>
+<script>
+  import axios from 'axios';
+  import echarts from 'echarts';
+  import bus from '@/libs/bus';
+  import loading from "@/components/common/loading";
+  import chartDataFormat from '@/components/charts/chartDataFormat'
+  import {randomcolor} from  '@/components/common/js/radomcolor/randomcolor.js'
+  import timePicker from '@/components/common/timePicker'
+  import chartConfig from "@/components/page/dashboard/overview/chartConfig";
+  export default {
+    name: 'lineChartBlock',
+    components: {
+      'loading': loading,
+      'time-picker':timePicker
+    },
+    props: {
+      chartData: {
+        type: Object
+      },
+      // 看板id
+      panelId: {
+        type: Number,
+        default: 0,
+      },
+      chartIndex:{
+        type: Number,
+        default: 0,
+      },
+      // 展示设置内容
+      showSetting: {
+        type: Boolean,
+        default: true,
+      },
+      isExplore:{
+        type:Boolean,
+        default:false,
+      }
+    },
+    data() {
+      return {
+        data: {}, // 该图表信息,chartItem
+        noData:false,
+        seriesItem: [], // 保存信息
+        seriesItemArr:[],// 初次加载的数据
+        seriesLength:20,
+        seriesItemScreen:[],
+        seriesItemArrScreen:[],
+        legendListMore:[],
+        screenLegendListMore:[],
+        chartInfo:{},
+        images: '',
+        isStackArea:false,
+        isError:false,
+        errorContent:'',
+        toolbox: false,
+        items: {
+          metric_name: [], // 每条数据列名称
+          xAxis: [],
+          theData: [], // series数据组
+        },
+        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
+        chartName: '',
+        firstLoad: false, // 是否第一次加载
+        divFirstShow:false,
+        highchartStore: null, // 保存图表数据
+        echartStore:null,// 保存图表数据
+        echartModalStore: null, // 全屏查看时数据
+        chartType: 'line', // 图表类型
+        screenModal: false,
+        // 查询数据使用
+        filter: {
+          start_time: '',
+          end_time: '',
+          from: ""
+        },
+        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
+        legend:[],
+        legendList:[],
+        screenLegendList:[],
+        isGrey:[],
+        isGreyScreen:[],
+        bgColorList: ['#7bbfea', '#b3424a', '#f05b72', '#596032', '#bd6758',
+          '#cd9a5b', '#918597', '#70a19f', '#005344', '#FF00FF',
+          '#f7acbc', '#5f5d46', '#66ffff', '#ccFF66', '#f47920',
+          '#769149', '#1d953f', '#abc88b', '#7f7522', '#9b95c9',
+          '#f3715c', '#ea66a6', '#d1c7b7', '#9d9087', '#77787b',
+          '#f58220', '#c37e00', '#00ae9d', '#f26522', '#76becc',
+          '#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
+        ],
+        stackTotalColor:null,
+        firstShow: false, // 默认不显示操作按钮,
+        caretShow:false,
+        dropdownMenuShow:false,
+        showLegend:true,
+        searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
+        oldSearchTime:[],
+        screenTitleHeight:58
+      };
+    },
+    watch: {},
+    methods: {
+      startResize(e) {
+        let vm = this;
+        this.$chartResizeTool.start(vm, this.chartData, e);
+      },
+      setDivFirstShow(showDiv){
+        this.divFirstShow = showDiv;
+      },
+      mouseEnterChart(){
+        this.caretShow=true;
+        if (this.echartStore) {
+          this.echartStore.setOption({
+            toolbox: {
+              show:true,
+            }
+          })
+        }
+      },
+      mouseLeaveChart(){
+        this.caretShow=false;
+        if (this.echartStore) {
+          this.echartStore.setOption({
+            toolbox: {
+              show:false,
+            }
+          })
+        }
+      },
+      mouseEnterFullChart(){
+        if (this.echartModalStore) {
+          this.echartModalStore.setOption({
+            toolbox: {
+              show:true,
+            }
+          })
+        }
+      },
+      mouseLeaveFullChart(){
+        if (this.echartModalStore) {
+          this.echartModalStore.setOption({
+            toolbox: {
+              show:false,
+            }
+          })
+        }
+      },
+      clickLegend(legendName,index){
+        //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
+        let curIsGrey=this.isGrey[index];
+        if(this.echartStore){
+          this.legendList.forEach((item,i)=>{
+            let isGrey = this.isGrey[i];
+            if(index != i){
+              if(!curIsGrey && !isGrey){
+                this.echartStore.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+              }else if(!curIsGrey && isGrey){
+                this.echartStore.dispatchAction({
+                  type: 'legendSelect',
+                  name: item.name
+                });
+              }else{
+                this.echartStore.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+              }
+            }else {
+              this.echartStore.dispatchAction({
+                type: 'legendSelect',
+                name: item.name
+              });
+            }
+          });
+          this.isGrey.forEach((item,i)=>{
+            if(index != i){
+              if(!curIsGrey && !item){
+                this.$set(this.isGrey, i, true);
+              }else if(!curIsGrey && item){
+                this.$set(this.isGrey, i, false);
+              }else{
+                this.$set(this.isGrey, i, true);
+              }
+            }else{
+              if(item === true){
+                this.$set(this.isGrey, i, false);
+              }
+            }
+          })
+        }
+      },
+      clickScreenLegend(legendName,index){
+        //点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
+        let curIsGrey=this.isGreyScreen[index];
+        if(this.echartModalStore){
+          this.screenLegendList.forEach((item,i)=>{
+            let isGrey = this.isGreyScreen[i];
+            if(index != i){
+              if(!curIsGrey && !isGrey){
+                this.echartModalStore.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+              }else if(!curIsGrey && isGrey){
+                this.echartModalStore.dispatchAction({
+                  type: 'legendSelect',
+                  name: item.name
+                });
+              }else{
+                this.echartModalStore.dispatchAction({
+                  type: 'legendUnSelect',
+                  name: item.name
+                });
+              }
+            }else {
+              this.echartModalStore.dispatchAction({
+                type: 'legendSelect',
+                name: item.name
+              });
+            }
+          });
+          this.isGreyScreen.forEach((item,i)=>{
+            if(index != i){
+              if(!curIsGrey && !item){
+                this.$set(this.isGreyScreen, i, true);
+              }else if(!curIsGrey && item){
+                this.$set(this.isGreyScreen, i, false);
+              }else{
+                this.$set(this.isGreyScreen, i, true);
+              }
+            }else{
+              if(item === true){
+                this.$set(this.isGreyScreen, i, false);
+              }
+            }
+          })
+        }
+      },
+      clearData(){
+        if(this.echartStore){
+          this.echartStore.clear();
+        }
+      },
+      formatLegend(chartWidth,name){
+        if(!name){
+          return '';
+        }
+        //计算宽度
+        var span = document.createElement("span");
+        var result = {};
+        result.width = span.offsetWidth;
+        result.height = span.offsetHeight;
+        span.style.visibility = "hidden";
+        span.style.fontSize = 14;
+        span.style.fontFamily = "Arial";
+        span.style.display = "inline-block";
+        document.body.appendChild(span);
+        if(typeof span.textContent != "undefined"){
+          span.textContent = name;
+        }else{
+          span.innerText = name;
+        }
+        var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
+        document.body.removeChild(span);
+
+        if(txtWidth < chartWidth){
+          return name;
+        }else {
+          var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
+          return name.slice(0,charNum)+'...';
+        }
+      },
+      // chartSite用于区分是全屏显示还是局部显示
+      initChart(chartInfo, dataArg, ele, chartSite,legend) {
+        this.chartInfo=chartInfo;
+        const self = this;
+        this.chartType = ''; // 图表类型
+        if ( chartInfo.type === 4) {//line,bar
+          this.chartType = 'line';
+        }
+        let minTime = null;
+        let maxTime = null;
+        if(dataArg.length>0 && dataArg[0].data
+          && dataArg[0].data.length>0 && dataArg[0].data[0].length>0){
+          let len = dataArg[0].data.length-1;
+          minTime = dataArg[0].data[0][0];
+          maxTime = dataArg[0].data[len][0];
+        }
+        if (chartSite === 'local') {
+          this.echartStore = echarts.init(ele);
+          //chartId='lineChartArea';
+        }else if (chartSite === 'screen') {
+          this.echartModalStore = echarts.init(ele);
+          //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');
+        var option = {
+          title:{
+            show:false,
+          },
+          color: this.bgColorList,
+          toolbox:{
+            show:false,
+            top:'0',
+            showTitle:true,
+            feature:{
+              dataZoom:{
+                yAxisIndex:false,
+                title:{
+                  zoom:self.$t('overall.toolBox.zoom'),
+                  back:self.$t('overall.toolBox.back'),
+                }
+              },
+              magicType:{
+                type:['stack'],
+                title:{
+                  stack:self.$t('overall.toolBox.stack')
+                },
+                iconStyle:{
+                  borderColor:stackIconBorderColor,
+                },
+                emphasis:{
+                  borderColor:stackIconChooseBorderColor,
+                }
+              },
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            confine:false,
+            backgroundColor:'rgba(221,228,237,1)',
+            textStyle:{
+              color:'#000'
+            },
+            extraCssText:'z-index:1000;',
+            /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
+            position:function(point,params,dom,rect,size){
+              dom.style.transform = "translateZ(0)";
+              //提示框位置
+              var x=0;
+              var y=0;
+              //当前鼠标位置
+              var pointX = point[0];
+              var pointY = point[1];
+              //外层div大小
+              var viewWidth = size.viewSize[0];
+              var viewHeight = size.viewSize[1];
+              //提示框大小
+              var boxWidth = size.contentSize[0];
+              var boxHeight = size.contentSize[1];
+              if (chartSite === 'local') { // 本地显示
+                let chartDom = document.getElementById(chartInfo.title+"_"+chartInfo.id);
+                if(chartDom){
+                  let parTop = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetTop;
+                  let parleft = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetLeft;
+
+                  let parent = document.getElementById('tableList');
+                  let parClientHeight = parent.clientHeight;//可视高度
+                  let parClientWidth = parent.clientWidth;//可视宽度
+                  let parScrollTop = parent.scrollTop;
+                  if((parClientWidth-pointX-parleft-20)>=boxWidth){//说明鼠标在左边放不下提示框
+                    x=pointX+10;
+                  }else{
+                    x = pointX - boxWidth;
+                  }
+                  if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
+                    y = pointY+10;
+                  }else {
+                    y = pointY-boxHeight;
+                  }
+                  return [x,y];
+                }else {//preview page
+                  x = pointX - boxWidth;
+                  y = pointY+10;
+                  return [x,y];
+                }
+              }else {
+                if(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
+                  x=pointX+10;
+                }else{
+                  x = pointX - boxWidth;
+                }
+                if(pointY<(viewHeight/2)){//说明鼠标上面放不下提示框
+                  y = pointY+10;
+                }else {
+                  y = pointY-boxHeight;
+                }
+                return [x,y];
+              }
+            },
+            formatter:function(params){
+              //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
+              let str = `<div>`;
+
+              //let str = `<div  style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
+              let sum = 0;
+              params.forEach((item, i) => {
+                let tip=legend[item.seriesIndex];
+                let color = self.bgColorList[item.seriesIndex];
+                if(i===0){
+                  let value=bus.computeTimezone(item.data[0]);
+                  let t_date = new Date(value);
+                  str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+                    + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
+                  str +=`<br/>`;
+                }
+                let val = parseFloat(Number(item.data[1]).toFixed(2));
+                if(val===0){
+                  val = Number(item.data[1]);
+                }
+                sum +=val;
+                str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
+                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
+                str += `<div style="padding-left: 10px;">`;
+                str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
+                str += `</div>`;
+                str += `</div>`;
+              });
+              if(self.data.type==='stackArea' || self.isStackArea){
+                if(!self.stackTotalColor||self.stackTotalColor==''){
+                  self.stackTotalColor=randomcolor();
+                }
+                sum = parseFloat(Number(sum).toFixed(2));
+                str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
+                str +=`<div style="line-height: 18px; font-size: 12px;padding-left:0px;">`
+                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${self.stackTotalColor};}'></span>`;
+                str +=self.$t("dashboard.panel.chartTotal");
+                str +=`</div>`;
+                str +=`<div style="padding-left: 10px;">`;
+                str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
+                str +=`</div>`;
+                str += `</div>`;
+              }
+
+              str +=`</div>`;
+              return str;
+            },
+          },
+          legend: {
+            type:'scroll',
+            height:80,
+            show:false,
+            icon:"roundRect",
+            itemHeight:5,
+            itemWidth:15,
+            formatter:function(name){
+              if(!name){
+                return '';
+              }
+              //计算宽度
+              var span = document.createElement("span");
+              var result = {};
+              result.width = span.offsetWidth;
+              result.height = span.offsetHeight;
+              span.style.visibility = "hidden";
+              span.style.fontSize = 14;
+              span.style.fontFamily = "Arial";
+              span.style.display = "inline-block";
+              document.body.appendChild(span);
+              if(typeof span.textContent != "undefined"){
+                span.textContent = name;
+              }else{
+                span.innerText = name;
+              }
+              var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
+              document.body.removeChild(span);
+
+              if(txtWidth < chartWidth){
+                return name;
+              }else {
+                var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
+                return name.slice(0,charNum)+'...';
+              }
+            },
+            tooltip:{
+              show:true,
+              formatter:function(params){
+                return `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'> ${params.name}</div>`;
+              },
+            },
+            data: legend,
+            orient:'vertical',
+            x:'center',
+            y:'bottom',
+          },
+          grid: {
+            top: 30,
+            left: 0,
+            right: 30,
+            containLabel: true,
+            bottom:8,//156
+          },
+          xAxis: {
+            type: 'time',
+            axisLabel: {
+              interval: '0',
+              showMaxLabel:false,
+              rotate: 0,
+              show:true,
+              fontSize: 10,
+              formatter: function (value) {
+                value = bus.computeTimezone(value);
+                let t_date = new Date(value);
+                let hour = t_date.getHours();
+                hour=hour>9?hour:"0"+hour; //加0补充为两位数字
+                let minute = t_date.getMinutes();
+                minute=minute>9?minute:"0"+minute; //如果分钟小于10,则在前面加0补充为两位数字
+                if(minTime!==null && maxTime!==null){
+                  let diffSec = (maxTime-minTime)/1000;
+                  let secOneDay = 24*60*60;//1天的秒数
+                  let secOneMonth = secOneDay*30;//30天的秒数
+                  if(diffSec<=secOneDay) {//同一天
+                    return [hour,minute ].join(':');
+                  }else if(diffSec<secOneMonth){//大于1天，小于30天
+                    return [t_date.getMonth() + 1, t_date.getDate()].join('/') +" "+  [hour, minute].join(':');
+                  }else {//大于等于30天
+                    return [t_date.getMonth() + 1, t_date.getDate()].join('/');
+                  }
+                }else {
+                  return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + "\n"
+                    + [hour, minute].join(':');
+                }
+
+              }
+            },
+            axisPointer: {//y轴上显示指针对应的值
+              show: true,
+            },
+            splitLine:{
+              show:true,
+              lineStyle: {
+                color: "#d9d9d9",
+                opacity: 0.8,
+                width: 1
+              }
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            //boundaryGap:['20%', '0'],
+          },
+          yAxis: {
+            type: 'value',
+            splitLine:{
+              show:true,
+              lineStyle: {
+                color: "#d9d9d9",
+                opacity: 0.8,
+                width: 1
+              }
+            },
+            //去掉y轴--start
+            axisLine:{
+              show:false
+            },
+            minInterval: 1,
+            axisTick: {
+              show: false,
+            },
+            //去掉y轴--end
+            axisLabel: {
+              show:true,
+              fontSize: 10,
+              formatter: function(value,index){
+                let chartUnit=chartInfo.unit;
+                chartUnit=chartUnit?chartUnit:2;
+                let unit=chartDataFormat.getUnit(chartUnit);
+                //console.info(value, chartUnit, unit.compute(value,index))
+                return unit.compute(value,index);
+              },
+            },
+            //boundaryGap:[0,0.2]
+          },
+          useUTC: false,//使用本地时间
+          series: dataArg
+        };
+        // params.series = dataArg;
+        if (chartSite === 'local') { // 本地显示
+          if(legend){
+            this.legendList = [];
+            legend.forEach((item, i) => {
+              const legend = {
+                name:item.name,
+                alias:item.alias,
+                showText:this.formatLegend(chartWidth,item.name)
+              };
+              this.legendList.push(legend);
+              this.isGrey.push(false);
+            });
+          }
+          this.legendListMore=this.legendList.filter((item,index)=>index<this.seriesLength);
+          this.$nextTick(() => {
+            setTimeout(function () {
+              let divHeight = self.$refs.legendArea.offsetHeight;
+              if(!chartInfo.height){
+                self.echartStore.resize({height:228});
+              }else {
+                self.echartStore.resize({height:228});
+              }
+              if(dataArg&&dataArg.length>0){
+                self.echartStore.clear();
+                self.echartStore.setOption(option);//创建图表
+                self.noData=false;
+              }else{
+                self.noData=true;
+                option=chartConfig.getOption('noData')
+                self.echartStore.clear();
+                self.echartStore.setOption(option);//创建图表
+              }
+
+              self.$refs['localLoading'+self.chartIndex].endLoading();
+              self.firstShow = true; // 展示操作按键
+            }, 100);
+
+            window.addEventListener('resize', function () {
+              self.echartStore.resize();
+            });
+            this.echartStore.on('magictypechanged', function (params) {
+              self.isStackArea = !self.isStackArea;
+              if(self.isStackArea){
+                this.setOption({
+                  toolbox:{
+                    feature:{
+                      dataZoom:{
+                        yAxisIndex:false,
+                        title:{
+                          zoom:self.$t('overall.toolBox.zoom'),
+                          back:self.$t('overall.toolBox.back'),
+                        }
+                      },
+                      magicType:{
+                        type:['stack'],
+                        title:{
+                          stack:self.$t('overall.toolBox.stack')
+                        },
+                        iconStyle:{
+                          borderColor:'#7e7e7e',
+                        },
+                        emphasis:{
+                          borderColor:stackIconChooseBorderColor,
+                        }
+                      },
+                    }
+                  },
+                  tooltip: {
+                    formatter:function(params){
+                      let str = `<div>`;
+                      let sum = 0;
+                      params.forEach((item, i) => {let tip=legend[item.seriesIndex];
+                        let color = self.bgColorList[item.seriesIndex];
+                        if(i===0){
+                          let value=bus.computeTimezone(item.data[0]);
+                          let t_date = new Date(value);
+                          str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+                            + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
+                          str +=`<br/>`;
+                        }
+                        let val = parseFloat(Number(item.data[1]).toFixed(2));
+                        if(val===0){
+                          val = Number(item.data[1]);
+                        }
+                        sum +=val;
+                        str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
+                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
+                        str += `<div style="padding-left: 10px;">`;
+                        str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
+                        str += `</div>`;
+                        str += `</div>`;
+                      });
+                      if(self.data.type==='stackArea' || self.isStackArea){
+                        sum = parseFloat(Number(sum).toFixed(2));
+                        str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
+                        str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
+                        str +=self.$t("dashboard.panel.chartTotal");
+                        str +=`</div>`;
+                        str +=`<div style="padding-left: 10px;">`;
+                        str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
+                        str +=`</div>`;
+                        str += `</div>`;
+                      }
+
+                      str +=`</div>`;
+                      return str;
+                    },
+                  }
+                });
+              }
+            });
+          });
+        } else if (chartSite === 'screen') { // 全屏显示
+          // eslint-disable-next-line
+          if(legend){
+            this.screenLegendList = [];
+            legend.forEach((item, i) => {
+              const legend = {
+                name:item.name,
+                alias:item.alias,
+                showText:this.formatLegend(chartWidth,item.name)
+              };
+              this.screenLegendList.push(legend);
+              this.isGreyScreen.push(false);
+            });
+          }
+          if(this.screenLegendListMore.length!==this.screenLegendList.length){
+            this.screenLegendListMore=this.screenLegendList.filter((item,index)=>index<this.seriesLength);
+          }
+          if(self.echartModalStore){
+            self.echartModalStore.clear();
+            option.title = {};
+            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%
+            //console.log("11____00",sumHeight,divHeight,legendDiv)
+            self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
+            self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
+            setTimeout(function () {
+              if(self.screenLegendListMore.length!==self.screenLegendList.length){
+                self.seriesItemArrScreen=self.seriesItemScreen.filter((item,index)=>index<self.seriesLength);
+
+              }else{
+                self.seriesItemArrScreen=self.seriesItemScreen
+              }
+              option.series=self.seriesItemArrScreen;
+              if(dataArg&&dataArg.length>0){
+                self.echartModalStore.setOption(option);//显示全屏界面
+                self.noData=false;
+              }else{
+                self.noData=true;
+                option=chartConfig.getOption('noData')
+                self.echartModalStore.setOption(option);//显示全屏界面
+              }
+              self.echartModalStore.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%
+                //console.log("11____00",sumHeight,divHeight,legendDiv)
+                self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
+                self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
+                console.log(self.seriesItemScreen,self.seriesItemArrScreen);
+                self.echartModalStore.off('finished');
+              })
+            }, 100);
+
+            this.echartModalStore.on('magictypechanged', function (params) {
+              self.isStackArea = !self.isStackArea;
+              if(self.isStackArea){
+                this.setOption({
+                  toolbox:{
+                    feature:{
+                      dataZoom:{
+                        yAxisIndex:false,
+                        title:{
+                          zoom:self.$t('overall.toolBox.zoom'),
+                          back:self.$t('overall.toolBox.back'),
+                        }
+                      },
+                      magicType:{
+                        type:['stack'],
+                        title:{
+                          stack:self.$t('overall.toolBox.stack')
+                        },
+                        iconStyle:{
+                          borderColor:'#7e7e7e',
+                        },
+                        emphasis:{
+                          borderColor:stackIconChooseBorderColor,
+                        }
+                      },
+                    }
+
+                  },
+                  tooltip: {
+                    formatter:function(params){
+                      let str = `<div>`;
+                      let sum = 0;
+                      params.forEach((item, i) => {let tip=legend[item.seriesIndex];
+                        let color = self.bgColorList[item.seriesIndex];
+                        if(i===0){
+                          let value=bus.computeTimezone(item.data[0]);
+                          let t_date = new Date(value);
+                          str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+                            + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
+                          str +=`<br/>`;
+                        }
+                        let val = parseFloat(Number(item.data[1]).toFixed(2));
+                        if(val===0){
+                          val = Number(item.data[1]);
+                        }
+                        sum +=val;
+                        str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
+                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
+                        str += `<div style="padding-left: 10px;">`;
+                        str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
+                        str += `</div>`;
+                        str += `</div>`;
+                      });
+                      if(self.data.type==='stackArea' || self.isStackArea){
+                        sum = parseFloat(Number(sum).toFixed(2));
+                        str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
+                        str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
+                        str +=self.$t("dashboard.panel.chartTotal");
+                        str +=`</div>`;
+                        str +=`<div style="padding-left: 10px;">`;
+                        str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
+                        str +=`</div>`;
+                        str += `</div>`;
+                      }
+
+                      str +=`</div>`;
+                      return str;
+                    },
+                  }
+                });
+              }
+            });
+          });
+        }
+      },
+      handleLineFeed(str,chartWidth){
+        let rlt='';
+        if(!str){
+          return '';
+        }
+        //计算宽度
+        var span = document.createElement("span");
+        var result = {};
+        result.width = span.offsetWidth;
+        result.height = span.offsetHeight;
+        span.style.visibility = "hidden";
+        span.style.fontSize = 14;
+        span.style.fontFamily = "Arial";
+        span.style.display = "inline-block";
+        document.body.appendChild(span);
+        if(typeof span.textContent != "undefined"){
+          span.textContent = str;
+        }else{
+          span.innerText = str;
+        }
+        var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
+        document.body.removeChild(span);
+
+        if(txtWidth < chartWidth){
+          return str;
+        }else {
+          var charNum = `${(chartWidth-100)/(txtWidth/str.length)}`;
+          return str.slice(0,charNum)+'...';
+        }
+      },
+      setColor(colorNum){
+        this.bgColorList = [];
+        for(let i=0;i<colorNum;i++) {
+          this.bgColorList.push(randomcolor())
+        }
+      },
+      // 设置数据, filter区分
+      setData(chartItem, seriesItem, panelId, filter,legend,area,errorMsg) {
+        this.setColor(legend.length);
+        this.$emit('loadingFalse',chartItem);
+        this.filter.from = filter.from;
+        if(errorMsg && errorMsg!==''){
+          this.isError = true;
+          this.errorContent = errorMsg;
+        }else {
+          this.isError = false;
+          this.errorContent = '';
+        }
+        if(area==='showFullScreen'){//全屏按时间查询
+          /*
+          this.legend = legend;
+          this.data = chartItem;
+          this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
+          this.searchTime[1] = filter.end_time;
+          this.seriesItemScreen = seriesItem;
+          //this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
+          this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'screen',legend);
+          */
+        }else{
+          this.legend = legend;
+          this.$refs['localLoading'+this.chartIndex].startLoading();
+          this.divFirstShow = true;
+          this.firstShow = true; // 展示操作按键
+          this.panelIdInner = panelId;
+          this.data = chartItem;
+          this.seriesItem = seriesItem;
+          this.seriesItemScreen = seriesItem;
+
+          if (filter) { // 保存数据,用于同步时间
+            this.stableFilter = 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.seriesItem=seriesItem;
+          let seriesItemArr=seriesItem;
+          if(seriesItem.length>this.seriesLength){
+            seriesItemArr=seriesItem.filter((item,index)=>index<this.seriesLength); // 只查看前seriesLength条
+            this.seriesItemArr=seriesItemArr;
+            this.seriesItemArrScreen=seriesItemArr;
+
+          }else{
+            this.seriesItemArr=seriesItem
+          }
+          this.initChart(chartItem, seriesItemArr, this.$refs.lineChartArea, 'local',legend);
+        }
+
+      },
+      resize(chartItem) {
+        let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
+        chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
+      },
+      clearChart(){
+        if(this.echartStore){
+          this.echartStore.clear();
+        }
+        if(this.echartModalStore){
+          this.echartModalStore.clear();
+        }
+        this.data = {};
+      },
+      clickos() {
+        this.dropdownMenuShow=false;
+      },
+      // 删除该图表
+      removeChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-remove-chart-block', this.data.id);
+      },
+      // 编辑图表
+      editChart() {
+        this.dropdownMenuShow=false;
+        this.$emit('on-edit-chart-block', this.data.id);
+      },
+      // 重新请求数据 刷新操作
+      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);
+      },
+      initDialog(){
+        //此时初始化，才能获得screenShowArea对象，否则此对象为undefined，无法初始化图表
+        this.initChart(this.data, this.seriesItem, this.$refs.screenShowArea, 'screen',this.legend);
+        // 日期组件同步时间
+        /*
+        this.$refs.calendar.initTime({
+          start: this.stableFilter.start_time,
+          end: this.stableFilter.end_time,
+        });
+        */
+      },
+      changeDate(st){
+        this.oldSearchTime=st;
+        this.searchTime = st;
+        this.filter.start_time = st[0];
+        this.filter.end_time = st[1];
+      },
+      // 全屏查看
+      showAllScreen() {
+        this.dropdownMenuShow=false;
+        // 初始化同步时间
+        this.filter.start_time = this.stableFilter.start_time;
+        this.filter.end_time = this.stableFilter.end_time;
+        //this.searchTime = this.oldSearchTime;
+        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;
+        this.isGreyScreen=[];
+
+        this.seriesItemScreen = this.seriesItem;
+        // this.seriesItemScreen = this.seriesItem;
+        /*
+                this.searchTime = [];
+                this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
+                this.searchTime[1] = this.oldSearchTime[1];
+                this.seriesItemScreen = this.seriesItem;
+                this.screenModal = true;
+                */
+        //this.dateChange();
+      },
+      duplicate(){
+        this.dropdownMenuShow=false;
+        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);
+            }
+          }
+        });
+      },
+      dateChange(time) {
+        this.searchTime = [...time];
+        this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+        this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+        this.echartModalStore.clear();
+        this.showLegend = false;
+        this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
+        if (this.showSetting) {
+          this.getQueryChart('list');
+        } else {
+          this.getQueryChart('dashboard');
+        }
+      },
+      // 查询数据,修改日期查询全屏数据
+      getQueryChart(type) {
+        /*
+        if (this.echartModalStore) {
+          this.echartModalStore.showLoading();
+        }
+        */
+        let axiosArr = [];
+        this.$nextTick(() => {
+          let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
+          let endTime = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
+          if(!startTime || !endTime){//如果时间为空，则默认取最近1小时
+            let now = new Date();
+            startTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+            endTime = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
+            this.searchTime[0] = startTime;
+            this.searchTime[1] = endTime;
+          }
+          let step = bus.getStep(startTime,endTime);
+          if (type === 'list') { // 普通模式,主控台使用
+            console.info(this.data);
+            axiosArr = this.data.elements.map((ele) => {
+              const filterItem = ele;
+              let query = encodeURIComponent(filterItem.expression);
+              return  this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
+            });
+          } else if (type === 'dashboard') { // 概览模式,指标概览中使用
+            // 概览模式,需要区分单独一个和多个
+            if (this.stableFilter.chartCount === 'multiple') {
+              let query = encodeURIComponent(this.data.title);
+              axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step)];
+            } else {
+              let query = encodeURIComponent(this.data.elements[0].expression);
+              axiosArr = [this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step)];
+            }
+          }
+          // 一个图表
+          axios.all(axiosArr).then((res) => {
+            if (res.length > 0) {
+              const series = [];
+              const legend = [];
+              const sumData = {
+                name: 'sum',
+                data: [],
+                visible: true,
+                threshold: null,
+              };
+              if(!this.data.type){
+                this.data.type='line';
+              }
+              res.forEach((response,pos) => {
+                if (response.status === 'success') {
+                  this.isError = false;
+                  this.errorContent = "";
+                  if (response.data.result) {
+                    // 循环处理每个elements下获取的数据列
+                    response.data.result.forEach((queryItem,innerPos) => {
+                      const seriesItem = {
+                        theData: {
+                          name: '',
+                          symbol:'emptyCircle',  //去掉点
+                          symbolSize:[2,2],
+                          smooth:0.2,  //曲线变平滑
+                          showSymbol:false,
+                          data: [],
+                          type:this.data.type,
+                          lineStyle: {
+                            width: 1,
+                            opacity: 0.9
+                          },
+                          //visible: true,
+                          //threshold: null,
+                        },
+                        metric_name: '',
+                      };
+                      if(this.data.type === 'stackArea'){
+                        seriesItem.theData.type='line';
+                        seriesItem.theData.stack=this.data.title;
+                        seriesItem.theData.areaStyle={"opacity": 0.3};
+                      }
+
+                      if((this.data.type === 'line'||this.data.type === 'stackArea'||this.data.type === 'bar')&& this.data.param && this.data.param.threshold){
+                        seriesItem.theData.markLine={
+                          silent: true,
+                          symbol:['circle','circle'],
+                          label:{
+                            distance:this.computeDistance(chartDataFormat.getUnit(this.data.unit?this.data.unit:2).compute(this.data.param.threshold)),
+                            formatter:function(params){
+                              return chartDataFormat.getUnit(this.data.unit?this.data.unit:2).compute(params.value)
+                            }
+                          },
+                          lineStyle:{
+                            color:'#d64f40',
+                            width:2,
+                            type:'dotted'
+                          },
+                          data: [{
+                            yAxis: Number(this.data.param.threshold)
+                          }, ]
+                        }
+                      }
+
+                      // 图表中每条线的名字,后半部分
+                      // let host = `${queryItem.metric.__name__}{`;//up,
+                      let host = '';//up,
+                      if(queryItem.metric.__name__){
+                        host = `${queryItem.metric.__name__}{`;//up,
+                      }
+                      const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
+                      // 设置时间-数据格式对
+                      const dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                      // 判断是否有数据,&& tagsArr.length > 0
+                      if (dpsArr.length > 0 ) {
+                        tagsArr.forEach((tag, i) => {
+                          if (tag !== '__name__') {
+                            host += `${tag}="${queryItem.metric[tag]}",`;
+                          }
+                        });
+                        if(host.endsWith(',')){host = host.substr(0,host.length-1);}
+                        if(queryItem.metric.__name__){
+                          host +="}";
+                        }
+                        if(!host || host===''){
+                          host = this.data.elements[pos].expression;
+                        }
+                        let alias=this.dealLegendAlias(host,this.data.elements[pos].legend);
+                        if(!alias || alias===''){
+                          alias = host;
+                        }
+                        legend.push({name:host+innerPos,alias:alias});
+                        // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                        seriesItem.theData.name = host+innerPos;
+                        seriesItem.metric_name = seriesItem.theData.name;
+                        // 将秒改为毫秒
+                        //alert('table=='+JSON.stringify(queryItem))
+                        seriesItem.theData.data = queryItem.values.map((dpsItem, dpsIndex) => {
+                          /*曲线汇总暂不需要
+                          if (sumData.data[dpsIndex]) {
+                            const sumNum = sumData.data[dpsIndex][1] || 0;
+                            sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+                          } else {
+                            sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+                          }
+                          */
+                          return [dpsItem[0] * 1000, dpsItem[1]];
+                        });
+                        series.push(seriesItem.theData);
+
+                      } else if (this.data.elements && this.data.elements[innerPos]) {
+                        // 无数据提示
+                        /*
+                        const currentInfo = chartItem.elements[innerPos];
+                        const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                        this.$message.warning({
+                          duration: 15,
+                          content: errorMsg,
+                          closable: true,
+                        });
+                        */
+                      }
+                    });
+                  }
+                }else{
+                  this.isError = true;
+                  if(response.msg){
+                    this.errorContent = response.msg;
+                  }else if(response.error){
+                    this.errorContent = response.error;
+                  }else {
+                    this.errorContent = response;
+                  }
+                }
+              });
+              this.setColor(legend.length);
+              this.seriesItemScreen=series;
+              // this.seriesItemArrScreen=series.filter((item,index)=>index<this.seriesLength);
+              this.initChart(this.data,series, this.$refs.screenShowArea, 'screen',legend);
+            }
+          }).catch((error) => {
+            if (error) {
+              this.$message.error(error.toString());
+            }
+          });
+        });
+      },
+      computeDistance:function(str){
+        var width = 0;
+        var html = document.createElement('span');
+        html.innerText = str;
+        html.className = 'getTextWidth';
+        document.querySelector('body').appendChild(html);
+        width = document.querySelector('.getTextWidth').offsetWidth;
+        document.querySelector('.getTextWidth').remove();
+        return Number('-'+(width+5));
+      },
+      showLoad(chartItem) {
+        //设置高度
+        this.$nextTick(() => {
+          const chartBox = document.getElementById('lineChartDiv'+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;
+      },
+      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;
+        }
+
+      },
+      // 获取格式
+      getNumStr(num) {
+        if (num >= 1000) {
+          const kbNum = num / 1000;
+          if (kbNum >= 1000) {
+            const mbNum = kbNum / 1000;
+            if (mbNum > 1000) {
+              const gbNum = mbNum / 1000;
+              return `${gbNum.toFixed(2)}B`;
+            }
+            return `${mbNum.toFixed(2)}M`;
+          }
+          return `${kbNum.toFixed(2)}K`;
+        }
+        return num.toFixed(2);
+      },
+      handleClose(){},
+      // 加载更多
+      loadMore(){
+        this.seriesItemArr=this.seriesItem;
+        this.legendListMore=this.legendList;
+        this.echartStore.setOption({
+          series:this.seriesItem
+        });
+        this.$nextTick(()=>{
+          let divHeight = this.$refs.legendArea.offsetHeight;
+          if(!this.chartInfo.height){
+            this.echartStore.resize({height:(400-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
+          }else {
+            this.echartStore.resize({height:(this.chartInfo.height-divHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight)});
+          }
+        })
+      },
+      // 加载更多
+      loadScreenMore(){
+        this.seriesItemArrScreen=this.seriesItemScreen;
+        this.screenLegendListMore=this.screenLegendList;
+        this.echartModalStore.setOption({
+          series:this.seriesItemScreen
+        });
+        this.$nextTick(()=>{
+          let legendDiv = document.getElementById('screenLegendArea'+this.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%
+          //console.log("11____00",sumHeight,divHeight,legendDiv)
+          this.$refs.screenShowArea.style.height = `${sumHeight - divHeight - this.screenTitleHeight}px`;
+          this.echartModalStore.resize({height: (sumHeight - divHeight - this.screenTitleHeight)});//图表的高度
+        })
+      }
+    },
+    mounted() {
+      this.firstLoad = false;
+    },
+    beforeDestroy() {
+      this.clearChart();
+    },
+  };
+
+</script>
diff --git a/nezha-fronted/src/components/common/project/popData/totalChart.vue b/nezha-fronted/src/components/common/project/popData/totalChart.vue
index a3baf1b5d..99886356c 100644
--- a/nezha-fronted/src/components/common/project/popData/totalChart.vue
+++ b/nezha-fronted/src/components/common/project/popData/totalChart.vue
@@ -1,600 +1,715 @@
 <template>
   <div>
-    <div class="line-area"  ref="lineChartArea"  :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
+    <div v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title"  v-show="!item.isHide" class="chart">
+      <lineChars
+        v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4"
+        :key="'inner' + item.id"
+        :ref="'editChart'+item.id"
+        @on-refresh-data="refreshChart"
+        @on-remove-chart-block="removeChart"
+        :panel-id="index"
+        :chart-index="index"
+        :chart-data="item"
+        v-loading="item.loading"
+        @loadingFalse="loadingFalse"
+      >
+
+      </lineChars>
+    </div>
   </div>
 </template>
 
 <script>
+  import axios from 'axios';
+  import bus from '@/libs/bus';
+  import chartDataFormat from "@/components/charts/chartDataFormat";
+  import lineChars from "./lineChart";
 	export default {
 		name:"totalChart",
+    components:{
+      lineChars
+    },
     props:{
+      nodesArray:{},
+      moduleId:{},
+      projectId:{},
+    },
+    watch:{
 
     },
-    watch:{},
     data(){
 		  return{
-
+        dataList:[],
+        filter:{
+          panelId:'',
+          start_time:'',
+          end_time:'',
+        },
+        chartDataCacheGroup:new Map
       }
     },
     mounted(){
-
+      let item = {...this.nodesArray.find((item)=>item.id==this.moduleId)};
+      let arr=[];
+      item.expressions.forEach((item1,index)=>{
+        let obj={...item,elements:[{...item1,expression:item1.metric,}],isHide:false,type:'line',title:item1.name,id:index,loading:true};
+        arr.push(obj)
+      });
+      this.dataList=arr;
+      this.$nextTick(()=>{
+        arr.forEach(item1=>{
+          this.getData(item1, '', '');
+        })
+      })
     },
     methods:{
-		  //加载chart
-      initChart(chartInfo, dataArg, ele, chartSite,legend) {
-        this.chartInfo=chartInfo;
-        const self = this;
-        this.chartType = ''; // 图表类型
-        if ( chartInfo.type === 4) {//line,bar
-          this.chartType = 'line';
-        }
-        let minTime = null;
-        let maxTime = null;
-        if(dataArg.length>0 && dataArg[0].data
-          && dataArg[0].data.length>0 && dataArg[0].data[0].length>0){
-          let len = dataArg[0].data.length-1;
-          minTime = dataArg[0].data[0][0];
-          maxTime = dataArg[0].data[len][0];
-        }
-        if (chartSite === 'local') {
-          this.echartStore = echarts.init(ele);
-          //chartId='lineChartArea';
-        }else if (chartSite === 'screen') {
-          this.echartModalStore = echarts.init(ele);
-          //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",
-
+		  //刷新图表
+      refreshChart(chartId,searchTime) {
+        this.dataList.forEach((item, index) => {
+          if (item.id === chartId) {
+            this.getChartData(item, index, 'refresh');
           }
-        };
-        let stackIconBorderColor = (chartInfo.type==='stackArea'?'#53a3cb':'#7e7e7e');
-        let stackIconChooseBorderColor = (chartInfo.type==='stackArea'?'#7e7e7e':'#53a3cb');
-        var option = {
-          title:{
-            show:false,
-          },
-          color: this.bgColorList,
-          toolbox:{
-            show:false,
-            top:'0',
-            showTitle:true,
-            feature:{
-              dataZoom:{
-                yAxisIndex:false,
-                title:{
-                  zoom:self.$t('overall.toolBox.zoom'),
-                  back:self.$t('overall.toolBox.back'),
-                }
-              },
-              magicType:{
-                type:['stack'],
-                title:{
-                  stack:self.$t('overall.toolBox.stack')
-                },
-                iconStyle:{
-                  borderColor:stackIconBorderColor,
-                },
-                emphasis:{
-                  borderColor:stackIconChooseBorderColor,
-                }
-              },
-            }
-          },
-          tooltip: {
-            trigger: 'axis',
-            confine:false,
-            backgroundColor:'rgba(221,228,237,1)',
-            textStyle:{
-              color:'#000'
-            },
-            extraCssText:'z-index:1000;',
-            /*enterable:true, 导致tooltip不消失，显示多个tooltip*/
-            position:function(point,params,dom,rect,size){
-              dom.style.transform = "translateZ(0)";
-              //提示框位置
-              var x=0;
-              var y=0;
-              //当前鼠标位置
-              var pointX = point[0];
-              var pointY = point[1];
-              //外层div大小
-              var viewWidth = size.viewSize[0];
-              var viewHeight = size.viewSize[1];
-              //提示框大小
-              var boxWidth = size.contentSize[0];
-              var boxHeight = size.contentSize[1];
-              if (chartSite === 'local') { // 本地显示
-                let chartDom = document.getElementById(chartInfo.title+"_"+chartInfo.id);
-                if(chartDom){
-                  let parTop = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetTop;
-                  let parleft = document.getElementById(chartInfo.title+"_"+chartInfo.id).offsetLeft;
+        });
+      },
+      // 删除图表
+      removeChart(chartId) { //from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
+        const chart = this.dataList.find(item => item.id === chartId);
+        if (chart) {
+          this.$emit('on-remove-chart', chart);
+        }
+      },
+      //获取图表数据
+		  getData(chartInfo, pos, filterType){
+        this.$set(this.filter, "start_time", bus.timeFormate(new Date().getTime()-24*60*60*1000, "yyyy-MM-dd hh:mm:ss"));
+        this.$set(this.filter, "end_time", bus.timeFormate(new Date().getTime(), "yyyy-MM-dd hh:mm:ss"));
+        this.$set(this.filter, "panelId", this.projectId);
+        let startTime =  bus.timeFormate(new Date().getTime()-24*60*60*1000, "yyyy-MM-dd hh:mm:ss");
+        let endTime = bus.timeFormate(new Date().getTime(), "yyyy-MM-dd hh:mm:ss");
+        let step = bus.getStep(startTime, endTime);
+        const chartItem = chartInfo;
+        this.$nextTick(() => {
+          const axiosArr = chartItem.elements.map((ele) => {
+            const filterItem = ele;
+            let query = encodeURIComponent(filterItem.expression);
+            return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+          });
+          // 一个图表的所有element单独获取数据
+          axios.all(axiosArr).then((res) => {
+            if (res.length > 0) {
+              const series = [];
+              let singleStatRlt = '';
+              const legend = [];
+              const tableData = [];
+              const sumData = {
+                name: 'sum',
+                data: [],
+                visible: true,
+                threshold: null,
+              };
+              let errorMsg = "";
+              res.forEach((response, innerPos) => {
+                if (response.status === 'success') {
+                  errorMsg = "";
+                  if (response.data.result) {
+                    // 循环处理每个elements下获取的数据列
+                    if (chartItem.type === 'singleStat') {
+                      if (response.data.result.length === 1) {
+                        let statistics = chartItem.param.statistics;
+                        if (response.data.result[0].values) {
+                          singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
+                        }
+                      } else if (response.data.result.length > 1) {
+                        singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
+                      }
+                    } else {
+                      response.data.result.forEach((queryItem, resIndex) => {
+                        const seriesItem = {
+                          theData: {
+                            name: '',
+                            symbol: 'emptyCircle',  //去掉点
+                            symbolSize: [2, 2],
+                            smooth: 0.2,  //曲线变平滑
+                            showSymbol: false,
+                            data: [],
+                            lineStyle: {
+                              width: 1,
+                              opacity: 0.9
+                            },
+                            type: chartInfo.type,
+                          },
+                          metric_name: '',
+                        };
 
-                  let parent = document.getElementById('tableList');
-                  let parClientHeight = parent.clientHeight;//可视高度
-                  let parClientWidth = parent.clientWidth;//可视宽度
-                  let parScrollTop = parent.scrollTop;
-                  if((parClientWidth-pointX-parleft-20)>=boxWidth){//说明鼠标在左边放不下提示框
-                    x=pointX+10;
-                  }else{
-                    x = pointX - boxWidth;
-                  }
-                  if((parClientHeight-pointY-(parTop-parScrollTop)-20)>=boxHeight){//说明鼠标上面放不下提示框
-                    y = pointY+10;
-                  }else {
-                    y = pointY-boxHeight;
-                  }
-                  return [x,y];
-                }else {//preview page
-                  x = pointX - boxWidth;
-                  y = pointY+10;
-                  return [x,y];
-                }
-              }else {
-                if(pointX<(viewWidth/2)){//说明鼠标在左边放不下提示框
-                  x=pointX+10;
-                }else{
-                  x = pointX - boxWidth;
-                }
-                if(pointY<(viewHeight/2)){//说明鼠标上面放不下提示框
-                  y = pointY+10;
-                }else {
-                  y = pointY-boxHeight;
-                }
-                return [x,y];
-              }
-            },
-            formatter:function(params){
-              //display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;
-              let str = `<div>`;
+                        if (chartInfo.type === 'stackArea') {
+                          seriesItem.theData.type = 'line';
+                          seriesItem.theData.stack = chartInfo.title;
+                          seriesItem.theData.areaStyle = {"opacity": 0.3};
+                        }
+                        if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
+                          seriesItem.theData.markLine={
+                            silent: true,
+                            symbol:['circle','circle'],
+                            label:{
+                              distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
+                              formatter:function(params){
+                                return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
+                              }
+                            },
+                            lineStyle:{
+                              color:'#d64f40',
+                              width:2,
+                              type:'dotted'
+                            },
+                            data: [{
+                              yAxis: Number(chartInfo.param.threshold)
+                            }, ]
+                          }
+                        }
+                        // 图表中每条线的名字,后半部分
+                        let host = '';//up,
+                        if (queryItem.metric.__name__) {
+                          host = `${queryItem.metric.__name__}{`;//up,
+                        }
+                        const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
+                        // 设置时间-数据格式对
+                        let tempArr = [];
+                        let dpsArr = [];
+                        tempArr = queryItem.values;
+                        dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                        dpsArr = dpsArr.map(item => {
+                          return [item[0], [item[1][0], Number(item[1][1])]]
+                        });
+                        // 判断是否有数据, && tagsArr.length > 0
+                        if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                          tagsArr.forEach((tag, i) => {
+                            if (tag !== '__name__') {
+                              host += `${tag}="${queryItem.metric[tag]}",`;
+                            }
+                          });
+                          if (host.endsWith(',')) {
+                            host = host.substr(0, host.length - 1);
+                          }
+                          if (queryItem.metric.__name__) {
+                            host += "}";
+                          }
+                          if (!host || host === '') {
+                            host = chartItem.elements[innerPos].expression;
+                          }
+                          //处理legend别名
+                          let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
+                          if (!alias || alias === '') {
+                            alias = host;
+                          }
+                          legend.push({name: host + resIndex, alias: alias});
+                          // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                          seriesItem.theData.name = host + resIndex;
+                          //alert(seriesItem.theData.name);
+                          seriesItem.metric_name = seriesItem.theData.name;
+                          // 将秒改为毫秒
+                          //alert('table=='+JSON.stringify(queryItem))
+                          seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+                            /*曲线汇总暂不需要
+                            if (sumData.data[dpsIndex]) {
+                              const sumNum = sumData.data[dpsIndex][1] || 0;
+                              sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+                            } else {
+                              sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+                            }
+                            */
+                            let t_date = new Date(dpsItem[0] * 1000);
+                            let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+                            tableData.push({//表格数据
+                              // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                              // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                              element: {element: host, alias: alias},
+                              time: timeTmp,//采集时间
+                              value: dpsItem[1],//数值
+                            });
+                            return [dpsItem[0] * 1000, dpsItem[1]];
+                          });
+                          series.push(seriesItem.theData);
 
-              //let str = `<div  style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
-              let sum = 0;
-              params.forEach((item, i) => {
-                let tip=legend[item.seriesIndex];
-                let color = self.bgColorList[item.seriesIndex];
-                if(i===0){
-                  let value=bus.computeTimezone(item.data[0]);
-                  let t_date = new Date(value);
-                  str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-                    + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-                  str +=`<br/>`;
+                        } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                          // 无数据提示
+                          /*
+                          const currentInfo = chartItem.elements[innerPos];
+                          const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                          this.$message.warning({
+                            duration: 15,
+                            content: errorMsg,
+                            closable: true,
+                          });
+                          */
+                        }
+                      });
+                    }
+                  }
+                } else {
+                  if (response.msg) {
+                    //this.$message.error(response.msg);
+                    errorMsg = response.msg;
+                  } else if (response.error) {
+                    //this.$message.error(response.error);
+                    errorMsg = response.error;
+                  } else {
+                    //this.$message.error(response);
+                    errorMsg = response;
+                  }
                 }
-                let val = parseFloat(Number(item.data[1]).toFixed(2));
-                if(val===0){
-                  val = Number(item.data[1]);
-                }
-                sum +=val;
-                str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
-                str += `<div style="padding-left: 10px;">`;
-                str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
-                str += `</div>`;
-                str += `</div>`;
               });
-              if(self.data.type==='stackArea' || self.isStackArea){
-                if(!self.stackTotalColor||self.stackTotalColor==''){
-                  self.stackTotalColor=randomcolor();
+
+              if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                let chartData = {
+                  chartItem: chartItem,
+                  series: series,
+                  singleStatRlt: singleStatRlt,
+                  legend: legend,
+                  tableData: tableData,
+                  panelId: this.filter.panelId,
+                  filter: this.filter,
+                  filterType: filterType,
+                  errorMsg: errorMsg,
                 }
-                sum = parseFloat(Number(sum).toFixed(2));
-                str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                str +=`<div style="line-height: 18px; font-size: 12px;padding-left:0px;">`
-                str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${self.stackTotalColor};}'></span>`;
-                str +=self.$t("dashboard.panel.chartTotal");
-                str +=`</div>`;
-                str +=`<div style="padding-left: 10px;">`;
-                str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
-                str +=`</div>`;
-                str += `</div>`;
-              }
-
-              str +=`</div>`;
-              return str;
-            },
-          },
-          legend: {
-            type:'scroll',
-            height:80,
-            show:false,
-            icon:"roundRect",
-            itemHeight:5,
-            itemWidth:15,
-            formatter:function(name){
-              if(!name){
-                return '';
-              }
-              //计算宽度
-              var span = document.createElement("span");
-              var result = {};
-              result.width = span.offsetWidth;
-              result.height = span.offsetHeight;
-              span.style.visibility = "hidden";
-              span.style.fontSize = 14;
-              span.style.fontFamily = "Arial";
-              span.style.display = "inline-block";
-              document.body.appendChild(span);
-              if(typeof span.textContent != "undefined"){
-                span.textContent = name;
-              }else{
-                span.innerText = name;
-              }
-              var txtWidth = parseFloat(window.getComputedStyle(span).width) - result.width;
-              document.body.removeChild(span);
-
-              if(txtWidth < chartWidth){
-                return name;
-              }else {
-                var charNum = `${(chartWidth-100)/(txtWidth/name.length)}`;
-                return name.slice(0,charNum)+'...';
-              }
-            },
-            tooltip:{
-              show:true,
-              formatter:function(params){
-                return `<div  style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'> ${params.name}</div>`;
-              },
-            },
-            data: legend,
-            orient:'vertical',
-            x:'center',
-            y:'bottom',
-          },
-          grid: {
-            top: 30,
-            left: 0,
-            right: 30,
-            containLabel: true,
-            bottom:8,//156
-          },
-          xAxis: {
-            type: 'time',
-            axisLabel: {
-              interval: '0',
-              showMaxLabel:false,
-              rotate: 0,
-              show:true,
-              fontSize: 10,
-              formatter: function (value) {
-                value = bus.computeTimezone(value);
-                let t_date = new Date(value);
-                let hour = t_date.getHours();
-                hour=hour>9?hour:"0"+hour; //加0补充为两位数字
-                let minute = t_date.getMinutes();
-                minute=minute>9?minute:"0"+minute; //如果分钟小于10,则在前面加0补充为两位数字
-                if(minTime!==null && maxTime!==null){
-                  let diffSec = (maxTime-minTime)/1000;
-                  let secOneDay = 24*60*60;//1天的秒数
-                  let secOneMonth = secOneDay*30;//30天的秒数
-                  if(diffSec<=secOneDay) {//同一天
-                    return [hour,minute ].join(':');
-                  }else if(diffSec<secOneMonth){//大于1天，小于30天
-                    return [t_date.getMonth() + 1, t_date.getDate()].join('/') +" "+  [hour, minute].join(':');
-                  }else {//大于等于30天
-                    return [t_date.getMonth() + 1, t_date.getDate()].join('/');
+                this.chartDataCacheGroup.set(chartInfo.id, chartData);
+                if (chartItem.type === 'table') {//表格
+                  if (filterType === 'showFullScreen') {//全屏查询
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                      this.filter.panelId, this.filter, filterType, errorMsg);
+                  } else {
+                    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) {
+                  if (series.length && chartItem.type === 4) {//曲线汇总
+                    //series.push(sumData);//后续需要
+                  }
+                  if (filterType === 'showFullScreen') {//全屏查询
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                      this.filter.panelId, this.filter, legend, filterType, errorMsg);
+                  } else {
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                      this.filter.panelId, this.filter, legend, '', errorMsg);
+                  }
+                } else if (chartItem.type === 'singleStat') {
+                  if (filterType === 'showFullScreen') {//全屏查询
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                      this.filter.panelId, this.filter, filterType, errorMsg);
+                  } else {
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                      this.filter.panelId, this.filter, '', errorMsg);
                   }
-                }else {
-                  return [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('/') + "\n"
-                    + [hour, minute].join(':');
                 }
-
               }
-            },
-            axisPointer: {//y轴上显示指针对应的值
-              show: true,
-            },
-            splitLine:{
-              show:true,
-              lineStyle: {
-                color: "#d9d9d9",
-                opacity: 0.8,
-                width: 1
-              }
-            },
-            axisLine: {
-              show: false
-            },
-            axisTick: {
-              show: false
-            },
-            //boundaryGap:['20%', '0'],
-          },
-          yAxis: {
-            type: 'value',
-            splitLine:{
-              show:true,
-              lineStyle: {
-                color: "#d9d9d9",
-                opacity: 0.8,
-                width: 1
-              }
-            },
-            //去掉y轴--start
-            axisLine:{
-              show:false
-            },
-            minInterval: 1,
-            axisTick: {
-              show: false,
-            },
-            //去掉y轴--end
-            axisLabel: {
-              show:true,
-              fontSize: 10,
-              formatter: function(value,index){
-                let chartUnit=chartInfo.unit;
-                chartUnit=chartUnit?chartUnit:2;
-                let unit=chartDataFormat.getUnit(chartUnit);
-                //console.info(value, chartUnit, unit.compute(value,index))
-                return unit.compute(value,index);
-              },
-            },
-            //boundaryGap:[0,0.2]
-          },
-          useUTC: false,//使用本地时间
-          series: dataArg
-        };
-        // params.series = dataArg;
-        if (chartSite === 'local') { // 本地显示
-          if(legend){
-            this.legendList = [];
-            legend.forEach((item, i) => {
-              const legend = {
-                name:item.name,
-                alias:item.alias,
-                showText:this.formatLegend(chartWidth,item.name)
-              };
-              this.legendList.push(legend);
-              this.isGrey.push(false);
-            });
-          }
-          this.legendListMore=this.legendList.filter((item,index)=>index<this.seriesLength);
-          this.$nextTick(() => {
-            setTimeout(function () {
-              let divHeight = self.$refs.legendArea.offsetHeight;
-              if(!chartInfo.height){
-                self.echartStore.resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
-              }else {
-                self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
-              }
-              if(dataArg&&dataArg.length>0){
-                self.echartStore.clear();
-                self.echartStore.setOption(option);//创建图表
-                self.noData=false;
-              }else{
-                self.noData=true;
-                option=chartConfig.getOption('noData')
-                self.echartStore.clear();
-                self.echartStore.setOption(option);//创建图表
-              }
-
-              self.$refs['localLoading'+self.chartIndex].endLoading();
-              self.firstShow = true; // 展示操作按键
-            }, 100);
-
-            window.addEventListener('resize', function () {
-              self.echartStore.resize();
-            });
-            this.echartStore.on('magictypechanged', function (params) {
-              self.isStackArea = !self.isStackArea;
-              if(self.isStackArea){
-                this.setOption({
-                  toolbox:{
-                    feature:{
-                      dataZoom:{
-                        yAxisIndex:false,
-                        title:{
-                          zoom:self.$t('overall.toolBox.zoom'),
-                          back:self.$t('overall.toolBox.back'),
-                        }
-                      },
-                      magicType:{
-                        type:['stack'],
-                        title:{
-                          stack:self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle:{
-                          borderColor:'#7e7e7e',
-                        },
-                        emphasis:{
-                          borderColor:stackIconChooseBorderColor,
-                        }
-                      },
-                    }
-                  },
-                  tooltip: {
-                    formatter:function(params){
-                      let str = `<div>`;
-                      let sum = 0;
-                      params.forEach((item, i) => {let tip=legend[item.seriesIndex];
-                        let color = self.bgColorList[item.seriesIndex];
-                        if(i===0){
-                          let value=bus.computeTimezone(item.data[0]);
-                          let t_date = new Date(value);
-                          str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-                            + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-                          str +=`<br/>`;
-                        }
-                        let val = parseFloat(Number(item.data[1]).toFixed(2));
-                        if(val===0){
-                          val = Number(item.data[1]);
-                        }
-                        sum +=val;
-                        str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
-                        str += `<div style="padding-left: 10px;">`;
-                        str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
-                        str += `</div>`;
-                        str += `</div>`;
-                      });
-                      if(self.data.type==='stackArea' || self.isStackArea){
-                        sum = parseFloat(Number(sum).toFixed(2));
-                        str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                        str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
-                        str +=self.$t("dashboard.panel.chartTotal");
-                        str +=`</div>`;
-                        str +=`<div style="padding-left: 10px;">`;
-                        str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
-                        str +=`</div>`;
-                        str += `</div>`;
-                      }
-
-                      str +=`</div>`;
-                      return str;
-                    },
+            } else {
+              const type = chartItem.type;
+              if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                if (type === 'table') {
+                  if (filterType === 'showFullScreen') {//table的全屏查询
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                      this.filter, filterType);
+                  } else {
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                      this.filter);
                   }
-                });
-              }
-            });
-          });
-        } else if (chartSite === 'screen') { // 全屏显示
-          // eslint-disable-next-line
-          if(legend){
-            this.screenLegendList = [];
-            legend.forEach((item, i) => {
-              const legend = {
-                name:item.name,
-                alias:item.alias,
-                showText:this.formatLegend(chartWidth,item.name)
-              };
-              this.screenLegendList.push(legend);
-              this.isGreyScreen.push(false);
-            });
-          }
-          if(this.screenLegendListMore.length!==this.screenLegendList.length){
-            this.screenLegendListMore=this.screenLegendList.filter((item,index)=>index<this.seriesLength);
-          }
-          if(self.echartModalStore){
-            self.echartModalStore.clear();
-            option.title = {};
-            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%
-            //console.log("11____00",sumHeight,divHeight,legendDiv)
-            self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
-            self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
-            setTimeout(function () {
-              if(self.screenLegendListMore.length!==self.screenLegendList.length){
-                self.seriesItemArrScreen=self.seriesItemScreen.filter((item,index)=>index<self.seriesLength);
-
-              }else{
-                self.seriesItemArrScreen=self.seriesItemScreen
-              }
-              option.series=self.seriesItemArrScreen;
-              if(dataArg&&dataArg.length>0){
-                self.echartModalStore.setOption(option);//显示全屏界面
-                self.noData=false;
-              }else{
-                self.noData=true;
-                option=chartConfig.getOption('noData')
-                self.echartModalStore.setOption(option);//显示全屏界面
-              }
-              self.echartModalStore.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%
-                //console.log("11____00",sumHeight,divHeight,legendDiv)
-                self.$refs.screenShowArea.style.height = `${sumHeight - divHeight - self.screenTitleHeight}px`;
-                self.echartModalStore.resize({height: (sumHeight - divHeight - self.screenTitleHeight)});//图表的高度
-                console.log(self.seriesItemScreen,self.seriesItemArrScreen);
-                self.echartModalStore.off('finished');
-              })
-            }, 100);
-
-            this.echartModalStore.on('magictypechanged', function (params) {
-              self.isStackArea = !self.isStackArea;
-              if(self.isStackArea){
-                this.setOption({
-                  toolbox:{
-                    feature:{
-                      dataZoom:{
-                        yAxisIndex:false,
-                        title:{
-                          zoom:self.$t('overall.toolBox.zoom'),
-                          back:self.$t('overall.toolBox.back'),
-                        }
-                      },
-                      magicType:{
-                        type:['stack'],
-                        title:{
-                          stack:self.$t('overall.toolBox.stack')
-                        },
-                        iconStyle:{
-                          borderColor:'#7e7e7e',
-                        },
-                        emphasis:{
-                          borderColor:stackIconChooseBorderColor,
-                        }
-                      },
-                    }
-
-                  },
-                  tooltip: {
-                    formatter:function(params){
-                      let str = `<div>`;
-                      let sum = 0;
-                      params.forEach((item, i) => {let tip=legend[item.seriesIndex];
-                        let color = self.bgColorList[item.seriesIndex];
-                        if(i===0){
-                          let value=bus.computeTimezone(item.data[0]);
-                          let t_date = new Date(value);
-                          str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
-                            + [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
-                          str +=`<br/>`;
-                        }
-                        let val = parseFloat(Number(item.data[1]).toFixed(2));
-                        if(val===0){
-                          val = Number(item.data[1]);
-                        }
-                        sum +=val;
-                        str += `<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                        str += `<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;"><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}  </div>`;
-                        str += `<div style="padding-left: 10px;">`;
-                        str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
-                        str += `</div>`;
-                        str += `</div>`;
-                      });
-                      if(self.data.type==='stackArea' || self.isStackArea){
-                        sum = parseFloat(Number(sum).toFixed(2));
-                        str +=`<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;display: flex; justify-content: space-between; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 12px;">`;
-                        str +=`<div style="line-height: 18px; font-size: 12px;padding-left:20px;">`
-                        str +=self.$t("dashboard.panel.chartTotal");
-                        str +=`</div>`;
-                        str +=`<div style="padding-left: 10px;">`;
-                        str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(sum,null,2);
-                        str +=`</div>`;
-                        str += `</div>`;
-                      }
-
-                      str +=`</div>`;
-                      return str;
-                    },
+                } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
+                  if (filterType === 'showFullScreen') {//table的全屏查询
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                      this.filter, filterType);
+                  } else {
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                      this.filter);
                   }
-                });
+                } else if (chartItem.type === 'singleStat') {
+                  if (filterType === 'showFullScreen') {//全屏查询
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                      this.filter.panelId, this.filter, filterType);
+                  } else {
+                    this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                      this.filter.panelId, this.filter);
+                  }
+                }
               }
-            });
+            }
+          }).catch((error) => {
+            if (error) {
+              this.$message.error(error.toString());
+              console.error(error)
+            }
           });
+        });
+      },
+
+      getChartDataForSearch(chartItem,realIndex){
+        let chartData = this.chartDataCacheGroup.get(chartItem.id);
+        if(chartData){
+          let filterType = chartData.filterType;
+          let errorMsg = chartData.errorMsg;
+          let tableData = chartData.tableData;
+          let panelId = chartData.panelId;
+          let filter = chartData.filter;
+          let legend = chartData.legend;
+          let series = chartData.series;
+          let singleStatRlt = chartData.singleStatRlt;
+          if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
+            if (chartItem.type === 'table') {//表格
+              if (filterType === 'showFullScreen') {//全屏查询
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
+                  panelId, filter, filterType,errorMsg);
+              } else {
+                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) {
+              if (filterType === 'showFullScreen') {//全屏查询
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
+                  panelId, filter, legend, filterType,errorMsg);
+              } else {
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
+                  panelId, filter, legend,'',errorMsg);
+              }
+            }else if(chartItem.type ==='singleStat'){
+              if (filterType === 'showFullScreen') {//全屏查询
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
+                  this.filter.panelId, this.filter, filterType,errorMsg);
+              } else {
+                this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
+                  this.filter.panelId, this.filter,'',errorMsg);
+              }
+            }
+          }
+        }else {
+          this.getChartData(chartItem, realIndex);
         }
       },
+      // 获取一个图表具体数据,图表信息，图表位置index
+      getChartData(chartInfo, pos, filterType) {
+        const chartItem = chartInfo;
+        const index = pos; // 指标
+        if(chartItem.type === 'assetInfo'){
+          if (chartItem.from != 'endpoint') {
+            this.$set(chartItem, "draggable", true);
+            this.$set(chartItem, "resizable", true);
+          }
+          this.getAssetInfoChartData(chartItem);
+          return;
+        }
+        if(chartItem.type === 'endpointInfo'){
+          this.getEndpointInfoChartData(chartItem);
+          return;
+        }
+        if(chartItem.type == 'projectInfo'){
+          chartItem.title = this.$t("project.chart.projectInfo");
+          this.getProjectInfoChartData(chartItem);
+          return;
+        }
+        if(chartItem.type === 'alertList'){
+          this.getAlertListChartData(chartItem,filterType);
+          return;
+        }
+        if(chartItem.type === 'alertRuleInfo'){
+          this.getAlertRuleChartData(chartItem);
+          return;
+        }
+
+        if (this.isModel) {
+          this.modelStaticData(chartInfo, filterType);
+        } else {
+          // 没有数据的设置提示信息暂无数据-针对每一个图
+          const len = chartItem.elements.length;
+          if (len === 0) {
+            this.$nextTick(() => {
+              if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？
+              }
+            });
+          } else {
+            let startTime = '';
+            let endTime = '';
+            if (filterType === 'refresh') {//刷新
+              const now = new Date();
+              const origin = new Date(this.filter.end_time);
+              const numInterval = now.getTime() - origin.getTime();
+              if (numInterval >= 60000) {//大于1分钟，则start、end均往后移numInterval，否则时间不变
+                startTime = this.getNewTime(this.filter.start_time, numInterval);
+                endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
+              } else {
+                startTime = this.filter.start_time;
+                endTime = this.filter.end_time;
+              }
+            } else if (filterType === 'showFullScreen') {//全屏时间查询
+              startTime = this.filter.start_time;
+              endTime = this.filter.end_time;
+              //this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
+            } else {
+              startTime = this.filter.start_time;
+              endTime = this.filter.end_time;
+            }
+            let step = bus.getStep(startTime, endTime);
+            this.$nextTick(() => {
+              const axiosArr = chartItem.elements.map((ele) => {
+                const filterItem = ele;
+                let query = encodeURIComponent(filterItem.expression);
+                return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
+              });
+              // 一个图表的所有element单独获取数据
+              axios.all(axiosArr).then((res) => {
+                if (res.length > 0) {
+                  const series = [];
+                  let singleStatRlt = '';
+                  const legend = [];
+                  const tableData = [];
+                  const sumData = {
+                    name: 'sum',
+                    data: [],
+                    visible: true,
+                    threshold: null,
+                  };
+                  let errorMsg = "";
+                  res.forEach((response, innerPos) => {
+                    if (response.status === 'success') {
+                      errorMsg = "";
+                      if (response.data.result) {
+                        // 循环处理每个elements下获取的数据列
+                        if (chartItem.type === 'singleStat') {
+                          if (response.data.result.length === 1) {
+                            let statistics = chartItem.param.statistics;
+                            if (response.data.result[0].values) {
+                              singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
+                            }
+                          } else if (response.data.result.length > 1) {
+                            singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
+                          }
+                        } else {
+                          response.data.result.forEach((queryItem, resIndex) => {
+                            const seriesItem = {
+                              theData: {
+                                name: '',
+                                symbol: 'emptyCircle',  //去掉点
+                                symbolSize: [2, 2],
+                                smooth: 0.2,  //曲线变平滑
+                                showSymbol: false,
+                                data: [],
+                                lineStyle: {
+                                  width: 1,
+                                  opacity: 0.9
+                                },
+                                type: chartInfo.type,
+                              },
+                              metric_name: '',
+                            };
+
+                            if (chartInfo.type === 'stackArea') {
+                              seriesItem.theData.type = 'line';
+                              seriesItem.theData.stack = chartInfo.title;
+                              seriesItem.theData.areaStyle = {"opacity": 0.3};
+                            }
+                            if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
+                              seriesItem.theData.markLine={
+                                silent: true,
+                                symbol:['circle','circle'],
+                                label:{
+                                  distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
+                                  formatter:function(params){
+                                    return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
+                                  }
+                                },
+                                lineStyle:{
+                                  color:'#d64f40',
+                                  width:2,
+                                  type:'dotted'
+                                },
+                                data: [{
+                                  yAxis: Number(chartInfo.param.threshold)
+                                }, ]
+                              }
+                            }
+                            // 图表中每条线的名字,后半部分
+                            let host = '';//up,
+                            if (queryItem.metric.__name__) {
+                              host = `${queryItem.metric.__name__}{`;//up,
+                            }
+                            const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
+                            // 设置时间-数据格式对
+                            let tempArr = [];
+                            let dpsArr = [];
+                            tempArr = queryItem.values;
+                            dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
+                            dpsArr = dpsArr.map(item => {
+                              return [item[0], [item[1][0], Number(item[1][1])]]
+                            });
+                            // 判断是否有数据, && tagsArr.length > 0
+                            if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                              tagsArr.forEach((tag, i) => {
+                                if (tag !== '__name__') {
+                                  host += `${tag}="${queryItem.metric[tag]}",`;
+                                }
+                              });
+                              if (host.endsWith(',')) {
+                                host = host.substr(0, host.length - 1);
+                              }
+                              if (queryItem.metric.__name__) {
+                                host += "}";
+                              }
+                              if (!host || host === '') {
+                                host = chartItem.elements[innerPos].expression;
+                              }
+                              //处理legend别名
+                              let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
+                              if (!alias || alias === '') {
+                                alias = host;
+                              }
+                              legend.push({name: host + resIndex, alias: alias});
+                              // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
+                              seriesItem.theData.name = host + resIndex;
+                              //alert(seriesItem.theData.name);
+                              seriesItem.metric_name = seriesItem.theData.name;
+                              // 将秒改为毫秒
+                              //alert('table=='+JSON.stringify(queryItem))
+                              seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
+                                /*曲线汇总暂不需要
+                                if (sumData.data[dpsIndex]) {
+                                  const sumNum = sumData.data[dpsIndex][1] || 0;
+                                  sumData.data[dpsIndex][1] = sumNum + dpsItem[1];
+                                } else {
+                                  sumData.data[dpsIndex] = [dpsItem[0] * 1000, dpsItem[1]];
+                                }
+                                */
+                                let t_date = new Date(dpsItem[0] * 1000);
+                                let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
+                                tableData.push({//表格数据
+                                  // label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
+                                  // metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
+                                  element: {element: host, alias: alias},
+                                  time: timeTmp,//采集时间
+                                  value: dpsItem[1],//数值
+                                });
+                                return [dpsItem[0] * 1000, dpsItem[1]];
+                              });
+                              series.push(seriesItem.theData);
+
+                            } else if (chartItem.elements && chartItem.elements[innerPos]) {
+                              // 无数据提示
+                              /*
+                              const currentInfo = chartItem.elements[innerPos];
+                              const errorMsg = `图表 ${chartItem.title} 中 ${currentInfo.metric},${currentInfo.tags} 无数据`;
+                              this.$message.warning({
+                                duration: 15,
+                                content: errorMsg,
+                                closable: true,
+                              });
+                              */
+                            }
+                          });
+                        }
+                      }
+                    } else {
+                      if (response.msg) {
+                        //this.$message.error(response.msg);
+                        errorMsg = response.msg;
+                      } else if (response.error) {
+                        //this.$message.error(response.error);
+                        errorMsg = response.error;
+                      } else {
+                        //this.$message.error(response);
+                        errorMsg = response;
+                      }
+                    }
+                  });
+
+                  if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                    let chartData = {
+                      chartItem: chartItem,
+                      series: series,
+                      singleStatRlt: singleStatRlt,
+                      legend: legend,
+                      tableData: tableData,
+                      panelId: this.filter.panelId,
+                      filter: this.filter,
+                      filterType: filterType,
+                      errorMsg: errorMsg,
+                    }
+                    this.chartDataCacheGroup.set(chartInfo.id, chartData);
+                    if (chartItem.type === 'table') {//表格
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
+                          this.filter.panelId, this.filter, filterType, errorMsg);
+                      } else {
+                        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) {
+                      if (series.length && chartItem.type === 4) {//曲线汇总
+                        //series.push(sumData);//后续需要
+                      }
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                          this.filter.panelId, this.filter, legend, filterType, errorMsg);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
+                          this.filter.panelId, this.filter, legend, '', errorMsg);
+                      }
+                    } else if (chartItem.type === 'singleStat') {
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                          this.filter.panelId, this.filter, filterType, errorMsg);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
+                          this.filter.panelId, this.filter, '', errorMsg);
+                      }
+                    }
+                  }
+                } else {
+                  const type = chartItem.type;
+                  if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
+                    if (type === 'table') {
+                      if (filterType === 'showFullScreen') {//table的全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                          this.filter, filterType);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                          this.filter);
+                      }
+                    } else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
+                      if (filterType === 'showFullScreen') {//table的全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                          this.filter, filterType);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
+                          this.filter);
+                      }
+                    } else if (chartItem.type === 'singleStat') {
+                      if (filterType === 'showFullScreen') {//全屏查询
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                          this.filter.panelId, this.filter, filterType);
+                      } else {
+                        this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
+                          this.filter.panelId, this.filter);
+                      }
+                    }
+                  }
+                }
+              }).catch((error) => {
+                if (error) {
+                  this.$message.error(error.toString());
+                  console.error(error)
+                }
+              });
+            });
+          }
+        }
+      },
+      // 关闭loading状态
+      loadingFalse(item){
+        console.log(item);
+        this.$set(this.dataList[item.id],'loading',false);
+      },
     },
 	}
 </script>
 
 <style scoped>
-
+  .chart{
+    width: 500px;
+    height: 300px;
+  }
 </style>
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index bdc291c4c..7c327a25a 100644
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <div class="edit-topology" >
+    <div class="edit-topology" v-if="editVisNetwork">
       <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topology-module">
         Module element :
         <span class="edit-topology-add" @click="addModelShow">Add</span>
@@ -70,7 +70,7 @@
           <popDataMain :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataMain>
         </div>
         <div v-if="popDataShow.total">
-          total
+          <total-chart :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" :nodesArray="nodesArray"></total-chart>
         </div>
         <div v-if="popDataShow.info">
           <popDataInfo :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataInfo>
@@ -122,9 +122,11 @@
   import addLine from './addLine'
   import popDataMain from './popData/Main'
   import popDataInfo from './popData/Info'
+  import TotalChart from "./popData/totalChart";
 	export default {
 		name:"topology",
     components: {
+      TotalChart,
       'add-model':addNode,
       'add-line':addLine,
       'popDataMain':popDataMain,
@@ -449,6 +451,7 @@
         this.$emit('setTopologyData',nodesArray, edgesArray);
         this.setNetworkData(nodesArray, edgesArray);
         this.networkPopClose();
+        this.arrayDiff();
       },
       nodeEdit(){
         this.addNodeShow=true;
@@ -512,7 +515,7 @@
       // 数组取差集
       arrayDiff(){
         // this.moduleDataS=this.allModuleInfos-this.nodesArray
-        this.moduleDataS=this.allModuleInfos;
+        this.moduleDataS={...this.allModuleInfos};
         this.nodesArray.forEach((item)=>{
           this.moduleDataS.module=this.moduleDataS.module.filter((item1)=> item.id!==item1.id)
         })
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
index c1eee61a5..6d61b125e 100644
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ b/nezha-fronted/src/components/common/project/visNetwork.vue
@@ -211,6 +211,9 @@
   @import './chart.scss';
 </style>
 <style scoped>
+  .facade-top /deep/.active-icon{
+    margin-top: 0;
+  }
   .nz-icon-edit{
     margin-right: 5px;
   }