<template>
    <div id="echart" :style="`width:100%;height:${h};`" ref="fg" v-loading="isLoading1"></div>
</template>
<script>
import { viewheight } from '@/assets/commjs/common'
import { getDomainData } from '@/api/transientassessment.js'
export default {
    data() {
        return {
            device: null,
            zoom: undefined, //图表焦点校验
            h: null,
            isLoading1: false
        }
    },
    created() {},
    mounted() {
        this.zoom = window.devicePixelRatio
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.$nextTick(() => {
            this.domain()
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            if (this.zoom == 1) {
                let heightd = window.sessionStorage.getItem('appheight') - 130
                this.h = heightd / 2 + 'px'
            }
            if (this.zoom == 1.25) {
                let heightd = window.sessionStorage.getItem('appheight') - 230
                this.h = heightd / 2 + 'px'
            }
        },
        async domain() {
            let echarts = require('echarts')
            this.isLoading1 = true
            let echartsndArr = []
            let echartsArr = []
            const { data } = await getDomainData()
            //   console.log("地区data:",data)
            let domID1 = document.getElementById('echart')
            let myChart = echarts.init(domID1)
            let echartsData = data
            // console.log("地区echartsData:",echartsData)
            this.isLoading1 = false

            for (let i = 0; i < echartsData.length; i++) {
                echartsndArr.push(echartsData[i].monitoring)
            }
            for (let i = 0; i < echartsData.length; i++) {
                echartsArr.push(echartsData[i].order)
            }

            let option = {
                title: {
                    text: '中国',
                    left: 'center',
                    top: 5
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    left: '5%',
                    right: '12%',
                    top: '15%',
                    bottom: '15%'
                },
                //   legend: {
                //     data: ['暂降次数',],
                //     icon: 'rect',
                //       top: 10,
                //       left: '7%',
                //       itemGap: 20,
                //       itemWidth: 12,
                //       itemHeight: 8,
                //   },
                xAxis: [
                    {
                        name: '地区\n(监测点数)', // 给X轴加单位
                        type: 'category',
                        data: echartsndArr,
                        axisPointer: {
                            type: 'shadow'
                        },
                        itemStyle: {
                            barWidth: '30'
                        },
                        axisLabel: {
                            interval: 0, //使x轴上的文字显示完全,
                            margin: 25,
                            rotate: 25,
                            align: 'center'
                        }
                    }
                ],
                yAxis: [
                    {
                        max: 4,
                        type: 'value',
                        name: '(等级)',
                        axisLine: {
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        //   name: '暂降次数',
                        type: 'bar',
                        data: echartsArr
                    }
                ]
            }
            myChart.setOption(option)
            window.echartsArr.push(myChart)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg, element => {
                _this.$nextTick(() => {
                    myChart.resize()
                })
            })
            window.onresize = function () {
                myChart.resize()
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
</style>
