181 lines
5.2 KiB
Vue
181 lines
5.2 KiB
Vue
|
<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>
|