轨迹地图修改

src/views/realTime/trackMap/index.vue

@@ -37,6 +37,8 @@ const searchHandler = () => {
 }
 const clearHandler = () => {}
 
+const activeColor = '#AC014D'
+const inActiveColor = '#9C9FA5'
 const trackMap = ref<HTMLElement | null>(null)
 let trackMapCharts: ECharts
 const option = reactive({
@@ -53,7 +55,7 @@ const option = reactive({
       bottom: 80,
       symbolSize: 24,
       itemStyle: {
-        color: '#AC014D',
+        color: activeColor,
       },
       label: {
         show: true,
@@ -61,7 +63,7 @@ const option = reactive({
         width: 120,
         height: 90,
         lineHeight: 24,
-        backgroundColor: '#AC014D',
+        backgroundColor: activeColor,
         borderRadius: 4,
         align: 'center',
         color: '#FFFFFF',
@@ -117,7 +119,7 @@ const option = reactive({
       links: [] as any[],
       lineStyle: {
         width: 6,
-        color: '#AC014D',
+        color: activeColor,
         opacity: 1,
         curveness: 0,
       },
@@ -130,10 +132,19 @@ watch(
     option.series[0].links = array.reduce(
       (preArray, currentData, currentIndex, orginArray) => {
         if (currentIndex > 0) {
-          preArray.push({
-            source: orginArray[currentIndex - 1].name,
+          const preData = orginArray[currentIndex - 1]
+          const link = {
+            source: preData.name,
             target: currentData.name,
-          })
+          }
+          if (!preData.value || !currentData.value) {
+            Object.assign(link, {
+              lineStyle: {
+                color: inActiveColor,
+              },
+            })
+          }
+          preArray.push(link)
         }
         return preArray
       },
@@ -150,10 +161,16 @@ onMounted(() => {
     option.series[0].data[index].value = value
     if (!value) {
       option.series[0].data[index].label = {
-        backgroundColor: '#9C9FA5',
+        backgroundColor: inActiveColor,
+      }
+      option.series[0].data[index].itemStyle = {
+        color: '#FFFFFF',
+        borderColor: inActiveColor,
+        borderWidth: 3,
       }
     } else {
       delete option.series[0].data[index].label
+      delete option.series[0].data[index].itemStyle
     }
   })
   window.addEventListener('resize', resizeHandler)