<template>
    <div :id="ids" class="myRateLine"></div>
</template>

<script>
    export default {
        name: 'hello',
        props: ['ids', 'echartsData'],
        data() {
            return {
            }
        },
        mounted() {
			if(this.echartsData.length){
				this.drawLine(this.echartsData)
			}
        },
        methods: {
            drawLine(data) {
				let that = this
                // 基于准备好的dom，初始化echarts实例
                let myLine = this.$echarts.init(document.getElementById(this.ids), 'chalk')

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: this.$t('totalAnalysis.rateLineTitle'),
                        textStyle: {
                            align: 'center',
                            color: '#333',
                            fontSize: 14
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: function (v) {
                            let str = that.$t('totalAnalysis.myTable.option') + v[0].name + '<br>'
                            v.forEach(item => {
                                str = str + item.seriesName + ':' + item.data + '%' + '<br>'
                            })
                            return str
                        }
                    },
                    legend: {
                        textStyle: {
                            color: '#969696'
                        },
                        top: 30
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#4c504a'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#969696'
                                }
                            },
                            axisLabel: {
                                show: true, // 是否显示
                                inside: false, // 是否朝内
                                rotate: 0, // 旋转角度
                                margin: 15, // 刻度标签与轴线之间的距离
                                color: '#989898', // 默认取轴线的颜色,
                                fontSize: 14
                            },
                            data: data.map(item => item.option)
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#ccc'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#969696'
                                }
                            },
							axisLabel: {
							    formatter: function(value) {
							        return value + '%'
							    }
							},
                        }
                    ],
                    series: [
                        {
                            name:  that.$t('totalAnalysis.myTable.answerRate'),
                            type: 'line',
                            data: data.map(item => item.rate),
                            color: '#F58080',
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: {
                                        type: 'linear',

                                        colorStops: [{
                                            offset: 0,
                                            color: '#FFCAD4' // 0% 处的颜色
                                        }, {
                                            offset: 0.4,
                                            color: '#F58080' // 100% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#F58080' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    },
                                    shadowColor: 'rgba(245,128,128, 0.5)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 7
                                }
                            },
                            // areaStyle: {
                            //    normal: {
                            //        color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            //            offset: 0,
                            //            color: 'rgba(137, 189, 27, 0.3)'
                            //        }, {
                            //            offset: 0.8,
                            //            color: 'rgba(137, 189, 27, 0)'
                            //        }], false),
                            //        shadowColor: 'rgba(0, 0, 0, 0.1)',
                            //        shadowBlur: 10
                            //    }
                            // },
                            itemStyle: {
                                normal: {
                                    color: '#F58080',
                                    borderWidth: 5,
                                    /* shadowColor: 'rgba(72,216,191, 0.3)',
                                     shadowBlur: 100, */
                                    borderColor: '#F58080'
                                }
                            },
                            smooth: false
                        },
                        {
                            name: that.$t('totalAnalysis.myTable.RHRate'),
                            type: 'line',
                            data: data.map(item => item.PH),
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: {
                                        type: 'linear',

                                        colorStops: [{
                                            offset: 0,
                                            color: '#AAF487' // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.4,
                                            color: '#47D8BE' // 100% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#47D8BE' // 100% 处的颜色
                                        }
                                        ],
                                        globalCoord: false // 缺省为 false
                                    },
                                    shadowColor: 'rgba(71,216,190, 0.5)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 7
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#AAF487',
                                    borderWidth: 10,
                                    /* shadowColor: 'rgba(72,216,191, 0.3)',
                                     shadowBlur: 100, */
                                    borderColor: '#AAF487'
                                }
                            },
                            smooth: false
                        },
                        {
                            name: that.$t('totalAnalysis.myTable.RLRate'),
                            type: 'line',
                            data: data.map(item => item.PL),
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: {
                                        type: 'linear',

                                        colorStops: [{
                                            offset: 0,
                                            color: '#F6D06F' // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.4,
                                            color: '#F9A589' // 100% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: '#F9A589' // 100% 处的颜色
                                        }
                                        ],
                                        globalCoord: false // 缺省为 false
                                    },
                                    shadowColor: 'rgba(249,165,137, 0.5)',
                                    shadowBlur: 10,
                                    shadowOffsetY: 7
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#F6D06F',
                                    borderWidth: 10,
                                    /* shadowColor: 'rgba(72,216,191, 0.3)',
                                     shadowBlur: 100, */
                                    borderColor: '#F6D06F'
                                }
                            },
                            smooth: false
                        }]
                }

                // 绘制图表
                myLine.setOption(option)
                window.addEventListener('resize', function () {
                    myLine.resize()
                })
            }
        }, 
        watch: {
            echartsData: {
                handler(n) {
					n.length && this.drawLine(n)
                }
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .myRateLine {
        width: 100%;
        height: 400px;
        margin: 20px auto;
        display: block;
    }
</style>
