添加离线地图

2024-12-16 20:57:17 +08:00
parent 0cd5598e8c
commit ccd07ed110
93 changed files with 20430 additions and 126 deletions
--- a/src/components/echarts/shushiboxi2.vue
+++ b/src/components/echarts/shushiboxi2.vue
@@ -0,0 +1,180 @@
+<template>
+    <div>
+        <MyEChart style="height: 400px;width: 100%" v-for="item in echartsList" :options="item" />
+
+    </div>
+
+</template>
+<script setup lang='ts'>
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { ref, reactive } from 'vue'
+const props = defineProps({
+    wp: {
+        type: Object,
+
+    },
+    boxoList: {
+        type: Object,
+
+    },
+    value: {
+        type: Number,
+        default: 1
+    },
+
+})
+const echartsList: any = ref([])
+const info = () => {
+    let num = (props.wp?.waveTitle.length - 1) / 3
+
+    for (let i = 0; i < num; i++) {
+        let A: any = [], B: any = [], C: any = []
+        props.wp?.listWaveData.forEach((item: any,) => {
+            A.push([item[0], item[i * 3 + 1]])
+            B.push([item[0], item[i * 3 + 2]])
+            C.push([item[0], item[i * 3 + 3]])
+        })
+        setTimeout(() => {
+            console.log("🚀 ~ info ~ A:", A)
+
+            echartsList.value.push({
+                title: {
+                    text: i == 0 ? '123' : '',
+                    x: 'center',
+                },
+                tooltip: {
+                    axisPointer: {
+                        type: 'cross',
+                        label: {
+                            color: '#fff',
+                            fontSize: 16
+                        }
+                    },
+                    textStyle: {
+                        color: '#fff',
+                        fontStyle: 'normal',
+                        opacity: 0.35,
+                        fontSize: 14
+                    },
+                    backgroundColor: 'rgba(0,0,0,0.55)',
+                    borderWidth: 0,
+                },
+                dataZoom: [
+                    {
+                        type: 'inside',
+                        height: 13,
+                        start: 0,
+                        bottom: '20px',
+                        end: 25
+                    },
+                    {
+                        start: 0,
+                        height: 13,
+                        bottom: '20px',
+                        end: 25
+                    }
+                ],
+                xAxis: {
+
+                    // data: data.filter(item => item.phaseType == 'A').map(item => item.time),
+                    name: '时间',
+                    type: 'value',
+                    axisLine: {
+                        show: true,
+                        onZero: false //-----------重点
+                    },
+                    // splitLine: {
+                    //     show: false,
+                    // }
+
+                },
+                yAxis: {
+                    type: 'value',
+                    name: name,
+                    // splitLine: {
+                    //     show: false,
+                    // }
+                    // max: max,
+                    // min: min
+
+                },
+                // legend: {
+                //     data: ['A', 'B', 'C']
+                //     // selectedMode: false,
+                // },
+                grid: {
+                    top: '30px',
+                    left: '30px'
+                },
+                color: ['#FFCC00', '#009900', '#CC0000'],
+                series: [
+                    {
+                        name: 'A相',
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'none',
+                        // 开启渐进式渲染
+                        progressive: 2000,
+                        // 渲染阈值，大于此值则启动渐进渲染
+                        progressiveThreshold: 5000,
+                        sampling: 'average',
+                        data: A
+
+                    },
+                    {
+                        name: 'B相',
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'none',
+                        // 开启渐进式渲染
+                        progressive: 2000,
+                        // 渲染阈值，大于此值则启动渐进渲染
+                        progressiveThreshold: 5000,
+                        sampling: 'average',
+                        data: B
+                    },
+                    {
+                        name: 'C相',
+                        type: 'line',
+                        smooth: true,
+                        symbol: 'none',
+                        // 开启渐进式渲染
+                        progressive: 2000,
+                        // 渲染阈值，大于此值则启动渐进渲染
+                        progressiveThreshold: 5000,
+                        sampling: 'average',
+                        data: C
+                    }
+                ],
+                options: {
+                    animation: false,
+                    dataZoom: [{
+                        type: 'inside',
+                        height: 13,
+                        start: 0,
+                        bottom: '20px',
+                        end: 10
+                    },
+                    {
+                        start: 0,
+                        height: 13,
+                        bottom: '20px',
+                        end: 10
+                    }]
+                }
+            })
+        }, 0);
+    }
+}
+onMounted(() => {
+    info()
+
+
+
+
+})
+
+
+
+</script>
+<style lang="scss" scoped></style>