Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

微调

Browse Source
This commit is contained in:
guanj
2025-12-01 13:21:24 +08:00
parent dac950c4c1
commit 5443996fa9
1 changed files with 0 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
src/components/echarts/shushiboxi2.vue
View File

@@ -1,345 +0,0 @@
<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>