diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
index 7d527476..9fc6cb10 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/changesIndicators/assets/charts3.js
@@ -19,19 +19,8 @@ let data2 = [120, 340, 750, 600, 400, 700, 900, 200, 540, 320, 370, 500];
 let data3 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
 let options = {
   tooltip: {
-    show: false,
-    trigger: "axis",
-    axisPointer: {
-      // 坐标轴指示器，坐标轴触发有效
-      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-    },
-    textStyle: {
-      color: "#fff",
-      fontSize: 14,
-    },
-    // backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
-    // borderColor: "rgba(3, 31, 71, .0)",
-    formatter: "健康监测<br>{b1}：{c1}人",
+    show: true,
+    trigger: "item",
   },
   grid: {
     left: 0,
@@ -183,7 +172,7 @@ let options = {
       data: data2,
     },
     {
-      name: "",
+      name: null,
       type: "scatter",
       emphasis: {
         scale: false,
@@ -204,6 +193,9 @@ let options = {
       left: "-100%",
       data: data2,
       animationDelay: 100,
+      tooltip: {
+        show: false,
+      },
     },
     // 下半截柱状图linear-gradient(180deg, #61D8FF 0%, #003B4E 100%); linear-gradient(180deg, #06D7B1 0%, #003B4E 100%)
     {
@@ -288,6 +280,9 @@ let options = {
       left: 10,
       data: data1,
       animationDelay: 500,
+      tooltip: {
+        show: false,
+      },
     },
     {
       name: "拥挤度",
@@ -369,6 +364,9 @@ let options = {
       left: "-100%",
       data: data2,
       animationDelay: 100,
+      tooltip: {
+        show: false,
+      },
     },
   ],
 };
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
index f0de8f5a..e4ed44c1 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/composeFeatures/assets/charts.js
@@ -3,35 +3,19 @@ var options = {
   color: ["#07A3FB"],
   grid: {
     left: "0%",
-    right: "0%",
+    right: "8%",
     bottom: "0%",
     top: "10%",
     containLabel: true,
   },
-  legend: {
-    show: false,
-    icon: "rect",
-    top: "0%",
-    right: "5%",
-    data: ["实时数据"],
-    itemWidth: 18,
-    itemHeight: 5,
-    itemGap: 30,
-    itemStyle: {
-      color: "#FFD15C",
-    },
-    textStyle: {
-      fontSize: 10,
-      color: "#fff",
-      padding: [0, 0, 0, 10],
-    },
+  tooltip: {
+    show: true,
   },
   xAxis: {
     type: "category",
     axisLine: {
       lineStyle: {
         color: "#07A3FB",
-        fontSize: 10,
       },
     },
     axisLabel: {
@@ -59,9 +43,6 @@ var options = {
   },
   yAxis: {
     type: "value",
-    min: 0,
-    max: 800,
-    minInterval: 100,
     nameTextStyle: {
       fontSize: 10,
       color: "#fff",
@@ -73,13 +54,6 @@ var options = {
         // type: 'dashed', // dotted 虚线
       },
     },
-    splitArea: { show: false },
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
     axisLabel: {
       fontSize: 10,
       fontFamily: "Bebas",
@@ -93,7 +67,7 @@ var options = {
       showSymbol: false,
       smooth: true, // 是否曲线
       name: "实时数据", // 图例对应类别
-      data: [112, 122, 723, 623, 530, 612, 626, 728, 531, 423, 625, 423, 423], // 纵坐标数据
+      data: [112, 122, 323, 223, 230, 112, 326, 228, 331, 423, 225, 123], // 纵坐标数据
       lineStyle: {
         color: "#07A3FB",
       },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
index fad0f22a..e0eada52 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/crowding/assets/charts.js
@@ -8,30 +8,14 @@ var options = {
     top: "10%",
     containLabel: true,
   },
-  legend: {
-    show: false,
-    icon: "rect",
-    top: "0%",
-    right: "5%",
-    data: ["实时数据"],
-    itemWidth: 18,
-    itemHeight: 5,
-    itemGap: 30,
-    itemStyle: {
-      color: "#FFD15C",
-    },
-    textStyle: {
-      fontSize: 10,
-      color: "#fff",
-      padding: [0, 0, 0, 10],
-    },
+  tooltip: {
+    show: true,
   },
   xAxis: {
     type: "category",
     axisLine: {
       lineStyle: {
-        color: "#fff",
-        fontSize: 10,
+        color: "#E29E37",
       },
     },
     axisLabel: {
@@ -59,9 +43,6 @@ var options = {
   },
   yAxis: {
     type: "value",
-    min: 0,
-    max: 800,
-    minInterval: 100,
     nameTextStyle: {
       fontSize: 10,
       color: "#fff",
@@ -73,13 +54,6 @@ var options = {
         // type: 'dashed', // dotted 虚线
       },
     },
-    splitArea: { show: false },
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
     axisLabel: {
       fontSize: 10,
       fontFamily: "Bebas",
@@ -93,7 +67,7 @@ var options = {
       showSymbol: false,
       smooth: true, // 是否曲线
       name: "实时数据", // 图例对应类别
-      data: [112, 122, 723, 623, 530, 612, 626, 728, 531, 423, 625, 423, 423], // 纵坐标数据
+      data: [112, 122, 323, 223, 230, 112, 326, 228, 331, 423, 225, 123], // 纵坐标数据
       lineStyle: {
         color: "#E29E37",
       },
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js
index d5f824f3..89e0c3ab 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/saturationMax/assets/charts.js
@@ -1,6 +1,9 @@
 import * as echarts from "echarts";
 var options = {
   color: ["#32BB8A", "#01B3E4"],
+  tooltip: {
+    show: true,
+  },
   grid: {
     left: "0%",
     right: "0%",
@@ -8,30 +11,12 @@ var options = {
     top: "10%",
     containLabel: true,
   },
-  legend: {
-    show: false,
-    icon: "rect",
-    top: "0%",
-    right: "5%",
-    data: ["实时数据"],
-    itemWidth: 18,
-    itemHeight: 5,
-    itemGap: 30,
-    itemStyle: {
-      color: "#FFD15C",
-    },
-    textStyle: {
-      fontSize: 10,
-      color: "#fff",
-      padding: [0, 0, 0, 10],
-    },
-  },
+
   xAxis: {
     type: "category",
     axisLine: {
       lineStyle: {
-        color: "#fff",
-        fontSize: 10,
+        color: "#32BB8A",
       },
     },
     axisLabel: {
@@ -59,27 +44,12 @@ var options = {
   },
   yAxis: {
     type: "value",
-    min: 0,
-    max: 800,
-    minInterval: 100,
-    nameTextStyle: {
-      fontSize: 10,
-      color: "#fff",
-      align: "center",
-    },
     splitLine: {
       lineStyle: {
         color: "#32BB8A",
         // type: 'dashed', // dotted 虚线
       },
     },
-    splitArea: { show: false },
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
     axisLabel: {
       fontSize: 10,
       fontFamily: "Bebas",
@@ -92,8 +62,8 @@ var options = {
       // symbol: "none",
       showSymbol: false,
       smooth: true, // 是否曲线
-      name: "实时数据", // 图例对应类别
-      data: [112, 122, 723, 623, 530, 612, 626, 728, 531, 423, 625, 423, 423], // 纵坐标数据
+      name: "", // 图例对应类别
+      data: [112, 122, 323, 223, 230, 112, 326, 228, 331, 423, 225, 123], // 纵坐标数据
       lineStyle: {
         color: "#32BB8A",
       },
@@ -128,6 +98,9 @@ var options = {
           ],
         },
       },
+      tooltip: {
+        show: true,
+      },
     },
   ],
 };
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
index 0169b1ce..a1afc8a7 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts.js
@@ -59,6 +59,9 @@ nameList.map((item, index) => {
 });
 
 var options = {
+  tooltip: {
+    show: true,
+  },
   legend: {
     // orient: 'vertical',
     icon: "circle",
@@ -78,7 +81,6 @@ var options = {
     containLabel: true,
   },
   xAxis: {
-    type: "category",
     data: nameList,
     axisTick: {
       show: false, //隐藏X轴刻度
@@ -99,9 +101,6 @@ var options = {
     {
       type: "value",
       name: "",
-      max: 1200,
-      min: 0,
-      splitNumber: 5,
       nameTextStyle: {
         color: "#fff",
         fontSize: 10,
@@ -117,12 +116,6 @@ var options = {
         //    return yList[index]
         // }
       },
-      axisLine: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
       splitLine: {
         lineStyle: {
           color: "rgba(49, 217, 255, 0.5)",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
index e750558b..4e798482 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts2.js
@@ -28,7 +28,7 @@ let data2 = [[60, 60, 65, 60, 70, 40, 80, 63]];
 let options = {
   tooltip: {
     show: true,
-    trigger: "item",
+    // trigger: "item",
     formatter: (data) => {
       // console.log(data.seriesIndex);
       var tip = '<span class="echarts-tip-h5">' + data.seriesName + "</span>";
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js
index 5d621958..508b636c 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/assets/charts3.js
@@ -17,19 +17,19 @@ let xData = [
 let data1 = [200, 530, 920, 400, 600, 700, 300, 800, 900, 120, 570, 800];
 let options = {
   tooltip: {
-    show: false,
-    trigger: "axis",
-    axisPointer: {
-      // 坐标轴指示器，坐标轴触发有效
-      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
-    },
-    textStyle: {
-      color: "#fff",
-      fontSize: 14,
-    },
-    backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
-    borderColor: "rgba(3, 31, 71, .1)",
-    formatter: "健康监测<br>{b1}：{c1}人",
+    show: true,
+    // trigger: "axis",
+    // axisPointer: {
+    //   // 坐标轴指示器，坐标轴触发有效
+    //   type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+    // },
+    // textStyle: {
+    //   color: "#fff",
+    //   fontSize: 14,
+    // },
+    // backgroundColor: "rgba(3, 31, 71, .0)", //设置背景颜色
+    // borderColor: "rgba(3, 31, 71, .1)",
+    // formatter: "健康监测<br>{b1}：{c1}人",
   },
   grid: {
     left: "2%",
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
index 5f5c64f8..7f03ac63 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficSituation/components/IndicatorAnalysis/components/trafficIndicators/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class='congestion'>
+  <div class="congestion">
     <WgtTitle :title="'交通指标分析'"></WgtTitle>
     <div class="board">
       <!-- <div class="searchPanel">
@@ -33,32 +33,88 @@
           <el-button type="primary" size="mini" class="btnSearch"  icon="el-icon-search">查询</el-button>
           <el-button class="btnReset"  size="mini" icon="el-icon-refresh-left" >重置</el-button>
         </div> -->
-      <ProgressBar :dataList="dataList" class="keep-ratio progressbar" :selectIndex="7" />
+      <ProgressBar
+        :dataList="dataList"
+        class="keep-ratio progressbar"
+        :selectIndex="7"
+      />
       <div class="body">
         <div class="body-l">
           <div class="searchPanel_1">
             <!-- <el-from ref="form"> -->
-            <RadioGroup :options="[{ key: '1', label: '菏泽' }, { key: '3', label: '济南' }]" v-model="direction"
-              type="button" />
-            <el-select v-model="type" size="mini" class="selectRoad" placeholder="请选择">
-              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
+            <RadioGroup
+              :options="[
+                { key: '1', label: '菏泽' },
+                { key: '3', label: '济南' },
+              ]"
+              v-model="direction"
+              type="button"
+            />
+            <el-select
+              v-model="type"
+              size="mini"
+              class="selectRoad"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in typeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
               </el-option>
             </el-select>
-            <el-select v-model="quarter" size="medium" v-if="type == '3'" class="selectRoad-medium" placeholder="请选择">
-              <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value">
+            <el-select
+              v-model="quarter"
+              size="medium"
+              v-if="type == '3'"
+              class="selectRoad-medium"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in quarterOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
               </el-option>
             </el-select>
             <!-- <el-quarter-picker size="mini" class="selectRoad" style="width:180px;" v-if="type == '3'" v-model="dateTime"
             aria-placeholder="请选季度" /> -->
-            <el-date-picker size="mini" v-if="type != '3'" class="selectRoad" v-model="dateTime" style="width:140px;"
-              :type="type == 1 ? 'date' : type == 2 ? 'month' : type == 4 ? 'year' : ''" placeholder="请选择" />
-
-
-            <el-button type="primary" size="mini" class="btnSearch" @click="searchQuery"
-              icon="el-icon-search">查询</el-button>
-            <el-button class="btnReset" size="mini" icon="el-icon-refresh-left" @click="handleClear">重置</el-button>
+            <el-date-picker
+              size="mini"
+              v-if="type != '3'"
+              class="selectRoad"
+              v-model="dateTime"
+              style="width: 140px"
+              :type="
+                type == 1
+                  ? 'date'
+                  : type == 2
+                  ? 'month'
+                  : type == 4
+                  ? 'year'
+                  : ''
+              "
+              placeholder="请选择"
+            />
+
+            <el-button
+              type="primary"
+              size="mini"
+              class="btnSearch"
+              @click="searchQuery"
+              icon="el-icon-search"
+              >查询</el-button
+            >
+            <el-button
+              class="btnReset"
+              size="mini"
+              icon="el-icon-refresh-left"
+              @click="handleClear"
+              >重置</el-button
+            >
             <!-- </el-from> -->
-
           </div>
           <!-- <div class="searchPanel_1">
             <el-select v-model="area" size="mini" class="selectRoad" placeholder="请选择">
@@ -90,45 +146,55 @@
           </div>
         </div>
       </div>
-
     </div>
-
   </div>
 </template>
-  
+
 <script>
-import RadioGroup from '@screen/components/FormConfig/components/RadioGroup/index.vue';
-import WgtTitle from '../../../../../widgets/title'
-import ProgressBar from './progressBar.vue';
+import RadioGroup from "@screen/components/FormConfig/components/RadioGroup/index.vue";
+import WgtTitle from "../../../../../widgets/title";
+import ProgressBar from "./progressBar.vue";
 import * as echarts from "echarts";
 import chart1 from "./assets/charts";
 import chart2 from "./assets/charts2";
 import chart3 from "./assets/charts3";
-import ElQuarterPicker from './ElQuarterPicker'
+import ElQuarterPicker from "./ElQuarterPicker";
 
 const drawRoundRect = (ctx, x, y, width, height, radius, gr) => {
-  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度 
+  // ctx, 矩形距离x坐标位置, 矩形距离y坐标的位置, 矩形的宽, 矩形的长,圆角角度
   ctx.beginPath();
   ctx.fillStyle = gr;
-  ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
+  ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);
   ctx.lineTo(width - radius + x, y);
-  ctx.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
+  ctx.arc(
+    width - radius + x,
+    radius + y,
+    radius,
+    (Math.PI * 3) / 2,
+    Math.PI * 2
+  );
   ctx.lineTo(width + x, height + y - radius);
-  ctx.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
+  ctx.arc(
+    width - radius + x,
+    height - radius + y,
+    radius,
+    0,
+    (Math.PI * 1) / 2
+  );
   ctx.lineTo(radius + x, height + y);
-  ctx.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
+  ctx.arc(radius + x, height - radius + y, radius, (Math.PI * 1) / 2, Math.PI);
   ctx.closePath();
   //ctx.stroke();
-  ctx.fill()
-}
+  ctx.fill();
+};
 
 export default {
-  name: 'EventQuery',
+  name: "EventQuery",
   components: {
     RadioGroup,
     WgtTitle,
     ProgressBar,
-    ElQuarterPicker
+    ElQuarterPicker,
   },
   data() {
     return {
@@ -136,182 +202,210 @@ export default {
       type: "1",
       typeOptions: [
         {
-          label: '年',
-          value: '4'
+          label: "年",
+          value: "4",
         },
         {
-          label: '月',
-          value: '2'
+          label: "月",
+          value: "2",
         },
         {
-          label: '日',
-          value: '1'
+          label: "日",
+          value: "1",
         },
         {
-          label: '季',
-          value: '3'
-        }
+          label: "季",
+          value: "3",
+        },
       ],
-      quarter: '1',
+      quarter: "1",
       quarterOptions: [
         {
           label: "第一季度",
-          value: "1"
+          value: "1",
         },
         {
           label: "第二季度",
-          value: "2"
+          value: "2",
         },
         {
           label: "第三季度",
-          value: "3"
+          value: "3",
         },
         {
           label: "第四季度",
-          value: "4"
-        }
+          value: "4",
+        },
       ],
       dateTime: "2024-01-01 00:00:00",
       dataList: [
         {
-          title: "殷家林枢纽"
+          title: "殷家林枢纽",
         },
         {
-          title: "大学城立交"
+          title: "大学城立交",
         },
         {
-          title: "长清立交"
+          title: "长清立交",
         },
         {
-          title: "松竹枢纽"
+          title: "松竹枢纽",
         },
         {
-          title: "孝里立交"
+          title: "孝里立交",
         },
         {
-          title: "平阴立交"
+          title: "平阴立交",
         },
         {
-          title: "孔村枢纽"
+          title: "孔村枢纽",
         },
         {
-          title: "平阴南立交"
+          title: "平阴南立交",
         },
         {
-          title: "魏雪枢纽"
+          title: "魏雪枢纽",
         },
         {
-          title: "东平立交"
+          title: "东平立交",
         },
         {
-          title: "东平湖枢纽"
+          title: "东平湖枢纽",
         },
         {
-          title: "韩岗立交"
+          title: "韩岗立交",
         },
         {
-          title: "梁山立交"
+          title: "梁山立交",
         },
         {
-          title: "鄄郓枢纽"
+          title: "鄄郓枢纽",
         },
         {
-          title: "嘉祥西立交"
+          title: "嘉祥西立交",
         },
         {
-          title: "王官屯枢纽"
-        }
+          title: "王官屯枢纽",
+        },
       ],
       quarter: "",
       year: "",
       list: [
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' },
-        { name: '大学城-长清', direction: '济南方向', state: "正常", speed: '108.14km/h', follow: '161' }
-      ]
-    }
-  },
-
-  created() {
-
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+        {
+          name: "大学城-长清",
+          direction: "济南方向",
+          state: "正常",
+          speed: "108.14km/h",
+          follow: "161",
+        },
+      ],
+    };
   },
-  methods: {
 
-  },
+  created() {},
+  methods: {},
   mounted() {
     setTimeout(() => {
       this.$nextTick(() => {
-        var myChart1 = echarts.init(document.getElementById('chart1'));
+        var myChart1 = echarts.init(document.getElementById("chart1"));
         myChart1.setOption(chart1);
-        var myChart2 = echarts.init(document.getElementById('chart2'));
+        var myChart2 = echarts.init(document.getElementById("chart2"));
         myChart2.setOption(chart2);
-        var myChart3 = echarts.init(document.getElementById('chart3'));
+        var myChart3 = echarts.init(document.getElementById("chart3"));
         myChart3.setOption(chart2);
 
-
         const domMap = document.getElementById("chart2");
         let parentDiv = domMap.firstChild;
         // 创建canvas
-        let canvas = document.createElement('canvas');
+        let canvas = document.createElement("canvas");
         canvas.width = parentDiv.offsetWidth;
         canvas.height = parentDiv.offsetHeight;
         parentDiv.appendChild(canvas);
-        const context = canvas.getContext('2d');
+        const context = canvas.getContext("2d");
 
         // 填充渐变颜色
         var gr = context.createLinearGradient(247, 63, 450, 0);
         // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
 
         context.lineWidth = 1; // 设置线段宽度
 
         // 绘制圆角矩形
-        drawRoundRect(context, 300, 78, 160, 24, 12, gr)
+        drawRoundRect(context, 300, 78, 160, 24, 12, gr);
 
         var gr = context.createLinearGradient(240, 63, 450, 0);
         // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        drawRoundRect(context, 300, 148, 160, 24, 12, gr)
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        drawRoundRect(context, 300, 148, 160, 24, 12, gr);
 
         var gr = context.createLinearGradient(240, 63, 450, 0);
         // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        drawRoundRect(context, 300, 218, 160, 24, 12, gr)
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        drawRoundRect(context, 300, 218, 160, 24, 12, gr);
 
         var gr = context.createLinearGradient(400, 63, 450, 0);
         // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
 
-        drawRoundRect(context, 460, 78, 160, 24, 12, gr)
+        drawRoundRect(context, 460, 78, 160, 24, 12, gr);
         var gr = context.createLinearGradient(350, 63, 450, 0);
         // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        drawRoundRect(context, 460, 148, 160, 24, 12, gr)
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        drawRoundRect(context, 460, 148, 160, 24, 12, gr);
         var gr = context.createLinearGradient(300, 63, 450, 0);
         // 颜色断点
-        gr.addColorStop(1, 'rgba(92,197,255,0)');
-        gr.addColorStop(0, 'rgba(92,197,255,0.5)');
-        drawRoundRect(context, 460, 218, 160, 24, 12, gr)
+        gr.addColorStop(1, "rgba(92,197,255,0)");
+        gr.addColorStop(0, "rgba(92,197,255,0.5)");
+        drawRoundRect(context, 460, 218, 160, 24, 12, gr);
       });
     });
   },
-}
+};
 </script>
-  
-<style lang='scss' scoped>
+
+<style lang="scss" scoped>
 .progressbar {
   margin: 15px;
-
 }
 
 .congestion {
@@ -325,9 +419,7 @@ export default {
     width: 100%;
     font-size: 14px;
 
-
-
-    >div {
+    > div {
       display: inline-flex;
       flex-direction: column;
       height: 100%;
@@ -343,7 +435,7 @@ export default {
     .chartOrg {
       flex-direction: row !important;
 
-      >div {
+      > div {
         display: inline-flex;
         flex-direction: column;
         width: 50%;
@@ -351,15 +443,14 @@ export default {
       }
 
       .itemChart {
-
-        >.title {
+        > .title {
           display: inline-flex;
           width: 100%;
           height: 30px;
           font-size: 14px;
           font-family: PingFang SC, PingFang SC;
           font-weight: 500;
-          color: #30BFEC;
+          color: #30bfec;
         }
 
         #chart2 {
@@ -413,7 +504,6 @@ export default {
       margin-bottom: 10px;
       z-index: 1000;
 
-
       div {
         white-space: nowrap;
         margin-right: 4px;
@@ -437,7 +527,7 @@ export default {
 
       .selectRoad {
         width: 89px;
-        border: 1px solid #00B3CC;
+        border: 1px solid #00b3cc;
 
         ::v-deep {
           .el-input__inner {
@@ -448,19 +538,17 @@ export default {
       }
 
       .btnSearch {
-        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
+        background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
         margin-left: 10px;
         border-color: transparent;
       }
 
       .btnReset {
-        background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
-        ;
+        background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
         border-color: transparent;
         color: white;
       }
     }
-
   }
 }
 
@@ -469,4 +557,3 @@ export default {
   width: 100%;
 }
 </style>
-  
\ No newline at end of file