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

<script>
    export default {
        name: 'hello',
        props: ['ids', 'echartsData'],
        data() {
            return {
                y: []
            }
        },
        created() {},
        mounted() {
            let item = this.echartsData
            if (item) {
                let arr = []
                arr.push(Number(item.R1))
                arr.push(Number(item.R2))
                arr.push(Number(item.R3))
                arr.push(Number(item.R4))
                arr.push(Number(item.R5))
                arr.push(Number(item.R6))
                this.y = arr
                this.drawLine()
            }
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myLine = this.$echarts.init(document.getElementById(this.ids), 'chalk')

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: this.$t('totalAnalysis.R1R6LineTitle'),
                        textStyle: {
                            align: 'center',
                            color: '#333',
                            fontSize: 14
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter: function (v) {
                            return v[0].name + ' : ' + (Number(v[0].data) * 100).toFixed(2) + '%'
                        }
                    },
                    legend: {
                        textStyle: {
                            color: '#e4eadb'
                        }
                    },
                    gird: {
                        containLabel: true,
						top:'22%'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#4c504a'
                                }
                            },
                            axisLabel: {
                                show: true, // 是否显示
                                inside: false, // 是否朝内
                                rotate: 0, // 旋转角度
                                margin: 15, // 刻度标签与轴线之间的距离
                                color: '#989898', // 默认取轴线的颜色,
                                fontSize: 14
                            },
                            data: ['R1', 'R2', 'R3', 'R4', 'R5', 'R6']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#ccc'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'line',
                            lineStyle: {
                                color: '#66cc99'
                            },
                            itemStyle: {
                                color: '#66cc99',
                                borderColor: '#efefef',
                                borderWidth: 3
                            },
                            smooth: false,
                            symbolSize: 10,
                            data: this.y
                        }
                    ]
                }

                // 绘制图表
                myLine.setOption(option)
                window.addEventListener('resize', function () {
                    myLine.resize()
                })
            }
        },
        
    }
</script>

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

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