diff --git a/src/views/BI/js/echarts1.js b/src/views/BI/js/echarts1.js
index e772bc1..e1aab14 100644
--- a/src/views/BI/js/echarts1.js
+++ b/src/views/BI/js/echarts1.js
@@ -107,21 +107,19 @@ function echarts1(id, legend, echartCount) {
           },
         },
         itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 1,
-                color: "rgba(109, 131, 180, 1)",
-                opacity: 0.6,
-              },
-              {
-                offset: 0,
-                color: "rgba(66, 91, 147, 1)",
-                opacity: 1,
-              },
-            ]),
-            barBorderRadius: [0, 0, 0, 0],
-          },
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 1,
+              color: "rgba(109, 131, 180, 1)",
+              opacity: 0.6,
+            },
+            {
+              offset: 0,
+              color: "rgba(66, 91, 147, 1)",
+              opacity: 1,
+            },
+          ]),
+          barBorderRadius: [0, 0, 0, 0],
         },
         data: echartCount,
       },
@@ -138,21 +136,19 @@ function echarts1(id, legend, echartCount) {
           },
         },
         itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 1,
-                color: "rgba(109, 131, 180, 1)",
-                opacity: 0.6,
-              },
-              {
-                offset: 0,
-                color: "rgba(99, 126, 188, 1)",
-                opacity: 1,
-              },
-            ]),
-            barBorderRadius: [0, 0, 0, 0],
-          },
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 1,
+              color: "rgba(109, 131, 180, 1)",
+              opacity: 0.6,
+            },
+            {
+              offset: 0,
+              color: "rgba(99, 126, 188, 1)",
+              opacity: 1,
+            },
+          ]),
+          barBorderRadius: [0, 0, 0, 0],
         },
         data: echartCount,
         barGap: 0,
@@ -165,9 +161,7 @@ function echarts1(id, legend, echartCount) {
         },
         type: "pictorialBar",
         itemStyle: {
-          normal: {
-            color: "rgba(183, 195, 226, 1)",
-          },
+          color: "rgba(183, 195, 226, 1)",
         },
         symbol: "diamond",
         symbolRotate: 0,
diff --git a/src/views/BI/js/echarts4.js b/src/views/BI/js/echarts4.js
index 07b6867..f5aa0ea 100644
--- a/src/views/BI/js/echarts4.js
+++ b/src/views/BI/js/echarts4.js
@@ -130,88 +130,63 @@ function echarts4(id) {
           fontSize: 12,
         },
         itemStyle: {
-          // normal: {
-          //   color: {
-          //     type: 'linear',
-          //     x: 0,
-          //     y: 0,
-          //     x2: 0,
-          //     y2: 1,
-          //     colorStops: [
-          //       {
-          //         offset: 0,
-          //         color: '#3b89f4',
-          //       },
-          //       {
-          //         offset: 1,
-          //         color: '#cce7fc',
-          //       },
-          //     ],
-          //     global: false, //  缺省为  false
-          //   },
-          // },
-          // emphasis: {
-          //   opacity: 1,
-          // },
-          normal: {
-            color: (params) => {
-              const colorList = [
-                {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "#297ff2",
-                    },
-                    {
-                      offset: 1,
-                      color: "#cce7fc",
-                    },
-                  ],
-                },
-                {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "#3bfafe",
-                    },
-                    {
-                      offset: 1,
-                      color: "#aaf4fe",
-                    },
-                  ],
-                },
-                {
-                  type: "linear",
-                  x: 0,
-                  y: 0,
-                  x2: 0,
-                  y2: 1,
-                  colorStops: [
-                    {
-                      offset: 0,
-                      color: "#e08440",
-                    },
-                    {
-                      offset: 1,
-                      color: "#decabd",
-                    },
-                  ],
-                },
-              ];
-              return colorList[params.dataIndex];
-            },
-            opacity: 0.7,
+          color: (params) => {
+            const colorList = [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#297ff2",
+                  },
+                  {
+                    offset: 1,
+                    color: "#cce7fc",
+                  },
+                ],
+              },
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#3bfafe",
+                  },
+                  {
+                    offset: 1,
+                    color: "#aaf4fe",
+                  },
+                ],
+              },
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#e08440",
+                  },
+                  {
+                    offset: 1,
+                    color: "#decabd",
+                  },
+                ],
+              },
+            ];
+            return colorList[params.dataIndex];
           },
+          opacity: 0.7,
           // 鼠标移入柱子上 透明度变为 1
           emphasis: {
             opacity: 1,
diff --git a/src/views/aggregation_management/gathering_overview/index.vue b/src/views/aggregation_management/gathering_overview/index.vue
index 693862c..4f943ea 100644
--- a/src/views/aggregation_management/gathering_overview/index.vue
+++ b/src/views/aggregation_management/gathering_overview/index.vue
@@ -248,11 +248,9 @@ const fnInitEcharts = (data) => {
         type: "line",
         data: data.one,
         itemStyle: {
-          normal: {
+          color: "red",
+          lineStyle: {
             color: "red",
-            lineStyle: {
-              color: "red",
-            },
           },
         },
       },
@@ -261,11 +259,9 @@ const fnInitEcharts = (data) => {
         type: "line",
         data: data.two,
         itemStyle: {
-          normal: {
+          color: "orange",
+          lineStyle: {
             color: "orange",
-            lineStyle: {
-              color: "orange",
-            },
           },
         },
       },
@@ -274,11 +270,9 @@ const fnInitEcharts = (data) => {
         type: "line",
         data: data.three,
         itemStyle: {
-          normal: {
+          color: "#ffeb3b",
+          lineStyle: {
             color: "#ffeb3b",
-            lineStyle: {
-              color: "#ffeb3b",
-            },
           },
         },
       },
@@ -287,11 +281,9 @@ const fnInitEcharts = (data) => {
         type: "line",
         data: data.zong,
         itemStyle: {
-          normal: {
+          color: "#0385f4",
+          lineStyle: {
             color: "#0385f4",
-            lineStyle: {
-              color: "#0385f4",
-            },
           },
         },
       },
diff --git a/src/views/index/components/checklist_check.vue b/src/views/index/components/checklist_check.vue
index 0807f54..e02390c 100644
--- a/src/views/index/components/checklist_check.vue
+++ b/src/views/index/components/checklist_check.vue
@@ -92,18 +92,16 @@ const fnInitEcharts = (data) => {
         },
         barWidth: 15,
         itemStyle: {
-          normal: {
-            color: function (params) {
-              const colorList = [
-                "#ee6666",
-                "#73c0de",
-                "#3ca272",
-                "#fc8452",
-                "#9a60b4",
-                "#5470c6",
-              ];
-              return colorList[params.dataIndex];
-            },
+          color: function (params) {
+            const colorList = [
+              "#ee6666",
+              "#73c0de",
+              "#3ca272",
+              "#fc8452",
+              "#9a60b4",
+              "#5470c6",
+            ];
+            return colorList[params.dataIndex];
           },
         },
       },
diff --git a/src/views/index/components/list_check_type.vue b/src/views/index/components/list_check_type.vue
index c686231..31afbc0 100644
--- a/src/views/index/components/list_check_type.vue
+++ b/src/views/index/components/list_check_type.vue
@@ -21,9 +21,7 @@ const fnInitEcharts = (data) => {
       text: "清单检查类型统计",
       textStyle: {
         fontSize: "14",
-        normal: {
-          fontWeight: "700",
-        },
+        fontWeight: "700",
         color: "#fff",
       },
     },
@@ -79,11 +77,9 @@ const fnInitEcharts = (data) => {
         type: "line",
         data: data.xcqd,
         itemStyle: {
-          normal: {
+          color: "#3ca272",
+          lineStyle: {
             color: "#3ca272",
-            lineStyle: {
-              color: "#3ca272",
-            },
           },
         },
       },
@@ -92,11 +88,9 @@ const fnInitEcharts = (data) => {
         type: "line",
         data: data.jcqd,
         itemStyle: {
-          normal: {
+          color: "#5470c6",
+          lineStyle: {
             color: "#5470c6",
-            lineStyle: {
-              color: "#5470c6",
-            },
           },
         },
       },
@@ -105,11 +99,9 @@ const fnInitEcharts = (data) => {
         type: "line",
         data: data.zhqd,
         itemStyle: {
-          normal: {
+          color: "#ee6666",
+          lineStyle: {
             color: "#ee6666",
-            lineStyle: {
-              color: "#ee6666",
-            },
           },
         },
       },
diff --git a/src/views/large_screen_data_display/components/full_staff_training.vue b/src/views/large_screen_data_display/components/full_staff_training.vue
index 65f4d2b..d0f8d08 100644
--- a/src/views/large_screen_data_display/components/full_staff_training.vue
+++ b/src/views/large_screen_data_display/components/full_staff_training.vue
@@ -85,25 +85,23 @@ const fnInitEcharts = (data) => {
         data: yData,
         barWidth: "10px",
         itemStyle: {
-          normal: {
-            color: new echarts.graphic.LinearGradient(
-              0,
-              0,
-              0,
-              1,
-              [
-                {
-                  offset: 0,
-                  color: "#4abd91", // 0% 处的颜色
-                },
-                {
-                  offset: 1,
-                  color: "#28b2d5", // 100% 处的颜色
-                },
-              ],
-              false
-            ),
-          },
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              {
+                offset: 0,
+                color: "#4abd91", // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#28b2d5", // 100% 处的颜色
+              },
+            ],
+            false
+          ),
         },
       },
     ],
diff --git a/src/views/large_screen_data_display/components/hidden_danger_situation.vue b/src/views/large_screen_data_display/components/hidden_danger_situation.vue
index dd84963..03f2c62 100644
--- a/src/views/large_screen_data_display/components/hidden_danger_situation.vue
+++ b/src/views/large_screen_data_display/components/hidden_danger_situation.vue
@@ -33,7 +33,7 @@ const fnInitEcharts = (data) => {
     },
     legend: {
       icon: "rect",
-      top: "5%",
+      top: "8%",
       right: "5%",
       itemWidth: 12,
       itemHeight: 12,
@@ -103,10 +103,8 @@ const fnInitEcharts = (data) => {
         data: data.all,
         smooth: true,
         itemStyle: {
-          normal: {
-            color: colorList[0],
-            borderColor: colorList[0],
-          },
+          color: colorList[0],
+          borderColor: colorList[0],
         },
       },
       {
@@ -115,10 +113,8 @@ const fnInitEcharts = (data) => {
         data: data.wzg,
         smooth: true,
         itemStyle: {
-          normal: {
-            color: colorList[1],
-            borderColor: colorList[1],
-          },
+          color: colorList[1],
+          borderColor: colorList[1],
         },
       },
       {
@@ -127,10 +123,8 @@ const fnInitEcharts = (data) => {
         data: data.yzg,
         smooth: true,
         itemStyle: {
-          normal: {
-            color: colorList[2],
-            borderColor: colorList[2],
-          },
+          color: colorList[2],
+          borderColor: colorList[2],
         },
       },
       {
@@ -139,10 +133,8 @@ const fnInitEcharts = (data) => {
         data: data.yys,
         smooth: true,
         itemStyle: {
-          normal: {
-            color: colorList[3],
-            borderColor: colorList[3],
-          },
+          color: colorList[3],
+          borderColor: colorList[3],
         },
       },
     ],
diff --git a/src/views/large_screen_data_display/components/risk_management.vue b/src/views/large_screen_data_display/components/risk_management.vue
index 402099d..a6d0f01 100644
--- a/src/views/large_screen_data_display/components/risk_management.vue
+++ b/src/views/large_screen_data_display/components/risk_management.vue
@@ -3,20 +3,21 @@
     <div class="title">风险管控统计分析</div>
     <div class="round-box">
       <div class="content">
-        <h1>{{ info.unitcount }}</h1>
-        <span>风险点（单元）</span>
+        <count-to :end-val="info.unitcount" class="value" />
+        <span class="label">风险点（单元）</span>
       </div>
       <div class="round-jt" />
       <div class="content">
-        <h1>{{ info.idcount }}</h1>
-        <span>辨识部位</span>
+        <count-to :end-val="info.idcount" class="value" />
+        <span class="label">辨识部位</span>
       </div>
       <div class="round-jt" />
       <div class="content">
-        <h1>
-          {{ info.acount + info.bcount + info.ccount + info.dcount }}
-        </h1>
-        <span>存在风险</span>
+        <count-to
+          :end-val="info.acount + info.bcount + info.ccount + info.dcount"
+          class="value"
+        />
+        <span class="label">存在风险</span>
       </div>
     </div>
   </div>
@@ -25,6 +26,7 @@
 <script setup>
 import { ref } from "vue";
 import { getRiskManagement } from "@/request/large_screen_data_display.js";
+import CountTo from "vue-countup-v3";
 
 const info = ref({
   unitcount: 0,
@@ -89,13 +91,16 @@ fnGetData();
       text-align: center;
       position: relative;
 
-      h1 {
-        padding-top: 25px;
+      .value {
         color: #70c5ff;
         font-size: 20px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
       }
 
-      span {
+      .label {
         display: inline-block;
         width: 100%;
         color: #aaddff;
diff --git a/src/views/large_screen_data_display/components/situation.vue b/src/views/large_screen_data_display/components/situation.vue
index 203964b..d9f9fad 100644
--- a/src/views/large_screen_data_display/components/situation.vue
+++ b/src/views/large_screen_data_display/components/situation.vue
@@ -8,8 +8,8 @@
           <img src="/src/assets/images/bi/faxianico.png" alt="" />
         </div>
         <div>
-          <span>{{ info.all }}</span>
-          <span>发现隐患数</span>
+          <count-to :end-val="info.all" />
+          <div>发现隐患数</div>
         </div>
       </div>
       <div class="item">
@@ -17,8 +17,8 @@
           <img src="/src/assets/images/bi/noonico.png" alt="" />
         </div>
         <div>
-          <span>{{ info.wzg }}</span>
-          <span>未完成整改隐患</span>
+          <count-to :end-val="info.wzg" />
+          <div>未完成整改隐患</div>
         </div>
       </div>
       <div class="item">
@@ -26,12 +26,13 @@
           <img src="/src/assets/images/bi/yinhuan.png" alt="" />
         </div>
         <div>
-          <span>
-            {{
+          <count-to
+            :end-val="
               info.all !== 0 ? ((info.wzg / info.all) * 100).toFixed(2) : 0.0
-            }}%
-          </span>
-          <span>未整改率</span>
+            "
+            :options="{ suffix: '%' }"
+          />
+          <div>未整改率</div>
         </div>
       </div>
     </div>
@@ -41,6 +42,7 @@
 <script setup>
 import { ref } from "vue";
 import { getHiddenCount } from "@/request/large_screen_data_display.js";
+import CountTo from "vue-countup-v3";
 
 const info = ref({
   all: 0,
@@ -108,16 +110,12 @@ fnGetData();
         height: 34px;
       }
 
-      div:nth-child(2) {
+      > div:nth-child(2) {
         margin-left: 10px;
 
-        span {
-          display: block;
-
-          &:first-child {
-            color: #f8b62d;
-            font-size: 20px;
-          }
+        .countup-wrap {
+          color: #f8b62d;
+          font-size: 20px;
         }
       }
     }
diff --git a/src/views/large_screen_data_display/components/troubleshooting_type.vue b/src/views/large_screen_data_display/components/troubleshooting_type.vue
index 5f3f206..7183e24 100644
--- a/src/views/large_screen_data_display/components/troubleshooting_type.vue
+++ b/src/views/large_screen_data_display/components/troubleshooting_type.vue
@@ -4,16 +4,25 @@
     <div class="p-20">
       <div class="top">
         <div>
-          <div>现场类清单数</div>
-          <div>{{ info["现场清单"] || 0 }}个</div>
+          <div class="top_title">现场类清单数</div>
+          <count-to
+            :end-val="info['现场清单'] || 0"
+            :options="{ suffix: '个' }"
+          />
         </div>
         <div>
-          <div>基础类清单数</div>
-          <div>{{ info["基础类清单"] || 0 }}个</div>
+          <div class="top_title">基础类清单数</div>
+          <count-to
+            :end-val="info['基础类清单'] || 0"
+            :options="{ suffix: '个' }"
+          />
         </div>
         <div>
-          <div>综合类清单数</div>
-          <div>{{ info["综合类清单"] || 0 }}个</div>
+          <div class="top_title">综合类清单数</div>
+          <count-to
+            :end-val="info['综合类清单'] || 0"
+            :options="{ suffix: '个' }"
+          />
         </div>
       </div>
       <div class="bottom">
@@ -46,6 +55,7 @@ import {
 import { sumBy } from "lodash-es";
 import { arrayObjectDeduplication } from "@/assets/js/utils.js";
 import * as echarts from "echarts";
+import CountTo from "vue-countup-v3";
 
 const info = ref({});
 
@@ -98,10 +108,8 @@ const fnInitEcharts = (count, total, color, el) => {
         type: "bar",
         zlevel: 1,
         itemStyle: {
-          normal: {
-            barBorderRadius: 0,
-            color,
-          },
+          barBorderRadius: 0,
+          color,
         },
         label: {
           show: true,
@@ -117,10 +125,8 @@ const fnInitEcharts = (count, total, color, el) => {
         barGap: "-100%",
         data: [total],
         itemStyle: {
-          normal: {
-            color: "#101f48",
-            barBorderRadius: 0,
-          },
+          color: "#101f48",
+          barBorderRadius: 0,
         },
       },
     ],
@@ -156,11 +162,11 @@ const fnInitEcharts = (count, total, color, el) => {
       border: 4px solid #0d2565;
       padding: 5px 20px 5px 5px;
 
-      div:nth-child(1) {
+      .top_title {
         color: #fff;
       }
 
-      div:nth-child(2) {
+      .countup-wrap {
         color: #04cbfd;
         text-align: right;
         padding-top: 5px;
diff --git a/src/views/major_hazard_sources/real_time_data_monitoring/view.vue b/src/views/major_hazard_sources/real_time_data_monitoring/view.vue
index e941dec..0b9913b 100644
--- a/src/views/major_hazard_sources/real_time_data_monitoring/view.vue
+++ b/src/views/major_hazard_sources/real_time_data_monitoring/view.vue
@@ -503,12 +503,10 @@ const fnInitEcharts = (echartsData, example, id) => {
       {
         name: echartsData.legend[0],
         itemStyle: {
-          normal: {
+          color: echartsData.color[0],
+          lineStyle: {
             color: echartsData.color[0],
-            lineStyle: {
-              color: echartsData.color[0],
-              width: 2,
-            },
+            width: 2,
           },
         },
         smooth: true,