<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>
