style:首页

src/components/Line/index.vue

@@ -11,7 +11,7 @@
   import * as echarts from 'echarts'
   import styleUtil from '@/utils/styleUtil'
   import { fitChartSize } from '@/utils/dataUtil'
-
+  import { guid } from '@/utils/util'
   const props = defineProps({
     width: {
       type: Number,
@@ -20,19 +20,29 @@
     height: {
       type: Number,
       default: () => 0
-    },
-    id: {
-      type: String,
-      default: () => ''
     }
   })
 
+  let id = ref(guid())
   let lineChart = null
+  let timer = null
+  let currentIndex = -1
   let defaultCofig = {
     tooltip: {
       trigger: 'axis',
-      axisPointer: {
-        type: 'cross'
+      backgroundColor: 'transparent',
+      borderWidth: 0,
+      formatter: (params) => {
+        let str = `<div style="
+              background: #07356B;
+              border: 1px solid #0096FF;
+              color: #fff;
+              font-weight: 600;
+              font-size: ${fitChartSize(16)}px;
+              border-radius: ${fitChartSize(4)}px;
+              padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
+              ${params[0].value}</div>`
+        return str
       }
     },
     grid: {
@@ -54,7 +64,7 @@
       },
       axisLine: {
         lineStyle: {
-          color: '#0096FF'
+          color: 'rgba(5, 72, 134, 1)'
         }
       },
       axisLabel: {
@@ -101,11 +111,9 @@
     ]
   }
 
-  onMounted(() => {
-    init()
-  })
   const init = () => {
-    lineChart = echarts.init(document.getElementById(props.id))
+    const dom = document.getElementById(id.value)
+    lineChart = echarts.init(dom)
     defaultCofig.xAxis.data = [
       '10:00',
       '10:05',
@@ -120,8 +128,25 @@
     lineChart.setOption({
       ...defaultCofig
     })
+    // // 开启轮播
+    // startTooltipLoop()
+
+    // // 鼠标悬浮，停止轮播
+    // dom.addEventListener('mousemove', () => {
+    //   console.log('mouse move')
+    //   closeSwitchTooltip()
+    // })
+
+    // // 鼠标离开，继续轮播
+    // dom.addEventListener('mousedown', () => {
+    //   console.log('mouse down')
+    //   startTooltipLoop()
+    // })
+
+    // 监听窗口大小变化
     window.addEventListener('resize', resize)
   }
+
   const resize = () => {
     if (lineChart) {
       lineChart.dispose()
@@ -129,5 +154,39 @@
       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
+  }
+
+  onMounted(() => {
+    init()
+  })
 </script>
 <style lang="scss"></style>