<template>
    <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
</template>

<script>
    import echarts from "echarts";
    export default {
        name: "line",
        mounted() {
            this.drawLine();
        },
        methods: {
            alignment: function (val) {
                let val1 = val.toString();
                if (val1 != null) {
                    let len = this.yk(val1);
                    return String.fromCharCode(8194).repeat(len) + val1;

                }
            },
            yk: function (val) {
                return 6 - val.toString().length;
            },
            drawLine() {
                let _this = this
                var aa = ['10:20',"10:30", "10:40", "10:50", "11:00", "G", "H", "J", "K", "L", "Z", "X", "C"];
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    tooltip: {
                        show: true,
                        trigger: 'item',
                        formatter: function(arg) {
                            return arg.data + `${arg.seriesIndex === 0 ? '人次':'辆'}` //自定义tip内容
                        },
                        axisPointer: {
                            type: 'line',
                        }
                    },
                    // color:['rgba(0, 150, 255, 1)','rgba(0, 150, 255, 1)'],
                    // legend: {
                    //     data: ['人流量数据','车流量数据'],
                    //     top: 0,
                    //     right: "0",
                    //     orient: "horizontal",
                    //     center: true,
                    //     textStyle: {
                    //         textAlign: 'center',
                    //         fontSize: 12,
                    //         color:'rgba(0, 150, 255, 1)'
                    //     },
                    //     itemGap: 30,
                    //     itemWidth: 25,
                    // },
                    grid: [{
                        show: false,
                        bottom: '10%',
                        left: 10,
                        right: 100,
                        containLabel: true,
                        height: '40%'
                    }, {
                        show: false,
                        top: '48%',
                        left: 35,
                        right: 100,
                        height: '0%'
                    }, {
                        show: false,
                        top: '10%',
                        // left: 76,
                        left: 10,
                        right: 100,
                        containLabel: true,
                        height: '40%'
                    }],
                    yAxis: [{
                        type: 'value',
                        inverse: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#0096FF'
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        position: 'left',
                        axisLabel: {
                            show: true,
                            // formatter: function (params) {
                            //     return _this.alignment(params);
                            // },
                            textStyle: {
                                color: '#0096FF',
                                fontSize: 12,
                                // align:'left'

                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#0096FF",
                                width: 1,
                            }
                        }
                    }, {
                        gridIndex: 1,
                        show: false,
                    }, {
                        gridIndex: 2,
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#0096FF'
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        position: 'left',
                        axisLabel: {
                            show: true,
                            // formatter: function (params) {
                            //     return _this.alignment(params)
                            // },
                            textStyle: {
                                color: '#0096FF',
                                fontSize: 12,
                                // align:'left'
                            }
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: "#0096FF",
                                width: 1,
                            }
                        }
                    }, ],
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false, // 不留白，从原点开始
                        position: 'bottom',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#0096FF'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                        },
                        data: [],

                    }, {
                        gridIndex: 1,
                        type: 'category',
                        position: 'center',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            align: 'center',
                            textStyle: {
                                color: '#0096FF',
                                fontSize: 12
                            }
                        },
                        boundaryGap: false, // 不留白，从原点开始
                        data: aa,
                    },
                        {
                            gridIndex: 2,
                            type: 'category',
                            position: 'top',
                            boundaryGap: false, // 不留白，从原点开始
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: false,
                            },
                            data: [],
                        }
                    ],
                    series: [{
                        name: '人流量数据',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: 'rgba(195, 25, 29, 0)'
                            }
                        },
                        smooth:true,//设置折线图平滑
                        label: {
                            normal: {
                                show: false,
                                color: '#0096FF',
                                position: 'top'
                            }
                        },
                        xAxisIndex: 2,
                        areaStyle:{         //2.基础面积图。区域填充样式
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{        // 1代表上面
                                offset: 0,
                                color: 'rgba(195, 25, 29, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(255, 8, 112, 0.35)'
                            }]),
                            // opacity: 0.85   //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
                        },
                        yAxisIndex: 2,
                        data: [1,2,3,4,5,6,5,4,3,5,2,8,5]
                    }, {
                        name: '车流量数据',
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: 'rgba(102, 166, 255, 0)'
                            }
                        },
                        smooth:true,//设置折线图平滑
                        label: {
                            normal: {
                                show: false,
                                color: '#0096FF',
                                position: 'bottom'
                            }
                        },
                        areaStyle:{         //2.基础面积图。区域填充样式
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{        // 1代表上面
                                offset: 0,
                                color: 'rgba(137, 247, 254, 0)'
                            }, {
                                offset: 0.85,
                                color: 'rgba(102, 166, 255, 1)'
                            }]),
                            opacity: 0.85   //支持RGB、ALPHA通道+RGBA、十六进制、渐变色、纹理填充
                        },
                        data: [1,2,3,4,5,6,5,4,3,5,2,8,5],
                    }]
                });


                window.addEventListener("resize", function () {
                    myChart.resize()  // myChart 是实例对象
                })
            }
        }
    }
</script>

<style scoped>

</style>