<template>
    <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
</template>
  
<script>
export default {
    name: 'lineChart', //折线图组件
    props: {
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        pageType: {
            type: String
        },
        title: {
            type: String
        },
        status: {
            type: String
        },
        componentName: {
            type: String
        },
        chartName: {
            type: String
        }
        // list1: {
        //     type: Array,
        //     default() {
        //         return []
        //     }
        // }
    },
    data() {
        return {
            xData: [],
            yData: [],

            yData1: [],
            yData2: [],
            yData3: [],
            // series: []
            // triggerType:'触发时刻'
            myChart: null,
            tooltip: {
                show: true
            },
            serise: [{
                name: this.title,
                type: 'line',
                symbolSize: 6,
                smooth: true,
                itemStyle: {
                    color: '#fb864b',
                    borderColor: '#fb864b',
                    // borderWidth: 2
                },
                data: this.yData
            },
            ]
        };
    },
    created() {
        // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');



    },
    methods: {
        drawLine() {
            let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart)
            if (myChart == null) {
                myChart = this.$echarts.init(this.$refs.lineChart)
            }
            let option = {
                title: {
                    show: true,
                    text: this.componentName + '-' + this.chartName + '-' + '曲线图',
                    textStyle: {
                        lineHeight: '30',
                    }
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '10%',
                    top: '20%',
                    containLabel: true
                },
                tooltip: this.tooltip,
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#eeebeb',
                                type: 'dashed'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#6c6c6c'
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: ['5%', '5%'],

                        data: this.xData
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: '#6c6c6c'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#eeebeb',
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }
                ],
                series: [{
                name: this.title,
                type: 'line',
                symbolSize: 6,
                smooth: true,
                itemStyle: {
                    color: '#fb864b',
                    borderColor: '#fb864b',
                    // borderWidth: 2
                },
                data: this.yData
            },]
            };

            myChart.setOption(option);
            // window.onresize = () => {  // 根据窗口大小变化图表自适应
            //     myChart.resize();
            // };
            window.addEventListener('resize', function () {
                myChart.resize();
            });

        }
    },
    mounted() {
        // this.drawLine()
        // console.log(this.pageType, this.title, this.status);
        // console.log(this.list1);
    },
    watch: {
        list: {
            handler(newVal) {

                if (newVal) {
                    // x轴的数据
                    this.xData = newVal.map((val) => {
                        return val.time;
                    });
                    // 区域组件触发y轴展示
                    if (this.title == '类型') {
                        this.tooltip = {
                            formatter: '{a} {b}:{c}个',
                            show: true,
                            confine: true
                        }
                        this.yData = newVal.map((val) => {
                            return val.speed;
                        });
                        let arr = newVal.map((ele)=>{
                            return ele.type_data
                        })
                        console.log(arr,'177');
                    } else if (this.title == '速度') {
                        this.tooltip = {
                            formatter: '{a} {b}:{c}km/h',
                            show: true,
                            confine: true
                        }
                        this.yData = newVal.map((val) => {
                            return val.speed;
                        });

                    } else if (this.title == '流量') {
                        this.tooltip = {
                            formatter: '{a} {b}:{c}辆',
                            show: true,
                            confine: true
                        }
                        this.yData = newVal.map((ele) => {
                            return ele.in_flow + ele.out_flow
                        });
                    } else if (this.title == '车头时距') {
                        this.tooltip = {
                            formatter: '{a} {b}:{c}/s',
                            show: true,
                            confine: true
                        }
                        this.yData = newVal.map((val) => {
                            return val.ave_speed;

                        });

                    } else if (this.title == '排队数') {
                        this.yData = newVal.map((val) => {
                            return val.n_queue;
                        });
                    } else if (this.title == '检测数') {
                        this.yData = newVal.map((val) => {
                            return val.n_stay;
                        });
                    } else if (this.title == '延误') {
                        this.yData = newVal.map((val) => {

                        });
                    } else if (this.title == '拥堵') {
                        this.yData = newVal.map((val) => {

                        });
                    }
                    if (this.$refs.lineChart) {
                        this.$nextTick(() => {
                            this.drawLine();
                        })
                    }

                }
            },
            immediate: true
        }

    }
};
</script>
<style scoped>

</style>