<template>
    <div id="data-compare-box"></div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    data() {
        return {
            techScoreGau: undefined,
            xData: [ '最低分', '最高分', '平均分','标准差'],
            // lineData: [100, 100, 100, 100, 100, 100, 100],
            myData: [3, 20, 62, 34, 55, 65, 33],
            allData: [11, 38, 23, 39, 66, 66, 79],
            timeLineData: [1],
            legend: ['我的数据', '集体的数据'],
            background: "#2b2a2f", //背景 
            textColor: "#fff",
            lineColor: "rgba(255,255,255,0.2)",
            colors: [{
                borderColor: "rgba(227,161,96,1)",
                start: "rgba(227,161,96,0.8)",
                end: "rgba(227,161,96,0.3)"
            },
            {
                borderColor: "rgba(0,222,255,1)",
                start: "rgba(0,222,255,0.3)",
                end: "rgba(0,222,255,0.8)"
            }],
            scale: 2,
            option: {
                baseOption: {},
                options: []
            }
        }
    },
    mounted() {
        this.techScoreGau = this.$echarts.init(document.getElementById('data-compare-box'))
        this.techScoreGau.setOption(this.option)
        this.erd = elementResizeDetectorMaker()
        this.erd.listenTo(document.getElementById("data-compare-box"), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.techScoreGau.resize()
            })
        })
    },
    created() {
        this.option.baseOption = {
            backgroundColor: this.background,
            timeline: {
                show: false,
                top: 0,
                data: []
            },
            legend: {
                top: '5px',
                left: '5px',
                itemWidth: 10,
                itemHeight: 10,
                icon: 'horizontal',
                textStyle: {
                    color: '#ddd',
                    fontSize: 11,
                },
                data: this.legend
            },
            grid: [
                {
                    show: false,
                    left: '5%',
                    top: '40px',
                    bottom: '0',
                    containLabel: true,
                    width: '37%'
                }, {
                    show: false,
                    left: '54%',
                    top: '40px',
                    bottom: '0',
                    width: '0%'
                },
                {
                    show: false,
                    right: '2%',
                    top: '40px',
                    bottom: '0',
                    containLabel: true,
                    width: '37%'
                }
            ],
            xAxis: [{
                type: 'value',
                inverse: true,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                position: 'bottom',
                axisLabel: {
                    show: false,
                    color: this.textColor
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: this.lineColor
                    }
                },
            }, {
                gridIndex: 1,
                show: false
            }, {
                gridIndex: 2,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                position: 'bottom',
                axisLabel: {
                    show: false,
                    color: this.textColor
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: this.lineColor
                    }
                },
            }],
            yAxis: [{
                type: 'category',
                inverse: true,
                position: 'right',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: this.lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                data: this.xData
            }, {
                gridIndex: 1,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: 11
                    },
                    align: "center"

                },
                data: this.xData.map(function (value) {
                    return {
                        value: value,
                        textStyle: {
                            align: 'center'
                        }
                    }
                })
            }, {
                gridIndex: 2,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: this.lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false

                },
                data: this.xData
            }],
            series: []
        }
        this.option.baseOption.timeline.data.push(this.timeLineData[0])
        this.option.options.push({
            series: [{
                name: "我的数据",
                type: "bar",
                barWidth: 20,
                // stack: "1",
                itemStyle: {
                    normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: this.colors[0].start
                        },
                        {
                            offset: 1,
                            color: this.colors[0].end
                        }
                        ]),
                    }
                },
                label: {
                    normal: {
                        position: 'left',
                        show: true,
                        color:'#ddd',
                        fontSize:10
                    }
                },
                data: this.myData,
                animationEasing: "elasticOut"
            },
            {
                name: "集体的数据",
                type: "bar",
                stack: "2",
                barWidth: 20,
                xAxisIndex: 2,
                yAxisIndex: 2,
                itemStyle: {
                    normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: this.colors[1].start
                        },
                        {
                            offset: 1,
                            color: this.colors[1].end
                        }
                        ]),
                    },
                },
                label: {
                    normal: {
                        position: 'right',
                        show: true,
                        color:'#ddd',
                        fontSize:10
                    }
                },
                data: this.allData,
                animationEasing: "elasticOut"
            }
            ]
        })
    }
}
</script>
<style lang="less" scoped>
#data-compare-box {
    width: 400px;
    height: 200px;
}
</style>
<style>
</style>