diff --git a/src/assets/css/components/views/charts/panel.scss b/src/assets/css/components/views/charts/panel.scss
index 4261cd0f..4fda7602 100644
--- a/src/assets/css/components/views/charts/panel.scss
+++ b/src/assets/css/components/views/charts/panel.scss
@@ -208,6 +208,247 @@
             height: 100%;
             width: 100%;
           }
+          .cn-chart__single-value.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
+            .single-value__icon {
+              width: 38px;
+              height: 38px;
+
+              i {
+                font-size: 15px;
+              }
+            }
+            .single-value__content {
+              .content__data {
+                font-size: 14px;
+              }
+              .content__title {
+                font-size: 12px;
+              }
+            }
+          }
+          .cn-chart__single-value.cn-chart__single-value--icon-left {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+
+            .single-value-icon__box {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              flex: 0 0 40%;
+            }
+
+            .single-value__icon {
+              display: flex;
+              justify-content: center;
+              width: 72px;
+              height: 72px;
+              background-color: $--chart-single-value-icon-background-color;
+              border-radius: 50%;
+
+              i {
+                display: flex;
+                align-items: center;
+                font-size: 28px;
+                color: $--color-primary;
+              }
+            }
+
+            .single-value__content {
+              display: flex;
+              flex-direction: column;
+              max-width: 60%;
+              padding-right: 10px;
+
+              .content__data {
+                padding-bottom: 7%;
+                font-size: 24px;
+                color: #333333;
+                font-weight: bold;
+              }
+              .content__title {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                font-size: 16px;
+                color: #666666;
+              }
+              &.single-value__content--with-chart {
+                .content__title {
+                  border-bottom: 1px solid $--content-right-background-color;
+                }
+              }
+              .single-value__unit {
+                font-weight: normal;
+                padding-left: 10px;
+                color: #666;
+                font-size: 20px;
+              }
+            }
+          }
+          .cn-chart__single-value.cn-chart__single-value--icon-right {
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: space-around;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+
+            .single-value__icon {
+              background-color: $--chart-single-value-icon-background-color;
+              border-radius: 50%;
+              position: relative;
+              margin-right: 7.5%;
+              margin-bottom: 6%;
+              width: 56px;
+              height: 56px;
+
+              i {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%,-50%);
+                font-size: 24px;
+                color: $--color-primary;
+              }
+            }
+
+            .single-value__content {
+              display: flex;
+              height: 100%;
+              flex-direction: column;
+
+              .content__title {
+                display: flex;
+                align-items: center;
+                height: 50%;
+                font-size: 16px;
+                color: #666666;
+              }
+              .content__data {
+                display: flex;
+                padding-top: 5%;
+                height: 50%;
+                flex: auto;
+                font-size: 24px;
+                color: #333333;
+                font-weight: bold;
+              }
+            }
+          }
+          .cn-chart__single-value.cn-chart__single-value--icon-right--color {
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: space-around;
+            align-items: center;
+            height: 100%;
+            width: 100%;
+
+            .single-value__content {
+              display: flex;
+              height: 100%;
+              width: 100%;
+              flex-direction: row-reverse;
+              justify-content: space-between;
+              align-items: center;
+
+              .single-value-icon__box {
+                padding-right: 30px;
+                .single-value__icon {
+                  border-radius: 50%;
+                  position: relative;
+                  margin-right: 7.5%;
+                  margin-top: 30%;
+
+                  .cn-icon-svg {
+                    width: 50px;
+                    height: 50px;
+                    vertical-align: middle;
+                    fill: currentColor;
+                    overflow: hidden;
+                  }
+
+                  i {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%,-50%);
+                    font-size: 24px;
+                  }
+                }
+              }
+
+              .single-value__data{
+                display: flex;
+                height: 100%;
+                flex-direction: column;
+                padding-left: 20px;
+
+                .content__title {
+                  display: flex;
+                  align-items: end;
+                  height: 50%;
+                  font-size: 16px;
+                  color: #666666;
+                  padding-bottom: 5px;
+                }
+                .content__data {
+                  display: flex;
+                  padding-top: 5%;
+                  height: 50%;
+                  flex: auto;
+                  font-size: 24px;
+                  color: #333333;
+                  font-weight: bold;
+                }
+              }
+
+            }
+          }
+          .cn-chart__single-value.cn-chart__single-value--chart {
+            display: flex;
+            padding: 13px 20px;
+            height: 100%;
+            width: 100%;
+
+            .single-value__content {
+              display: flex;
+              height: 100%;
+              width: 100%;
+              flex-direction: column;
+
+              .content__title {
+                display: flex;
+                align-items: center;
+                height: 30%;
+                font-size: 16px;
+                color: #666666;
+              }
+              .content__data {
+                display: flex;
+                align-items: center;
+                height: 25%;
+                font-size: 24px;
+                color: #333333;
+                font-weight: bold;
+              }
+              .content__chart {
+                flex: auto
+              }
+            }
+          }
+
+          .chart-table-pagination.el-pagination {
+            padding: 12px 0 9px 0;
+            text-align: center;
+            height: 100%;
+            width: 100%;
+
+            .el-pagination__jump {
+              margin-left: 10px;
+            }
+          }
         }
         &>.cn-chart__whois>.cn-chart__body {
           overflow: auto;
diff --git a/src/views/charts/Chart2.vue b/src/views/charts/Chart2.vue
index 181aac11..6b55d412 100644
--- a/src/views/charts/Chart2.vue
+++ b/src/views/charts/Chart2.vue
@@ -18,6 +18,14 @@
           @showLoading="showLoading"
       ></chart-map>
 
+      <chart-single-value
+          v-else-if="isSingleValue"
+          :chart-info="chartInfo"
+          :chart-data="chartData"
+          :query-params="queryParams"
+          @showLoading="showLoading"
+      ></chart-single-value>
+
       <div v-else style="height: 100%; width: 100%; background-color: lightcyan;"></div>
 
     </template>
@@ -29,6 +37,7 @@ import Loading from '@/components/common/Loading'
 import ChartNoData from './charts/ChartNoData'
 import ChartTabs from './charts/ChartTabs'
 import ChartMap from './charts/ChartMap'
+import ChartSingleValue from './charts/ChartSingleValue'
 import {
   isEcharts,
   isSingleValue,
@@ -64,6 +73,7 @@ import _ from 'lodash'
 export default {
   name: 'chart',
   components: {
+    ChartSingleValue,
     Loading,
     ChartNoData,
     ChartTabs,
diff --git a/src/views/charts/charts/ChartSingleValue.vue b/src/views/charts/charts/ChartSingleValue.vue
new file mode 100644
index 00000000..58fc92ae
--- /dev/null
+++ b/src/views/charts/charts/ChartSingleValue.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="cn-chart__single-value chart-header-position" :class="singleValueClass(type)" :style="{backgroundColor:color}">
+    <div class="single-value-icon__box"  v-if="chartInfo.type != 54">
+      <div class="single-value__icon"><i :class="icon"></i></div>
+    </div>
+    <div class="single-value__content" v-if="chartInfo.type == 51">
+      <div class="content__data">
+        <span>{{handleSingleValue[0] || handleSingleValue[0] === 0 ? handleSingleValue[0] : '-'}}</span>
+        <span class="single-value__unit">{{handleSingleValue[1]}}</span>
+      </div>
+      <div class="content__title">
+        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
+      </div>
+    </div>
+    <div class="single-value__content single-value__content--with-chart" v-if="chartInfo.type == 52">
+      <div class="content__title">
+        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
+      </div>
+      <div class="content__data">
+        <span>{{handleSingleValue[0] || handleSingleValue[0] === 0 ? handleSingleValue[0] : '-'}}</span>
+        <span class="single-value__unit">{{handleSingleValue[1]}}</span>
+      </div>
+      <div class="content__chart">
+        <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
+      </div>
+    </div>
+    <div class="single-value__content" v-if="chartInfo.type == 53">
+      <div class="content__title">
+        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
+      </div>
+      <div class="content__data">
+        <span>{{handleSingleValue[0] || handleSingleValue[0] === 0 ? handleSingleValue[0] : '-'}}</span>
+        <span class="single-value__unit">{{handleSingleValue[1]}}</span>
+      </div>
+    </div>
+    <div class="single-value__content" v-if="chartInfo.type == 54"  >
+      <div class="single-value-icon__box"  >
+        <div class="single-value__icon">
+          <!-- 使用图标-->
+          <svg class="cn-icon-svg" aria-hidden="true">
+            <use :xlink:href="icon"></use>
+          </svg>
+        </div>
+      </div>
+      <div class="single-value__data">
+        <div class="content__title">
+          <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
+        </div>
+        <div class="content__data">
+          <span>{{handleSingleValue[0] || handleSingleValue[0] === 0 ? handleSingleValue[0] : '-'}}</span>
+          <span class="single-value__unit">{{handleSingleValue[1]}}</span>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import unitConvert from '@/utils/unit-convert'
+import {unitTypes} from "@/utils/constants";
+export default {
+  name: "chartSingleValue",
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    queryParams: Object
+  },
+  data () {
+    return {
+      icon: '',
+      color: '',
+      type: 0
+    }
+  },
+  watch: {
+    chartInfo: {
+      deep: true,
+      immediate: true,
+      handler (n) {
+        this.icon = n.params.icon
+        this.color = n.params.color
+        this.type = n.type
+      }
+    }
+  },
+  computed: {
+    handleSingleValue () {
+      const value = this.chartData ? this.chartData.value: ''
+      const unitType = this.chartInfo.params.unitType
+      const result = unitConvert(value, unitType)
+      switch (unitType) {
+        case unitTypes.percent: {
+          result[0] = result[0] < 0.01 ? '< 0.01' : result[0]
+          break
+        }
+        case unitTypes.time: {
+          result[0] = result[0] < 1 ? '< 1' : result[0]
+          break
+        }
+        default: break
+      }
+      return result
+    },
+    singleValueClass () {
+      return function (type) {
+        let c
+        switch (type) {
+          case 51: {
+            c = 'cn-chart__single-value--icon-left'
+            break
+          }
+          case 55:
+          case 52: {
+            c = 'cn-chart__single-value--chart'
+            break
+          }
+          case 53: {
+            c = 'cn-chart__single-value--icon-right'
+            break
+          }
+          case 54: {
+            c = 'cn-chart__single-value--icon-right--color'
+            break
+          }
+          default: break
+        }
+        return c
+      }
+    }
+  },
+  methods: {
+  },
+  mounted() {
+  }
+}
+</script>