<template>

    <div id="lineChart" ref="lineChart" style="width:100%;height:300px;"></div>

</template>
  
<script>
export default {
    name: 'lineChart', //折线图组件
    props: {
        list: {
            type: Array,
            default() {
                return []
            }
        },
        // list1: {
        //     type: Array,
        //     default() {
        //         return []
        //     }
        // }
    },
    data() {
        return {


            // xData: [],
            // yData: [],
            // triggerType:'触发时刻'
        }
    },
    methods: {
        
        drawLine() {
            var myChart = this.$echarts.init(this.$refs.lineChart)

            let option = {
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '10%',
                    top: '20%',
                    containLabel: true,
                },
                tooltip: {
                    show: true,
                    // trigger: 'axis',
                },
                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.list.map((value) => {
                            return value.type
                        }),
                    },
                ],
                yAxis: [

                    {
                        type: 'value',
                        axisLabel: {
                            color: '#6c6c6c',
            
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#eeebeb',
                                type: 'dashed',
                            },
                        },
                        axisLine: {
                            show: false,
                        }
                    },
                ],
                series: [
                    {
                        name: '速度',
                        type: 'line',
                        stack: '总量',
                        symbolSize: 6,
                        smooth:true,
                        itemStyle: {
                            color: '#fb864b',
                            borderColor: '#fb864b',
                            borderWidth: 2,
                        },
                        data: this.list.map((value) => {
                            return value.speed
                        }),
                    },
                ],
            };
            myChart.setOption(option)
            // window.onresize = () => {  // 根据窗口大小变化图表自适应
            //     myChart.resize();
            // };
            window.addEventListener('resize',function(){
                    myChart.resize()
                }
            )
        },
    },
    mounted() {
        this.drawLine()
        // console.log(this.list1);
    }
}
</script>
<style scoped>

</style>