feat：完善舆情页面

src/components/CountItem/index.vue

@@ -6,7 +6,7 @@
     </div>
     <div class="count">
       <img class="bg" src="@/assets/images/mask-success.png" />
-      <div class="flex align-center">
+      <div class="flex align-center" :style="{ color }">
         <countup class="value" :end-val="count" />
         <span class="suffix">{{ suffix }}</span>
       </div>
@@ -16,7 +16,7 @@
 
 <script setup>
   import countup from 'vue-countup-v3'
-  
+
   let props = defineProps({
     label: {
       type: String,
@@ -26,6 +26,10 @@
       type: Number,
       default: 0
     },
+    color: {
+      type: String,
+      default: '#02f9fa'
+    },
     mode: {
       type: Number,
       default: 0

src/components/Header/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="header">
-    <div v-if="isBack" class="back">返回</div>
+    <div v-if="isBack" class="back" @click="handleBack">返回</div>
     <ul class="nav-left">
       <li
         class="nav-left-item"
@@ -18,9 +18,12 @@
       <span>{{ name }}</span>
     </div>
     <ul class="nav-right">
-      <li class="nav-right-item" 
-		@click="handleNav(item, index)"
-	  v-for="(item, index) in navRight" :key="index">
+      <li
+        class="nav-right-item"
+        @click="handleNav(item, index)"
+        v-for="(item, index) in navRight"
+        :key="index"
+      >
         {{ item.name }}
       </li>
     </ul>
@@ -68,6 +71,9 @@
     return props.title
   })
 
+  const handleBack = () => {
+    router.go(-1)
+  }
   const handleNav = (item, index) => {
     if (props.isSkip) {
       router.push(item.path)
@@ -83,7 +89,7 @@
     left: vw(326);
     .back {
       position: absolute;
-      left: vw(60);
+      right: vw(20);
       top: vh(40);
       width: vw(120);
       height: vh(30);

src/components/Line/index.vue

@@ -20,6 +20,22 @@
     height: {
       type: Number,
       default: () => 0
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    xAxisData: {
+      type: Array,
+      default: () => []
+    },
+    config: {
+      type: Object,
+      default: () => {}
+    },
+    seriesConfig: {
+      type: Object,
+      default: () => {}
     }
   })
 
@@ -27,12 +43,26 @@
   let lineChart = null
   let timer = null
   let currentIndex = -1
-  let defaultCofig = {
+
+  var defaultColors = ['#06E2FF', '#02FFB8', '#FF465F', '#FFCA36', '#9A4BFC', '#044EFF']
+
+  let defaultSeriesConfig = {
+    type: 'line',
+    smooth: true,
+    symbol: 'none',
+    symbolSize: fitChartSize(8)
+  }
+  let defaultConfig = {
+    colors: defaultColors,
     tooltip: {
       trigger: 'axis',
       backgroundColor: 'transparent',
       borderWidth: 0,
       formatter: (params) => {
+        let valueStr = ''
+        params.map((item) => {
+          valueStr += `<div>${item.seriesName}：${item.value}</div>`
+        })
         let str = `<div style="
               background: #07356B;
               border: 1px solid #0096FF;
@@ -41,7 +71,7 @@
               font-size: ${fitChartSize(16)}px;
               border-radius: ${fitChartSize(4)}px;
               padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
-              ${params[0].value}</div>`
+              ${valueStr}</div>`
         return str
       }
     },
@@ -49,9 +79,23 @@
       left: '2%',
       right: '2%',
       bottom: '5%',
-      top: '5%',
+      top: '10%',
       containLabel: true
     },
+    legend: {
+      orient: 'horizontal',
+      x: 'center',
+      y: 'top',
+      icon: 'rect',
+      itemWidth: fitChartSize(8),
+      itemHeight: fitChartSize(4),
+      itemGap: fitChartSize(10),
+      textStyle: {
+        color: '#ffffff',
+        fontSize: fitChartSize(12)
+      },
+      data: []
+    },
     title: {
       show: false
     },
@@ -85,48 +129,42 @@
         }
       }
     },
-    series: [
-      {
-        data: [],
-        type: 'line',
-        smooth: true,
-        symbol: 'none',
-        lineStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: '#7DE7FF'
-            },
-            {
-              offset: 0.5,
-              color: '#02F9FA'
-            },
-            {
-              offset: 1,
-              color: '#009DFF'
-            }
-          ])
-        }
-      }
-    ]
+    series: []
   }
-
-  const init = () => {
+  watch(
+    () => props.data,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          initChart()
+        }, 500)
+      }
+    },
+    { immediate: true }
+  )
+  const initChart = () => {
     const dom = document.getElementById(id.value)
     lineChart = echarts.init(dom)
-    defaultCofig.xAxis.data = [
-      '10:00',
-      '10:05',
-      '10:10',
-      '10:15',
-      '10:20',
-      '10:25',
-      '10:30',
-      '10:35'
-    ]
-    defaultCofig.series[0].data = [820, 932, 901, 934, 1290, 1330, 1320, 1290]
+    defaultConfig.xAxis.data = props.xAxisData
+    props.data.map((item, index) => {
+      defaultConfig.series.push({
+        ...defaultSeriesConfig,
+        ...props.seriesConfig,
+        name: item.name,
+        data: item.data,
+        itemStyle: {
+          color: '#0B2F63',
+          borderColor: defaultColors[index],
+          borderWidth: fitChartSize(4)
+        },
+        lineStyle: {
+          color: defaultColors[index]
+        }
+      })
+      defaultConfig.legend.data.push(item.name)
+    })
     lineChart.setOption({
-      ...defaultCofig
+      ...defaultConfig
     })
     // // 开启轮播
     // startTooltipLoop()
@@ -151,42 +189,37 @@
     if (lineChart) {
       lineChart.dispose()
       lineChart = null
-      init()
+      initChart()
     }
   }
-
-  // 切换tooltip
-  const switchTooltip = () => {
-    // 取消之前高亮的图形
-    lineChart.dispatchAction({
-      type: 'downplay',
-      seriesIndex: 0,
-      dataIndex: currentIndex
-    })
-    currentIndex = (currentIndex + 1) % 8
-    // 高亮当前图形
-    lineChart.dispatchAction({
-      type: 'highlight',
-      seriesIndex: 0,
-      dataIndex: currentIndex
-    })
-    // 显示tooltip
-    lineChart.dispatchAction({
-      type: 'showTip',
-      seriesIndex: 0,
-      dataIndex: currentIndex
-    })
-  }
-  const startTooltipLoop = () => {
-    timer = setInterval(() => switchTooltip(), 3000)
-  }
-  const closeSwitchTooltip = () => {
-    clearInterval(timer)
-    timer = undefined
-  }
-
-  onMounted(() => {
-    init()
-  })
+  // // 切换tooltip
+  // const switchTooltip = () => {
+  //   // 取消之前高亮的图形
+  //   lineChart.dispatchAction({
+  //     type: 'downplay',
+  //     seriesIndex: 0,
+  //     dataIndex: currentIndex
+  //   })
+  //   currentIndex = (currentIndex + 1) % 8
+  //   // 高亮当前图形
+  //   lineChart.dispatchAction({
+  //     type: 'highlight',
+  //     seriesIndex: 0,
+  //     dataIndex: currentIndex
+  //   })
+  //   // 显示tooltip
+  //   lineChart.dispatchAction({
+  //     type: 'showTip',
+  //     seriesIndex: 0,
+  //     dataIndex: currentIndex
+  //   })
+  // }
+  // const startTooltipLoop = () => {
+  //   timer = setInterval(() => switchTooltip(), 3000)
+  // }
+  // const closeSwitchTooltip = () => {
+  //   clearInterval(timer)
+  //   timer = undefined
+  // }
 </script>
 <style lang="scss"></style>

src/components/PieRow/index.vue

@@ -61,7 +61,6 @@
         fontSize: fitChartSize(12)
       }
     },
-
     series: [
       {
         type: 'pie',
@@ -98,14 +97,6 @@
       }
     ]
   }
-  const resize = () => {
-    if (pieChart) {
-      pieChart.dispose()
-      pieChart = null
-      init()
-    }
-  }
-
   const init = () => {
     const dom = document.getElementById(id.value)
     pieChart = echarts.init(dom)
@@ -116,7 +107,13 @@
     // 监听窗口大小变化
     window.addEventListener('resize', resize)
   }
-
+  const resize = () => {
+    if (pieChart) {
+      pieChart.dispose()
+      pieChart = null
+      init()
+    }
+  }
   onMounted(() => {
     init()
   })