style:首页样式

src/components/Line/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div
+    :id="id"
+    :style="{
+      width: styleUtil.px2vw(width),
+      height: styleUtil.px2vh(height)
+    }"
+  />
+</template>
+<script setup>
+  import * as echarts from 'echarts'
+  import styleUtil from '@/utils/styleUtil'
+  import { fitChartSize } from '@/utils/dataUtil'
+
+  const props = defineProps({
+    width: {
+      type: Number,
+      default: () => 0
+    },
+    height: {
+      type: Number,
+      default: () => 0
+    },
+    id: {
+      type: String,
+      default: () => ''
+    }
+  })
+
+  let lineChart = null
+  let defaultCofig = {
+    grid: {
+      left: '2%',
+      right: '2%',
+      bottom: '5%',
+      top: '5%',
+      containLabel: true
+    },
+    title: {
+      show: false
+    },
+    xAxis: {
+      boundaryGap: false,
+      type: 'category',
+      data: [],
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#0096FF'
+        }
+      },
+      axisLabel: {
+        fontSize: fitChartSize(12),
+        color: 'rgba(255,255,255,0.9)'
+      }
+    },
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        fontSize: fitChartSize(12),
+        color: 'rgba(255,255,255,0.9)'
+      },
+      splitLine: {
+        lineStyle: {
+          color: 'rgba(0, 150, 255,0.4)',
+          type: 'dashed'
+        }
+      }
+    },
+    visualMap: {
+      show: false,
+      dimension: 0,
+      pieces: [
+        {
+          lte: 6,
+          color: 'green'
+        },
+        {
+          gt: 6,
+          lte: 8,
+          color: 'red'
+        },
+        {
+          gt: 8,
+          lte: 14,
+          color: 'green'
+        },
+        {
+          gt: 14,
+          lte: 17,
+          color: 'red'
+        },
+        {
+          gt: 17,
+          color: 'green'
+        }
+      ]
+    },
+    series: [
+      {
+        data: [],
+        type: 'line',
+        smooth: true,
+        symbol: 'none',
+        markArea: {
+          itemStyle: {
+            color: 'rgba(255, 173, 177, 0)'
+          },
+          data: [
+            [
+              {
+                xAxis: '10:00'
+              },
+              {
+                xAxis: '10:05'
+              },
+              {
+                xAxis: '10:10'
+              },
+              {
+                xAxis: '10:15'
+              },
+              {
+                xAxis: '10:20'
+              },
+              {
+                xAxis: '10:25'
+              },
+              {
+                xAxis: '10:30'
+              },
+              {
+                xAxis: '10:35'
+              }
+            ]
+          ]
+        },
+        lineStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#7DE7FF'
+            },
+            {
+              offset: 0.5,
+              color: '#02F9FA'
+            },
+            {
+              offset: 1,
+              color: '#009DFF'
+            }
+          ])
+        }
+      }
+    ]
+  }
+
+  onMounted(() => {
+    init()
+  })
+  const init = () => {
+    lineChart = echarts.init(document.getElementById(props.id))
+    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]
+    lineChart.setOption({
+      ...defaultCofig
+    })
+    window.addEventListener('resize', resize)
+  }
+  const resize = () => {
+    if (lineChart) {
+      lineChart.dispose()
+      lineChart = null
+      init()
+    }
+  }
+</script>
+<style lang="scss"></style>