2024-12-16 20:57:17 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div>
|
2024-12-18 11:31:33 +08:00
|
|
|
|
<!-- <MyEChart style="height: 400px;width: 100%" v-for="item in echartsList" :options="item" /> -->
|
|
|
|
|
|
<div id="container0" style="height:400px;width:100%;"></div>
|
|
|
|
|
|
<div id="container1" style="height:400px;width:100%;"></div>
|
|
|
|
|
|
|
2024-12-16 20:57:17 +08:00
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup lang='ts'>
|
|
|
|
|
|
import MyEChart from '@/components/echarts/MyEchart.vue'
|
2024-12-18 11:31:33 +08:00
|
|
|
|
|
|
|
|
|
|
import Highcharts from 'highcharts';
|
|
|
|
|
|
import { ref, reactive, onUnmounted } from 'vue'
|
2024-12-16 20:57:17 +08:00
|
|
|
|
const props = defineProps({
|
|
|
|
|
|
wp: {
|
|
|
|
|
|
type: Object,
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
boxoList: {
|
|
|
|
|
|
type: Object,
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
value: {
|
|
|
|
|
|
type: Number,
|
|
|
|
|
|
default: 1
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
})
|
2024-12-18 11:31:33 +08:00
|
|
|
|
// let data = [[-100, -3.41, -3.39, -3.34, 1, 2, 3], [-99.92, -5.19, -5.23, -5.19, 4, 5, 6], [-99.84, -7.28, -7.26, -7.26, 10, 20, 30]]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-12-16 20:57:17 +08:00
|
|
|
|
const echartsList: any = ref([])
|
2024-12-18 11:31:33 +08:00
|
|
|
|
const SA:any = ref([])
|
|
|
|
|
|
const SB:any = ref([])
|
|
|
|
|
|
const SC:any = ref([])
|
2024-12-16 20:57:17 +08:00
|
|
|
|
const info = () => {
|
2024-12-18 11:31:33 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let result = props.wp?.listWaveData.map(item => {
|
|
|
|
|
|
let A = [[item[0], item[1]], [item[0], item[4]],];
|
|
|
|
|
|
let B = [[item[0], item[2]], [item[0], item[5]],]; // 注意：item[7] 会是 undefined，需要确保数据长度或调整索引
|
|
|
|
|
|
let C = [[item[0], item[3]], [item[0], item[6]],]; // 根据要求，这里 C 的第二个和第三个子数组的第二个元素取自 subArray[4] 和 subArray[6]
|
|
|
|
|
|
|
|
|
|
|
|
// 由于 subArray[7] 在原始数据中不存在，我们可以使用 subArray[5] 的下一个有效索引 subArray[6]（对于 B 的第三个子数组的第二个元素）
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return { A, B, C };
|
|
|
|
|
|
}).reduce((acc, { A, B, C }) => {
|
|
|
|
|
|
acc.A[0].push(A[0]);
|
|
|
|
|
|
acc.A[1].push(A[1]);
|
|
|
|
|
|
acc.B[0].push(B[0]);
|
|
|
|
|
|
acc.B[1].push(B[1]);
|
|
|
|
|
|
acc.C[0].push(C[0]);
|
|
|
|
|
|
acc.C[1].push(C[1]);
|
|
|
|
|
|
return acc;
|
|
|
|
|
|
}, { A: [[],[]], B: [[],[]], C: [[],[]] });
|
|
|
|
|
|
|
|
|
|
|
|
SA.value = result.A;
|
|
|
|
|
|
SB.value = result.B;
|
|
|
|
|
|
SC.value = result.C;
|
|
|
|
|
|
|
|
|
|
|
|
console.log( SA.value );
|
|
|
|
|
|
console.log( SB.value );
|
|
|
|
|
|
console.log( SC.value);
|
|
|
|
|
|
|
2024-12-16 20:57:17 +08:00
|
|
|
|
let num = (props.wp?.waveTitle.length - 1) / 3
|
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < num; i++) {
|
2024-12-18 11:31:33 +08:00
|
|
|
|
// A.value = []
|
|
|
|
|
|
// B.value = []
|
|
|
|
|
|
// C.value = []
|
|
|
|
|
|
// props.wp?.listWaveData.forEach((item: any,) => {
|
|
|
|
|
|
// A.value.push([item[0], item[i * 3 + 1]])
|
|
|
|
|
|
// B.value.push([item[0], item[i * 3 + 2]])
|
|
|
|
|
|
// C.value.push([item[0], item[i * 3 + 3]])
|
|
|
|
|
|
// })
|
2024-12-16 20:57:17 +08:00
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
|
2024-12-18 11:31:33 +08:00
|
|
|
|
// 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
|
|
|
|
|
|
// }]
|
|
|
|
|
|
// }
|
|
|
|
|
|
// })
|
|
|
|
|
|
Highcharts.chart(`container${i}`, {
|
|
|
|
|
|
|
|
|
|
|
|
chart: {
|
|
|
|
|
|
zooming: {
|
|
|
|
|
|
type: 'x'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
2024-12-16 20:57:17 +08:00
|
|
|
|
title: {
|
2024-12-18 11:31:33 +08:00
|
|
|
|
text: '123',
|
|
|
|
|
|
align: 'left'
|
2024-12-16 20:57:17 +08:00
|
|
|
|
},
|
2024-12-18 11:31:33 +08:00
|
|
|
|
|
|
|
|
|
|
subtitle: {
|
|
|
|
|
|
text: 'Using the Boost module',
|
|
|
|
|
|
align: 'left'
|
2024-12-16 20:57:17 +08:00
|
|
|
|
},
|
2024-12-18 11:31:33 +08:00
|
|
|
|
|
|
|
|
|
|
accessibility: {
|
|
|
|
|
|
screenReaderSection: {
|
|
|
|
|
|
beforeChartFormat: '<{headingTagName}>' +
|
|
|
|
|
|
'{chartTitle}</{headingTagName}><div>{chartSubtitle}</div>' +
|
|
|
|
|
|
'<div>{chartLongdesc}</div><div>{xAxisDescription}</div><div>' +
|
|
|
|
|
|
'{yAxisDescription}</div>'
|
2024-12-16 20:57:17 +08:00
|
|
|
|
}
|
2024-12-18 11:31:33 +08:00
|
|
|
|
},
|
2024-12-16 20:57:17 +08:00
|
|
|
|
|
2024-12-18 11:31:33 +08:00
|
|
|
|
tooltip: {
|
2024-12-16 20:57:17 +08:00
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
2024-12-18 11:31:33 +08:00
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'datetime'
|
2024-12-16 20:57:17 +08:00
|
|
|
|
},
|
2024-12-18 11:31:33 +08:00
|
|
|
|
|
2024-12-16 20:57:17 +08:00
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'A相',
|
|
|
|
|
|
type: 'line',
|
2024-12-18 11:31:33 +08:00
|
|
|
|
lineWidth: 0.5,
|
|
|
|
|
|
data: SA.value[i]
|
2024-12-16 20:57:17 +08:00
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'B相',
|
|
|
|
|
|
type: 'line',
|
2024-12-18 11:31:33 +08:00
|
|
|
|
lineWidth: 0.5,
|
|
|
|
|
|
data: SB.value[i]
|
2024-12-16 20:57:17 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'C相',
|
|
|
|
|
|
type: 'line',
|
2024-12-18 11:31:33 +08:00
|
|
|
|
lineWidth: 0.5,
|
|
|
|
|
|
data: SC.value[i]
|
2024-12-16 20:57:17 +08:00
|
|
|
|
}
|
|
|
|
|
|
],
|
2024-12-18 11:31:33 +08:00
|
|
|
|
|
|
|
|
|
|
});
|
2024-12-16 20:57:17 +08:00
|
|
|
|
}, 0);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2024-12-18 11:31:33 +08:00
|
|
|
|
var init = () => {
|
|
|
|
|
|
Highcharts.chart('container', {
|
|
|
|
|
|
chart: {
|
|
|
|
|
|
type: 'spline'
|
|
|
|
|
|
},
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: 'Snow depth at Vikjafjellet, Norway'
|
|
|
|
|
|
},
|
|
|
|
|
|
subtitle: {
|
|
|
|
|
|
text: 'Irregular time data in Highcharts JS'
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
type: 'datetime',
|
|
|
|
|
|
dateTimeLabelFormats: {
|
|
|
|
|
|
// don't display the year
|
|
|
|
|
|
month: '%e. %b',
|
|
|
|
|
|
year: '%b'
|
|
|
|
|
|
},
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: 'Date'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
title: {
|
|
|
|
|
|
text: 'Snow depth (m)'
|
|
|
|
|
|
},
|
|
|
|
|
|
min: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
// tooltip: {
|
|
|
|
|
|
// headerFormat: '<b>{series.name}</b><br>',
|
|
|
|
|
|
// pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
plotOptions: {
|
|
|
|
|
|
series: {
|
|
|
|
|
|
marker: {
|
|
|
|
|
|
symbol: 'circle',
|
|
|
|
|
|
fillColor: '#FFFFFF',
|
|
|
|
|
|
enabled: true,
|
|
|
|
|
|
radius: 2.5,
|
|
|
|
|
|
lineWidth: 1,
|
|
|
|
|
|
lineColor: null
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
colors: ['#6CF', '#39F', '#06C', '#036', '#000'],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
series: [
|
2024-12-16 20:57:17 +08:00
|
|
|
|
|
2024-12-18 11:31:33 +08:00
|
|
|
|
]
|
|
|
|
|
|
});
|
2024-12-16 20:57:17 +08:00
|
|
|
|
|
|
|
|
|
|
|
2024-12-18 11:31:33 +08:00
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
info()
|
|
|
|
|
|
|
|
|
|
|
|
// init();
|
|
|
|
|
|
})
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
|
|
|
SA.value = []
|
|
|
|
|
|
SB.value = []
|
|
|
|
|
|
SC.value = []
|
2024-12-16 20:57:17 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped></style>
|
