添加离线地图
This commit is contained in:
39
src/components/echarts/boX.vue
Normal file
39
src/components/echarts/boX.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="default-main device pd10">
|
||||
<waveForm ref="waveFormRef" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
|
||||
import waveForm from '@/components/echarts/waveForm.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const activeName = ref('')
|
||||
const waveFormRef = ref()
|
||||
watch(
|
||||
() => activeName.value,
|
||||
(val, oldVal) => {
|
||||
|
||||
nextTick(() => {
|
||||
// waveFormRef.value && waveFormRef.value.getMakeUpDataList(route.query)
|
||||
})
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
onMounted(() => {
|
||||
|
||||
// activeName.value = route.query.activeName
|
||||
// waveForm.value && waveForm.value.getMakeUpDataList(route.query)
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.device {
|
||||
overflow: hidden;
|
||||
// height: calc(100vh - 130px);
|
||||
}
|
||||
</style>
|
||||
@@ -1072,13 +1072,13 @@ export default {
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: "20px",
|
||||
end: 100,
|
||||
end: 15,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: "20px",
|
||||
end: 100,
|
||||
end: 15,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
@@ -1492,13 +1492,13 @@ export default {
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: "20px",
|
||||
end: 100,
|
||||
end: 15,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: "20px",
|
||||
end: 100,
|
||||
end: 15,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
||||
@@ -17,8 +17,7 @@ import $ from 'jquery'
|
||||
import * as echarts from 'echarts'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import url from '@/assets/img/point.png'
|
||||
import { t } from 'vxe-table'
|
||||
import { set } from '@vueuse/core'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
@@ -733,19 +732,21 @@ export default {
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
end: 15
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
end: 15
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: a,
|
||||
type: 'line',
|
||||
large: true,
|
||||
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
sampling: 'average',
|
||||
@@ -757,6 +758,8 @@ export default {
|
||||
{
|
||||
name: b,
|
||||
type: 'line',
|
||||
large: true,
|
||||
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
sampling: 'average',
|
||||
@@ -768,6 +771,8 @@ export default {
|
||||
{
|
||||
name: c,
|
||||
type: 'line',
|
||||
large: true,
|
||||
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
sampling: 'average',
|
||||
@@ -1089,19 +1094,21 @@ export default {
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
end: 15
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100
|
||||
end: 15
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: a,
|
||||
type: 'line',
|
||||
large: true,
|
||||
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
sampling: 'average',
|
||||
@@ -1113,6 +1120,8 @@ export default {
|
||||
{
|
||||
name: b,
|
||||
type: 'line',
|
||||
large: true,
|
||||
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
sampling: 'average',
|
||||
@@ -1124,6 +1133,8 @@ export default {
|
||||
{
|
||||
name: c,
|
||||
type: 'line',
|
||||
large: true,
|
||||
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
sampling: 'average',
|
||||
|
||||
180
src/components/echarts/shushiboxi2.vue
Normal file
180
src/components/echarts/shushiboxi2.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user