feat：完善功能

src/views/traffic/components/box-2.vue

@@ -81,7 +81,7 @@
         <div class="chart-item">
           <Title3 title="拥堵类型分析" />
           <div class="chart-box">
-            <traffic-jam :series="item.series" :data="item.xdata" />
+            <traffic-jam :series="item.series" :data="item.xdata" :key="index" />
           </div>
         </div>
       </div>

src/views/traffic/components/traffic-jam.vue

@@ -22,7 +22,7 @@
   watch(
     () => props.series,
     (val) => {
-      if (val.length > 0) {
+      if (val.length) {
         setTimeout(() => {
           init()
         }, 1000)
@@ -34,20 +34,7 @@
   let params = null
 
   const getSeriesData = () => {
-    let colorMap = {
-      1: '#00C000',
-      2: '#FFA700',
-      3: '#FFO000',
-      4: '#B50000'
-    }
-    return props.series.map((item) => {
-      return {
-        value: item,
-        itemStyle: {
-          color: colorMap[item]
-        }
-      }
-    })
+    return props.series
   }
   const getXAxisData = () => {
     return props.data
@@ -63,9 +50,8 @@
           containLabel: true
         },
         xAxis: {
-          boundaryGap: false,
           type: 'category',
-          data: getXAxisData(),
+          boundaryGap: false,
           axisTick: {
             show: false
           },
@@ -77,7 +63,8 @@
           axisLabel: {
             fontSize: fitChartSize(12),
             color: 'rgba(255,255,255,0.9)'
-          }
+          },
+          data: getXAxisData()
         },
         yAxis: {
           type: 'value',
@@ -97,9 +84,6 @@
         series: [
           {
             type: 'bar',
-            emphasis: {
-              opacity: 1
-            },
             data: getSeriesData(),
             barWidth: fitChartSize(40),
             label: {
@@ -110,12 +94,23 @@
               formatter: (res) => {
                 let valueMap = {
                   1: '畅通',
-                  2: '高疑似事件拥堵',
-                  3: '异常拥堵',
-                  4: '常规拥堵'
+                  2: '缓行',
+                  3: '拥堵',
+                  4: '严重拥堵'
                 }
                 return valueMap[res.value]
               }
+            },
+            itemStyle: {
+              color: (res) => {
+                let colorMap = {
+                  1: '#00c000',
+                  2: '#ffa700',
+                  3: '#ff0000',
+                  4: '#b50000'
+                }
+                return colorMap[res.value]
+              }
             }
           }
         ]