diff --git a/nezha-fronted/src/components/charts/diagram-chart.vue b/nezha-fronted/src/components/charts/diagram-chart.vue
index 9dc2a2915..0b3f6e953 100644
--- a/nezha-fronted/src/components/charts/diagram-chart.vue
+++ b/nezha-fronted/src/components/charts/diagram-chart.vue
@@ -41,7 +41,7 @@
         </div>
         <div class="mt-10 rich-text-container" v-cloak  v-show="firstShow" >
           <div :id="'chartContainer'+chartIndex"  ref="chartContainer" class="text-content"  >
-            <diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram"/>
+            <diagram style="height: 100%;width: 100%" :topoData="data.param.topo" :fromChart="true" :topologyIndexF="chartData.id" :isPanel="true" ref="diagram" :chartInfo="chartData"/>
           </div>
         </div>
         <!--全屏-->
@@ -59,7 +59,7 @@
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
       </div>
-      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock" :fromChart="true"></span>
+      <span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock" :fromChart="true" :chartInfo="chartData"></span>
     </div>
   </div>
 </template>
diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index 40e4f2be3..fc1021cfc 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -320,8 +320,8 @@ import {
   imageTemp,
   myShape,
   myAnchors,
-  myIconRect,
-  myTextRect,
+  myIconRect2,
+  myTextRect2,
   onChangeAnimate,
   onChangeAnimateLine,
   myCubec,
@@ -340,7 +340,7 @@ import { getMetricTypeValue } from '../js/tools'
 import bus from '../../../libs/bus'
 import CanvasContextMenu from '@/components/common/project/L5/CanvasContextMenu'
 // 注册到画布
-registerNode('rectangleImg', myShape, myAnchors, myIconRect, myTextRect)
+registerNode('rectangleImg', myShape, myAnchors, myIconRect2, null)
 registerNode('myCube', myCubec, myCubeAnchors, null, null)
 
 const canvasOptions = {
@@ -506,6 +506,7 @@ export default {
 
     },
     topoData: {},
+    chartInfo: {},
     fromChartBox: {
       type: Boolean,
       default: false
@@ -636,8 +637,11 @@ export default {
             })
             getTopology(this.topologyIndex).resize()
             getTopology(this.topologyIndex).centerView()
-            if (this.fromChartBox || this.fromChart) {
+            if (this.fromChartBox || this.fromChart) { // 是否来自panel 和 chartBox
               getTopology(this.topologyIndex).fitView(20)
+              if (this.chartInfo && this.chartInfo.param && this.chartInfo.param.lock) { // 判断节点 以及画布 是否可以拖动
+                getTopology(this.topologyIndex).lock(2)
+              }
             }
             this.penToolTipScale = getTopology(this.topologyIndex).data.scale
             setTimeout(() => {
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index 0c43f6cc0..6c6d424f5 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -50,121 +50,123 @@
             </el-form-item>
           </el-row>
           <!--metric-->
-          <el-row :key="index" class="element-item form-row-item" style=""
-                  v-for="(item,index) in selection.pen.data.expressArr">
-            <promql-input
-              :expression-list="selection.pen.data.expressArr"
-              :id="index"
-              :index="index"
-              :key="index"
-              :plugins="['metric-selector', 'metric-input', 'remove']"
-              :ref="'promql-'+'-1'"
-              :showRemove="false"
-              :styleType="2"
-              :metricOptionsParent="metricOptions"
-              @change="expressionChange"
-              :from-father-data="true"
-            ></promql-input>
-            <el-row style="margin-top: 10px">
-              <template>
-                <!--chart aggregation-->
-                <el-col class="legend-title">
-                  {{$t('dashboard.panel.chartForm.aggregation')}}&nbsp;
-                </el-col>
-                <el-col style="width: calc(100% - 120px)">
-                  <el-select class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
-                             size="mini"
-                             style="width: 100%"
-                             v-model="selection.pen.data.aggregation" value-key="chartType">
-                    <el-option :key="item.id" :label="item.name" :value="item.name" v-for="item in aggregationList">
-                      <span class="panel-dropdown-label-txt">{{item.name}}</span>
-                    </el-option>
-                  </el-select>
-                </el-col>
-              </template>
+          <div v-show="selection.pen.data.valueMappingShow">
+            <el-row :key="index" class="element-item form-row-item" style=""
+                    v-for="(item,index) in selection.pen.data.expressArr">
+              <promql-input
+                :expression-list="selection.pen.data.expressArr"
+                :id="index"
+                :index="index"
+                :key="index"
+                :plugins="['metric-selector', 'metric-input', 'remove']"
+                :ref="'promql-'+'-1'"
+                :showRemove="false"
+                :styleType="2"
+                :metricOptionsParent="metricOptions"
+                @change="expressionChange"
+                :from-father-data="true"
+              ></promql-input>
+              <el-row style="margin-top: 10px">
+                <template>
+                  <!--chart aggregation-->
+                  <el-col class="legend-title">
+                    {{$t('dashboard.panel.chartForm.aggregation')}}&nbsp;
+                  </el-col>
+                  <el-col style="width: calc(100% - 120px)">
+                    <el-select class="right-box-row-with-btn" :placeholder="$t('el.select.placeholder')" popper-class="chart-box-dropdown-small"
+                               size="mini"
+                               style="width: 100%"
+                               v-model="selection.pen.data.aggregation" value-key="chartType">
+                      <el-option :key="item.id" :label="item.name" :value="item.name" v-for="item in aggregationList">
+                        <span class="panel-dropdown-label-txt">{{item.name}}</span>
+                      </el-option>
+                    </el-select>
+                  </el-col>
+                </template>
+              </el-row>
             </el-row>
-          </el-row>
-          <div style="width: 100%;margin-top: 10px;box-sizing: border-box;padding-left: 10px">
-            <div class="thresholds-box">
-              <el-row class="thresholds-title">
-                <el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}}
-                  <span @click="changeValueMappingSort">
+            <div style="width: 100%;margin-top: 10px;box-sizing: border-box;padding-left: 10px">
+              <div class="thresholds-box">
+                <el-row class="thresholds-title">
+                  <el-col class="thresholds-cell" :span="4">{{$t('project.topology.level')}}
+                    <span @click="changeValueMappingSort">
                     <i  :class="['nz-icon','nz-icon-arrow-up1',selection.pen.data.valueMappingSort==='desc'?'is-arrow-active':'']"></i>
                     <i  :class="['nz-icon','nz-icon-arrow-down2',selection.pen.data.valueMappingSort==='desc'?'':'is-arrow-active']"></i>
                   </span>
-                </el-col>
-                <el-col class="thresholds-cell" :span="4">{{$t('project.topology.color')}}</el-col>
-                <el-col class="thresholds-cell" :span="6">{{$t('project.topology.value')}}</el-col>
-                <el-col class="thresholds-cell" :span="8">{{$t('project.topology.animation')}}</el-col>
-                <el-col class="thresholds-cell" :span="2"></el-col>
-              </el-row>
+                  </el-col>
+                  <el-col class="thresholds-cell" :span="4">{{$t('project.topology.color')}}</el-col>
+                  <el-col class="thresholds-cell" :span="6">{{$t('project.topology.value')}}</el-col>
+                  <el-col class="thresholds-cell" :span="8">{{$t('project.topology.animation')}}</el-col>
+                  <el-col class="thresholds-cell" :span="2"></el-col>
+                </el-row>
 
-              <el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
-                <el-col class="thresholds-cell" :span="4">
+                <el-row v-for="(item,index) in selection.pen.data.valueMapping" :key="index">
+                  <el-col class="thresholds-cell" :span="4">
                   <span v-if="selection.pen.data.valueMappingSort==='desc'">
                      {{index===0?selection.pen.data.valueMapping.length-1:(item.level-1)}}
                   </span>
-                  <span v-else>
+                    <span v-else>
                     {{item.level}}
                   </span>
-                </el-col>
-                <el-col class="thresholds-cell" :span="4">
+                  </el-col>
+                  <el-col class="thresholds-cell" :span="4">
                    <span v-if="item.level!==0">
                     <div style="display: inline-block">
                       <nezhaColor :value-arr="[{name:'fill',value:item.color.fill,key:'bac'},{name:'line',value:item.color.line,key:'line'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChangeTable(item,val,key)}" :single="false" :color-val="item.color" :presetColors="predefineColors"/>
                     </div>
                   </span>
-                  <span v-else>base</span>
-                </el-col>
-                <el-col class="thresholds-cell" :span="6" style="display: flex">
-                  <el-input
-                    v-if="item.level!==0"
-                    v-model.number="item.value"
-                    @change="valueMappingValueChange(item)"
-                    size="small"
-                  >
-                    <template slot="prepend"> > </template>
-                  </el-input>
-                  <span v-else>base</span>
-                </el-col>
-                <el-col class="thresholds-cell" :span="8">
-                  <!--线-->
-                  <el-select
-                    v-model="item.animateType"
-                    size="small"
-                    v-if="selection.pen&&selection.pen.type&&item.level!==0">
-                    <el-option
-                      v-for="(item,index) in lineAnimateOptions"
-                      :value="item.id"
-                      :key="index"
-                      :label="item.name">
-                    </el-option>
-                  </el-select>
-                  <!--点-->
-                  <el-select
-                    v-model="item.animateType"
-                    size="small"
-                    v-if="selection.pen&&!selection.pen.type&&item.level!==0">
-                    <el-option
-                      v-for="(item,index) in nodeAnimateOptions"
-                      :value="item.id"
-                      :key="index"
-                      :label="item.name">
-                    </el-option>
-                  </el-select>
-                  <!--默认-->
-                  <span v-if="item.level===0">base</span>
-                </el-col>
-                <el-col class="thresholds-cell" :span="2" style="text-align: center">
-                  <i v-if="item.level!==0" @click="valueMappingDel(index, item)"
-                     class="nz-icon nz-icon-minus">
-                  </i>
-                </el-col>
-              </el-row>
+                    <span v-else>base</span>
+                  </el-col>
+                  <el-col class="thresholds-cell" :span="6" style="display: flex">
+                    <el-input
+                      v-if="item.level!==0"
+                      v-model.number="item.value"
+                      @change="valueMappingValueChange(item)"
+                      size="small"
+                    >
+                      <template slot="prepend"> > </template>
+                    </el-input>
+                    <span v-else>base</span>
+                  </el-col>
+                  <el-col class="thresholds-cell" :span="8">
+                    <!--线-->
+                    <el-select
+                      v-model="item.animateType"
+                      size="small"
+                      v-if="selection.pen&&selection.pen.type&&item.level!==0">
+                      <el-option
+                        v-for="(item,index) in lineAnimateOptions"
+                        :value="item.id"
+                        :key="index"
+                        :label="item.name">
+                      </el-option>
+                    </el-select>
+                    <!--点-->
+                    <el-select
+                      v-model="item.animateType"
+                      size="small"
+                      v-if="selection.pen&&!selection.pen.type&&item.level!==0">
+                      <el-option
+                        v-for="(item,index) in nodeAnimateOptions"
+                        :value="item.id"
+                        :key="index"
+                        :label="item.name">
+                      </el-option>
+                    </el-select>
+                    <!--默认-->
+                    <span v-if="item.level===0">base</span>
+                  </el-col>
+                  <el-col class="thresholds-cell" :span="2" style="text-align: center">
+                    <i v-if="item.level!==0" @click="valueMappingDel(index, item)"
+                       class="nz-icon nz-icon-minus">
+                    </i>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+            <div @click="valueMappingAdd()" style="text-align: center" class="value-mapping-add">
+              <i class="nz-icon nz-icon-plus"></i>
             </div>
-          </div>
-          <div @click="valueMappingAdd()" style="text-align: center" class="value-mapping-add">
-            <i class="nz-icon nz-icon-plus"></i>
           </div>
 
           <!--tooltip-->
@@ -180,7 +182,7 @@
             </el-form-item>
           </el-row>
 
-          <div class="tooltip-box">
+          <div class="tooltip-box" v-show="selection.pen.data.tooltipShow">
             <!--title-->
             <el-form-item :label="$t('project.topology.title')" class="full-form-item" prop="type">
               <el-input v-model="selection.pen.data.chartTitle" @change="changeTitle" class="input" size="small"></el-input>
diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js
index 6918097ac..4ea13a410 100644
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -247,6 +247,19 @@ export function myTextRect (node) {
   )
   node.fullTextRect = node.rect
 }
+export function myIconRect2 (node) {
+  node.iconRect = new Rect(node.rect.x + node.paddingLeft, node.rect.y + node.paddingTop, node.rect.width - (node.paddingLeft + node.paddingRight), node.rect.height - (node.paddingTop + node.paddingBottom))
+  node.fullIconRect = node.rect
+}
+export function myTextRect2 (node) {
+  node.textRect = new Rect(
+    node.rect.x + node.paddingLeft,
+    node.rect.y + node.rect.height - 20 - node.paddingBottom,
+    0,
+    0
+  )
+  node.fullTextRect = node.rect
+}
 /* 自定义图片组件 */
 
 /* 自定义立方体 */