<template>
    <div>
        <!-- 内容 -->
        <div id="main" :style="`width:calc(50vw - 230px);height:100%;`"></div>
    </div>
</template>

<script>
import { getCoords } from '@/api/monitoringpointStatistics/echart'
import * as echarts from 'echarts'
import 'echarts-gl'
require('echarts/lib/chart/bar.js')
require('echarts/lib/component/tooltip.js')
require('echarts/lib/component/title.js')

export default {
    props: {
        item: {
            default: ['', '']
        }
    },
    name: 'WaterMeter',
    data() {
        return {
            loading: true,
            vh: undefined,
            vw: undefined,
            zoom: '', //图表焦点校验
            //密度图模拟数据
            trdata: [],
            myChart: null
        }
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 660 + 'px'
            this.zoom = 1 / document.body.style.zoom
            if (this.myChart) {
                this.myChart.resize()
            }
        },
        // 查询
        query() {
            this.loading = true
            let form = {
                lineIndex: this.$store.state.user.lineID,
                startTime: this.item[0],
                endTime: this.item[1]
            }
            getCoords(form).then(res => {
                this.trdata = res.data
                this.chartthreenD()
            })
        },
        chartthreenD() {
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            var xx
            var yy
            var zz
            var datalistmd = []
            for (var i = 0; i < this.trdata.length; i++) {
                xx = this.trdata[i].x
                yy = this.trdata[i].y
                zz = this.trdata[i].z
                datalistmd[i] = [xx, yy, zz]
            }
            let main = document.getElementById('main')
            this.myChart = echarts.init(main)
            setTimeout(() => {
                main.style.height = `440px`
            }, 0)
            var option = {
                backgroundColor: '#fff',
                tooltip: {
                    trigger: 'axis'
                },
                title: {
                    text: '暂降密度图',
                    x: 'center'
                },
                toolbox: {
                    show: true,
                    feature: {
                        // dataView: { show: true },
                        // dataZoom: { show: true },
                        //restore: { show: true },
                        // saveAsImage: { show: true },
                        myFull: {
                            show: true,
                            title: '全屏查看',
                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                            onclick: e => {
                                this.fullFlag = true
                                let element = document.getElementById('main')

                                if (element.requestFullScreen) {
                                    // HTML W3C 提议
                                    element.requestFullScreen()
                                } else if (element.msRequestFullscreen) {
                                    // IE11
                                    element.msRequestFullScreen()
                                } else if (element.webkitRequestFullScreen) {
                                    // Webkit (works in Safari5.1 and Chrome 15)
                                    element.webkitRequestFullScreen()
                                } else if (element.mozRequestFullScreen) {
                                    // Firefox (works in nightly)
                                    element.mozRequestFullScreen()
                                }
                                // 退出全屏
                                if (element.requestFullScreen) {
                                    document.exitFullscreen()
                                } else if (element.msRequestFullScreen) {
                                    document.msExitFullscreen()
                                } else if (element.webkitRequestFullScreen) {
                                    document.webkitCancelFullScreen()
                                } else if (element.mozRequestFullScreen) {
                                    document.mozCancelFullScreen()
                                }
                            }
                        }
                    }
                },
                visualMap: {
                    max: 20,
                    show: false,
                    inRange: {
                        color: ['#313695', '#00BB00', '#ff8000', '#a50026']
                    }
                },
                xAxis3D: {
                    type: 'category',
                    name: '剩余电压(%)',
                    data: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'],
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    }
                },
                yAxis3D: {
                    type: 'category',
                    name: '持续时间(cyc)',
                    data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc'],
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                zAxis3D: {
                    type: 'value',
                    splitNumber: 10,
                    minInterval: 10,
                    name: '次数'
                },
                grid3D: {
                    boxWidth: 200,
                    boxDepth: 80,
                    light: {
                        main: {
                            intensity: 1.2
                        },
                        ambient: {
                            intensity: 0.3
                        }
                    }
                },
                series: [
                    {
                        type: 'bar3D',
                        data: datalistmd.map(function (item) {
                            return {
                                value: [item[0], item[1], item[2]]
                            }
                        }),
                        shading: 'realistic',
                        label: {
                            show: false,
                            textStyle: {
                                fontSize: 16,
                                borderWidth: 1
                            }
                        },

                        itemStyle: {
                            opacity: 1
                        },
                        emphasis: {
                            label: {
                                textStyle: {
                                    fontSize: 20,
                                    color: '#900'
                                }
                            },
                            itemStyle: {
                                color: '#900'
                            }
                        }
                    }
                ]
            }
            //   var option = {
            //       title: {
            //               text: '3D堆叠柱状图',
            //               x: 'center'
            //           },
            //         color: ['#5470c6','#7ed3f4','#ffdc60','#9fe080','#0fa4ff','#1e1e1e','#25a0da','#4575b4','#313695','#4575b4','#313695'],
            //         tooltip: {},
            //         xAxis3D: {
            //             type: 'category',
            //             data: ['1111', '2222','3333', '4444','5555', '6666'],
            //             axisLine:{
            //                 lineStyle:{
            //                     color:'black',
            //                     width:2
            //                 }
            //             },
            //         },
            //         yAxis3D: {
            //             type: 'category',
            //             data: [''],
            //             axisLine:{
            //                 lineStyle:{
            //                   width:1,
            //                   color:'black',
            //                 }
            //             },
            //         },
            //         zAxis3D: {
            //             type: 'value',
            //             axisLine:{
            //                 lineStyle:{
            //                     color:'black',
            //                     width:1
            //                 }
            //             },
            //         },
            //         grid3D: {
            //             boxWidth: 200,
            //             boxDepth: 80,
            //             light: {
            //             main: {
            //                 intensity: 1.2
            //             },
            //             ambient: {
            //                 intensity: 0.3
            //             }
            //             }
            //             // viewControl: {//可以控制整个柱状图场景旋转平移等,自行代数数据试试
            //             //     alpha: 1,
            //             //     beta: 1,
            //             //     minAlpha: 1,//x轴旋转
            //             //     maxAlpha: 1,
            //             //     minBeta: 1,//y轴旋转
            //             //     maxBeta: 1
            //             // }
            //         },
            //         series: [{
            //             type: 'bar3D',
            //             name:'数据',
            //             barSize: 10,//柱子大小
            //             data: [
            //                 [0, 0, 5],
            //                 [2, 0, 4],
            //                 [4, 0, 6],
            //             ],
            //             stack: 'stack',
            //             shading: 'lambert',
            //             emphasis: {
            //                 label: {
            //                     show: true
            //                 }
            //             }
            //         }, {
            //             type: 'bar3D',
            //             name:'数据',
            //             barSize: 10,
            //             data: [
            //                 [1, 0, 10],
            //                 [3, 0, 6],
            //                 [5, 0, 12],
            //             ],
            //             // stack: 'stack',
            //             shading: 'lambert',
            //             emphasis: {
            //                 label: {
            //                     show: true
            //                 }
            //             }
            //         }]
            //     };
            this.myChart.setOption(option)
            window.echartsArr.push(this.myChart)
            setTimeout(() => {
                this.myChart.resize()
                this.loading = false
            }, 400)
        }
    }
}
</script>

<style scoped></style>
