346 lines
10 KiB
Vue
346 lines
10 KiB
Vue
<template>
|
||
<div>
|
||
<!-- <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>
|
||
|
||
|
||
</div>
|
||
|
||
</template>
|
||
<script setup lang='ts'>
|
||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||
|
||
import Highcharts from 'highcharts';
|
||
import { ref, reactive, onUnmounted } from 'vue'
|
||
const props = defineProps({
|
||
wp: {
|
||
type: Object,
|
||
|
||
},
|
||
boxoList: {
|
||
type: Object,
|
||
|
||
},
|
||
value: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
|
||
})
|
||
// 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]]
|
||
|
||
|
||
|
||
|
||
|
||
|
||
const echartsList: any = ref([])
|
||
const SA:any = ref([])
|
||
const SB:any = ref([])
|
||
const SC:any = ref([])
|
||
const info = () => {
|
||
|
||
|
||
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);
|
||
|
||
let num = (props.wp?.waveTitle.length - 1) / 3
|
||
|
||
for (let i = 0; i < num; i++) {
|
||
// 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]])
|
||
// })
|
||
setTimeout(() => {
|
||
|
||
// 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: ['#DAA520', '#2E8B57', '#A52a2a'],
|
||
// 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'
|
||
}
|
||
},
|
||
|
||
title: {
|
||
text: '123',
|
||
align: 'left'
|
||
},
|
||
|
||
subtitle: {
|
||
text: 'Using the Boost module',
|
||
align: 'left'
|
||
},
|
||
|
||
accessibility: {
|
||
screenReaderSection: {
|
||
beforeChartFormat: '<{headingTagName}>' +
|
||
'{chartTitle}</{headingTagName}><div>{chartSubtitle}</div>' +
|
||
'<div>{chartLongdesc}</div><div>{xAxisDescription}</div><div>' +
|
||
'{yAxisDescription}</div>'
|
||
}
|
||
},
|
||
|
||
tooltip: {
|
||
|
||
},
|
||
|
||
xAxis: {
|
||
type: 'datetime'
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: 'A相',
|
||
type: 'line',
|
||
lineWidth: 0.5,
|
||
data: SA.value[i]
|
||
|
||
},
|
||
{
|
||
name: 'B相',
|
||
type: 'line',
|
||
lineWidth: 0.5,
|
||
data: SB.value[i]
|
||
},
|
||
{
|
||
name: 'C相',
|
||
type: 'line',
|
||
lineWidth: 0.5,
|
||
data: SC.value[i]
|
||
}
|
||
],
|
||
|
||
});
|
||
}, 0);
|
||
}
|
||
}
|
||
|
||
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: [
|
||
|
||
]
|
||
});
|
||
|
||
|
||
|
||
}
|
||
|
||
onMounted(() => {
|
||
info()
|
||
|
||
// init();
|
||
})
|
||
onUnmounted(() => {
|
||
SA.value = []
|
||
SB.value = []
|
||
SC.value = []
|
||
})
|
||
|
||
|
||
|
||
</script>
|
||
<style lang="scss" scoped></style>
|