综合图表

src/views/index.vue

@@ -6,8 +6,8 @@
 </template>
 
 <script setup>
-import leftDesk from './leftDesk.vue'
-import reightDesk from './reightDesk.vue'
+import leftDesk from './index/leftDesk.vue'
+import reightDesk from './index/reightDesk.vue'
 </script>
 
 <style lang="scss">

src/views/index/LineChart.vue

@@ -0,0 +1,97 @@
+<template>
+    <div ref="chartDom" style="width: 100%;height: 100%;" />
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+const chartDom = ref(null);
+let chartInstance = null;
+// 初始化图表
+const initChart = () => {
+    chartInstance = echarts.init(chartDom.value);
+    chartInstance.setOption({
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+            left: '4%',
+            right: '4%',
+            bottom: '10%',
+            top: '16%',
+            containLabel: true,
+        },
+        xAxis: {
+            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+            type: 'category',
+            boundaryGap: false,
+            axisLine: {
+                symbol: 'none',
+                lineStyle: {
+                    color: '#50637A',
+                },
+            },
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+                color: '#ffffff',
+                fontSize: 12,
+                padding: [10, 0, 0, 0],
+            },
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: '#ffffff',
+                fontSize: 12,
+                padding: [0, 10, 0, 0],
+            },
+            splitLine: {
+                show: false,
+            },
+        },
+        series: [
+            {
+                name: '增加值',
+                data: [1, 2, 3, 4, 7, 6, 7, 8, 4, 10],
+                type: 'line',
+                color: 'rgb(49, 143, 247)',
+                lineStyle: {
+                    width: 2,
+                },
+                areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [{
+                            offset: 0,
+                            color: 'rgba(49, 143, 247, .6)',
+                        },
+                        {
+                            offset: 0.8,
+                            color: 'rgba(49, 143, 247, .2)',
+                        },
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)',
+                    shadowBlur: 10,
+                },
+                symbol: 'circle',
+                symbolSize: 6,
+            },
+        ],
+    });
+};
+// 生命周期
+onMounted(initChart);
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartInstance?.resize();
+});
+</script>
+
+<style lang="scss"></style>

src/views/reightDesk.vue → src/views/index/reightDesk.vue

@@ -80,7 +80,7 @@
         <div class="flex_home">
             <HeadlineTag value="报警统计(本周)"></HeadlineTag>
             <div class="box_arch">
-                1
+                <LineChart></LineChart>
             </div>
         </div>
     </div>
@@ -88,6 +88,7 @@
 
 <script setup>
 import HeadlineTag from '@/components/HeadlineTag'
+import LineChart from './LineChart.vue'
 </script>
 
 <style scoped lang="scss">