<template>
    <div :id="id" style="height: 100%;width:100%;"></div>
</template>

<script>
export default {
    data () {
        return {
            mychat: '',
            total: 0,
            heightlightIndex: 0,
        }
    },
    props:{
        id:{
            type: String
        },
        title:{
            type: String
        },
        xlabel:{
            type: Array,
            default: function(){
                return ['0-50', '51-60', '61-70', '71-80', '81-80', '90~'];;
            }
        },
        ylabel:{
            type: Array,
            default: function(){
                return ['一年級', '二年級', '三年級','四年級','五年級'];
            }
        },
        bubleData:{
            type: Array,
            default: function(){
                // [x, y, total]
                return [
                [0,0,10], [1,0, 30], [4,0, 20], [5,0, 10],
                [1,1,30], [2,1, 30],
                [3,2,30], [4,2, 10],
                [2,3,30]];
            }
        }
    },
    mounted(){
        this.drawLine();
    },
    created(){
    },
    methods:{
        drawLine(){
            const lang = localStorage.getItem('local');
            let _this = this
            var bubblecolor = ['#FF6B6A', '#FF9FF4', '#48DBFC', '#1CD0A1', '#FDC958', '#FFAD76'];
            var hours = this.xlabel;
            // data = data.map(function (item) {
            //     return [item[1], item[0], item[2]];
            // });
            // console.log(data)
            // 基于准备好的dom，初始化echarts实例
            this.myChart = this.$echarts.init(document.getElementById(this.id));
            this.myChart.setOption({  
              title:{
                show: _this.title ? true : false,
                text: _this.title ? _this.title : '',
                left: 'center',
                textStyle:{
                  color: '#fafafa',
                  fontWeight: 100,
                }
              },
                tooltip: {
                    position: 'top',
                    formatter: function (params) {
                        let num = params.value[2];
                        let regin =hours[params.value[0]];
                        let grade = _this.ylabel[params.value[1]];
                        if(lang == 'en-US'){
                            return _this.$t('talMgmt.text61') + num + _this.$t('talMgmt.text62') + regin +  _this.$t('talMgmt.text63') + grade;
                        } else {
                            return grade + _this.$t('talMgmt.text61') + regin + _this.$t('talMgmt.text62') + num + _this.$t('talMgmt.text63')
                        }
                    }
                },
                grid: {
                    left: '2%',
                    bottom: 0,
                    right: '16px',
                    containLabel: true,      
                },
                xAxis: {
                    type: 'category',
                    data: hours,
                    boundaryGap: false,
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(185, 193, 173, 0.63)',
                        },
                        show: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(185, 193, 173, 0.63)',
                            width: 1,
                        }
                    },
                },
                yAxis: {
                    type: 'category',
                    data: _this.ylabel,
                    boundaryGap: true,
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(185, 193, 173, 0.63)',
                        },
                        show: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(185, 193, 173, 0.63)',
                            width: 1,
                        }
                    },
                },
                series: [{
                    // name: '论文数量',
                    type: 'scatter',
                    symbolSize: function (val) {
                        let tmp = val[2]*0.03;
                        if(tmp == 0){
                            return 0
                        } else if(tmp<1){
                            return 10
                        } else {
                            return tmp;
                        }                        
                    },
                    data: _this.bubleData,
                    animationDelay: function (idx) {
                        return idx * 5;
                    },
                    itemStyle:{
                        normal:{
                            color: function(params) {
                                var num=bubblecolor.length;
                                return bubblecolor[params.dataIndex%num]
                            },
                        }
                    }
                }]
            });
        },
    }
}

</script>

<style>
</style>
