<template>
    <div class="pd10" :style="`height:${vh}`" id="jzhylv">
        <el-button
            style="position: absolute; right: 10px; z-index: 20000"
            type="text"
            icon="el-icon-download"
            title="生成图片"
            @click="download"
        >
            下载
        </el-button>
        <div id="jzharmonicvoltage" ref="jzxbhylv"></div>
    </div>
    <!-- <div  id="electriccurrent" style="'width:900px;height:500px"></div> -->
</template>
<script>
export default {
    data() {
        return {
            echartsheight: undefined,
            echartswidth: undefined,
            zoom: '',
            myChartes: '',
            vh: null
        }
    },
    created() {},
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.resizeEchartjhylz()

        //this.$nextTick(()=> {
        this.electriccurrentdata()
        // })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.echartsheight = window.sessionStorage.getItem('appheight') - 200
            this.vh = window.sessionStorage.getItem('appheight') - 246 + 'px'
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
        },
        resizeEchartjhylz() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            if (document.getElementById('jzhylv')) {
                var erd = elementResizeDetectorMaker()
                erd.listenTo(document.getElementById('jzhylv'), element => {
                    let domeId = document.getElementById('jzhylv')
                    let domeId2 = document.getElementById('jzharmonicvoltage')
                    domeId2.style.width = domeId.offsetWidth - 10 + 'px'
                    if (this.myChartes !== '') {
                        this.myChartes.resize()
                    }
                })
            }
        },
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('hylv'), {
                //backgroundColor: 'white',
                background: '#fff',
                scale: 1
            }).then(function (canvas) {
                // 创建a标签，实现下载
                var creatIMg = document.createElement('a')
                creatIMg.download = '谐波电压含有率.png' // 设置下载的文件名，
                creatIMg.href = canvas.toDataURL() // 下载url
                creatIMg.click()
                creatIMg.remove() // 下载之后把创建的元素删除
            })
        },
        random(min, max) {
            return parseInt(Math.random() * (max - min) + min)
        },
        //电能质量图表
        electriccurrentdata() {
            const echarts = require('echarts')
            var domID1 = document.getElementById('jzharmonicvoltage')
            setTimeout(() => {
                domID1.style.width = document.getElementById('jzhylv').offsetWidth - 10 + 'px'
                domID1.style.height = window.sessionStorage.getItem('appheight') - 246 + 'px'
            }, 0)
            var myChartes = echarts.init(domID1)
            this.myChartes = myChartes
            myChartes.clear()
            var xData = []
            var yData = []
            var yData1 = []
            function random(min, max) {
                return parseInt(Math.random() * (max - min) + min)
            }
            for (var i = 0; i < 50; i++) {
                xData.push(i + '次')
            }
            for (var i = 0; i < xData.length; i++) {
                let value = random(10, 100)
                yData.push(value)
            }
            for (var i = 0; i < xData.length; i++) {
                let value = random(10, 100)
                yData1.push(value)
            }
            var option = {
                //backgroundColor: '#fff',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '10px',
                    right: '50px',
                    bottom: '40px',
                    top: '50px',
                    containLabel: true
                },
                legend: {
                    data: ['国标限值', '电流幅值'],
                    left: '20px',
                    top: 0,
                    textStyle: {
                        color: '#333'
                    }
                    //itemWidth: 10,
                    //itemHeight: 10,
                },
                xAxis: {
                    type: 'category',
                    name: '次数',
                    data: xData,
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        lineStyle: {
                            color: 'rgba(0,0,0,0.5)'
                        }
                    },
                    axisTick: {
                        show: true,
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value',
                    max: '100',
                    name: '单位:%',
                    nameTextStyle: {
                        // color: '#000',
                        fontSize: 12,
                        left: '0%'
                    },
                    position: 'left',
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        lineStyle: {
                            color: '#333'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f1f1f1'
                        }
                    },
                    axisLabel: {
                        color: '#999',
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    axisTick: {
                        show: true,
                        alignWithLabel: true
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        height: 13,
                        start: 0,
                        bottom: '20px',
                        end: 100
                    },
                    {
                        start: 0,
                        height: 13,
                        bottom: '20px',
                        end: 100
                    }
                ],
                series: [
                    {
                        name: '国标限值',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            normal: {
                                color: '#00CC99',
                                barBorderRadius: [5, 5, 0, 0]
                            }
                        },
                        data: yData
                    },
                    {
                        name: '电流幅值',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            normal: {
                                color: '#FF9900',
                                barBorderRadius: [12, 12, 0, 0]
                            }
                        },
                        data: yData1
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            let _this = this
            _this.$erd.listenTo(_this.$refs.jzxbhylv, element => {
                _this.$nextTick(() => {
                    domID1.style.width = document.getElementById('jzhylv').offsetWidth - 10 + 'px'
                    myChartes.resize()
                })
            })
            setInterval(() => {
                myChartes.resize()
            }, 100)
        }
    }
}
</script>
