<template>
    <div class="pd10" v-loading="loading" element-loading-text="数据加载中">
        <el-row>
            <el-col>
                <el-tabs v-model="activeName" type="border-card" :style="'height:' + vh">
                    <el-form :inline="true" :model="form" class="demo-form-inline">
                        <el-form-item>
                            <Area @click="handleNodeClick" ref="area" class="box" @clickFn="clickFn"></Area>
                        </el-form-item>
                        <!-- <el-form-item label="监测点等级:">
              <el-select
                v-model="form.lineGrade"
                collapse-tags
                placeholder="请选择电压等级"
                style="width: 100%"
              >
                <el-option
                  v-for="item in lineGradeoption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id" 
                >
                </el-option>
              </el-select>
            </el-form-item> -->
                        <el-form-item>
                            <Timeinterval :interval="3" ref="Timeinterval"></Timeinterval>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="queryData">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-tab-pane label="区域暂降热力图分布" name="first">
                        <el-row id="echarts">
                            <div class="wzhi">
                                <el-button type="text" icon="el-icon-download" title="生成图片" @click="download">
                                    下载
                                </el-button>
                            </div>
                            <el-col :span="12" id="zjrlm">
                                <svg-icon v-show="isfanhui" class="back" icon-class="back" @click="fanhui" />
                                <div id="china" style="height: 100%" ref="zjrlm"></div>
                            </el-col>
                            <el-col :span="12" id="zjrlz">
                                <!-- <el-col :style="'height:' + vth + 'px'"> -->
                                <div :style="`height: ${vhh};overflow: hidden`">
                                    <div id="echartzhu" style="height: 100%" ref="zjrlz"></div>
                                </div>
                                <!-- </el-col> -->
                                <!-- <el-row> -->
                                <el-table
                                    stripe
                                    :data="list"
                                    :height="vth"
                                    highlight-current-row
                                    border
                                    class="xshou"
                                    header-cell-class-name="table_header"
                                >
                                    <el-table-column
                                        show-overflow-tooltip
                                        label="供电公司"
                                        prop="gdName"
                                    ></el-table-column>
                                    <el-table-column
                                        label="变电站"
                                        show-overflow-tooltip
                                        prop="subName"
                                    ></el-table-column>
                                    <el-table-column
                                        label="监测点"
                                        show-overflow-tooltip
                                        prop="lineName"
                                    ></el-table-column>
                                    <el-table-column
                                        label="暂降次数"
                                        show-overflow-tooltip
                                        sortable
                                        prop="tail"
                                    ></el-table-column>
                                </el-table>
                                <!-- </el-row> -->
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import yan from '@/assets/commjs/color'

import html2canvas from 'html2canvas'

import * as myEchart from 'echarts'
import { getEventHeatMap } from '@/api/sagSeverity.js'
import { dicData } from '@/assets/commjs/dictypeData'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/TimePicker/index4'
export default {
    name: 'hotmap',
    components: { Area, Timeinterval },
    data() {
        return {
            form: {
                deptIndex: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                lineGrade: '0'
            },
            statisticalType: null,
            geoCoordMap: [],
            zoom: '',
            name: JSON.parse(window.sessionStorage.getItem('Info')).deptName,
            loading: false,
            areaData: [],
            list: [],
            vhh: null,
            lineGradeoption: [
                { id: '0', name: '极重要' },
                { id: '1', name: '重要' },
                { id: '2', name: '普通' },
                { id: '3', name: '不重要' }
            ],
            isfanhui: false,
            sera: '',
            activeName: 'first', //区分是那个节点
            vh: null,
            vth: null,

            allData: [],
            //mapname:'中国',
            jsonName: 'zhonguo',
            provinces: {
                中国: require('@/views/map2/mapData/zhonguo.json'),
                上海: require('@/views/map2/mapData/shanghai.json'),
                河北: require('@/views/map2/mapData/hebei.json'),
                山西: require('@/views/map2/mapData/shanxi.json'),
                内蒙: require('@/views/map2/mapData/neimenggu.json'),
                辽宁: require('@/views/map2/mapData/liaoning.json'),
                吉林: require('@/views/map2/mapData/jilin.json'),
                黑龙江: require('@/views/map2/mapData/heilongjiang.json'),
                江苏: require('@/views/map2/mapData/jiangsu.json'),
                浙江: require('@/views/map2/mapData/zhejiang.json'),
                安徽: require('@/views/map2/mapData/anhui.json'),
                福建: require('@/views/map2/mapData/fujian.json'),
                江西: require('@/views/map2/mapData/jiangxi.json'),
                山东: require('@/views/map2/mapData/shandong.json'),
                河南: require('@/views/map2/mapData/henan.json'),
                湖北: require('@/views/map2/mapData/hubei.json'),
                湖南: require('@/views/map2/mapData/hunan.json'),
                广东: require('@/views/map2/mapData/guangdong.json'),
                广西: require('@/views/map2/mapData/guangxi.json'),
                海南: require('@/views/map2/mapData/hainan.json'),
                四川: require('@/views/map2/mapData/sichuan.json'),
                贵州: require('@/views/map2/mapData/guizhou.json'),
                云南: require('@/views/map2/mapData/yunnan.json'),
                西藏: require('@/views/map2/mapData/xizang.json'),
                陕西: require('@/views/map2/mapData/shanxi1.json'),
                甘肃: require('@/views/map2/mapData/gansu.json'),
                青海: require('@/views/map2/mapData/qinghai.json'),
                宁夏: require('@/views/map2/mapData/ningxia.json'),
                新疆: require('@/views/map2/mapData/xinjiang.json'),
                北京: require('@/views/map2/mapData/beijing.json'),
                天津: require('@/views/map2/mapData/tianjin.json'),
                重庆: require('@/views/map2/mapData/chongqing.json'),
                香港: require('@/views/map2/mapData/xianggang.json'),
                澳门: require('@/views/map2/mapData/aomen.json'),
                台湾: require('@/views/map2/mapData/taiwan.json')
            },
            myChart: null,
            myChartes: ''
        }
    },

    created() {
        this.getclassificationData()
    },
    mounted() {
        ;(this.$refs.Timeinterval.timeOptions = [
            { label: '年份', value: 1 },
            { label: '季度', value: 2 },
            { label: '月份', value: 3 }
            // { label: "周", value: 4 },
            // { label: "自定义", value: 5 },
        ]),
            this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.resizeEchartm()
        this.resizeEchartZ()

        this.queryData()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.zoom = 1 / document.body.style.zoom
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
            this.vh = window.sessionStorage.getItem('appheight') - 10 + 'px'
            this.vhh = window.sessionStorage.getItem('appheight') - 460 + 'px'
            this.vth = window.sessionStorage.getItem('appheight') / 2 - 80 + 'px'
        },
        resizeEchartZ() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('zjrlz'), element => {
                // let  domeId=document.getElementById("ceshi")
                let domeId2 = document.getElementById('echartzhu')
                domeId2.style.width = document.getElementById('zjrlz').offsetWidth - 0 + 'px'
                if (this.myChartes !== '') {
                    this.myChartes.resize()
                }
            })
        },
        resizeEchartm() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('zjrlm'), element => {
                // let  domeId=document.getElementById("ceshi")
                let domeId2 = document.getElementById('china')
                domeId2.style.width = document.getElementById('zjrlm').offsetWidth - 0 + 'px'
                if (this.myChart != null) {
                    this.myChart.resize()
                }
            })
        },
        clickFn(data) {
            this.jsonData = data[0].children
            // console.log(this.jsonData);
        },
        //获取统计类型
        getclassificationData() {
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Report_Type'])

            this.statisticalType = this.classificationData[0]
        },
        // dmo元素里的内容转换为canvas,并将canvas下载为图片
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('echarts'), {
                scale: 2
            }).then(function (canvas) {
                // 创建a标签，实现下载
                var creatIMg = document.createElement('a')
                creatIMg.download = '图表.png' // 设置下载的文件名，
                creatIMg.href = canvas.toDataURL() // 下载url
                // document.body.appendChild(creatIMg);
                creatIMg.click()
                creatIMg.remove() // 下载之后把创建的元素删除
            })
        },
        // 查询
        queryData() {
            this.loading = true
            if (this.name != JSON.parse(window.sessionStorage.getItem('Info')).deptName) {
                this.isfanhui = true
            } else {
                this.isfanhui = false
            }
            let data = {
                deptIndex: this.form.deptIndex,
                lineGrade: null,
                loadType: null,
                manufacturer: null,
                monitorFlag: 2,
                powerFlag: 1,
                reportFlag: 3,
                scale: null,
                searchBeginTime: this.$refs.Timeinterval.timeValue[0],
                searchEndTime: this.$refs.Timeinterval.timeValue[1],
                serverName: '',
                statFlag: true,
                statisticalType: this.statisticalType,
                timeFlag: this.$refs.Timeinterval.intervald == 3 ? 0 : 1
            }
            // this.$refs.area.form.options.forEach((item) => {
            //   console.log(item,'111');
            //   if (item.id == this.form.deptIndex) {
            //     this.$refs.area.form.valueTitle = item.areaName;
            //   }
            // });
            getEventHeatMap(data).then(res => {
                this.allData = res.data.areaValue
                this.geoCoordMap = []
                this.list = []
                if (res.data.eventHeatMapValue != []) {
                    res.data.eventHeatMapValue.forEach(val => {
                        val.forEach(item => {
                            this.list.push(item)
                            // this.geoCoordMap.push({
                            //   name: item.lineName,
                            //   value: [item.lng.toFixed(2), item.lat.toFixed(2), item.tail],
                            // });
                            this.geoCoordMap.push([item.lng, item.lat, item.tail])
                        })
                    })
                } else {
                    return
                }
                this.initEchartMap()
                this.getsagSeevrity()
                this.loading = false
            })
            // this.getMapdata()
        },
        handleNodeClick(data) {
            this.form.deptIndex = data.id
            this.name = data.areaName
            // this.$refs.area.form.options[0].children.forEach((item) => {
            //   item.children.forEach((item1) => {
            //     if (this.name == item1.areaName) {
            //       this.name = item.areaName;
            //     }
            //     item1.children.forEach((item2) => {
            //       if (this.name == item2.areaName) {
            //         this.name = item.areaName;
            //       }
            //     });
            //   });
            // });
        },
        onSubmit() {},
        //获取地图
        initEchartMap() {
            let echarts = require('echarts')
            let mapDiv = document.getElementById('china')
            setTimeout(() => {
                mapDiv.style.width = document.getElementById('zjrlm').offsetWidth - 0 + 'px'

                mapDiv.style.height = window.sessionStorage.getItem('appheight') - 120 + 'px'
            }, 0)
            let obj = {
                name: this.name,
                scatterData: [], // 撒点数据
                mapData: [], // 面板数据
                index: 0 // 0:中国,1:省,2:市场
            }
            myEchart.registerMap(
                obj.name,
                this.provinces[obj.name] == undefined ? this.provinces['中国'] : this.provinces[obj.name]
            )
            this.myChart = myEchart.init(mapDiv)
            this.renderMap(obj)
            window.onresize = () => {
                this.myChart.resize()
            }
            this.myChartClick()
        },
        //渲染地图
        renderMap(obj) {
            let _this = this
            const keyName = obj.name
            let areaData = []
            console.log("🚀 ~ renderMap ~  _this.geoCoordMap:",  _this.geoCoordMap)

            _this.geoCoordMap.map(item => {
                areaData.push(...new Array(3).fill(item))
            })
            let maxNum = 0
            let minNum = 0
            let num = []
            if (areaData != []) {
                areaData.forEach(item => {
                    num.push(item[2])
                })
                for (let i = 0; i < num.length; i++) {
                    if (num[i] > maxNum) {
                        maxNum = num[i]
                    } else if (num[i] < minNum) {
                        minNum = num[i]
                    }
                }
            }
            // setTimeout(() => {
            let option = {
                title: {
                    text: '区域暂降热力图分布',
                    left: 'center',
                    top: '3%'
                },
                aria: {
                    show: true
                },
                // tooltip: {},
                // legend: {
                //   orient: "vertical",
                //   left: 26,
                //   bottom: 40,
                //   data: ["暂降综合评估"],
                // },
                visualMap: {
                    left: 26,
                    bottom: 40,
                    show: true,
                    color: ['#ff0000', '#37b70c'],
                    // min: Math.min(..._this.geoCoordMap.map((item) => item[2])),
                    // max: Math.max(..._this.geoCoordMap.map((item) => item[2])),
                    min: minNum,
                    max: maxNum,
                    calculable: true,
                    textStyle: {
                        color: '#000',
                        fontSize: 12
                    }
                },
                geo: {
                    type: 'map',
                    map: keyName,
                    roam: true,
                    zoom: obj.name == '海南' ? 5 : 1.1,
                    top: obj.name == '海南' ? 1300 : 120,
                    left: obj.name == '海南' ? 700 : 'center',
                    label: {
                        normal: {
                            show: true,
                            fontSize: '14',
                            color: 'rgba(0,0,0,0.7)'
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(51, 69, 129, .8)', //地图背景色
                            borderColor: '#999999',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(147, 135, 148, .2)' // 100% 处的颜色
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            // shadowColor: 'rgba(255, 255, 255, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#ccc',
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            borderWidth: 0
                        }
                    }
                },
                // series: [
                //   {
                //     name: "暂降综合评估",
                //     type: "scatter",
                //     coordinateSystem: "geo",
                //     data: areaData,

                //     itemStyle: {
                //       normal: {
                //         color: "red",
                //         opacity: 0.3,
                //       },
                //     },
                //   },
                // ],
                series: [
                    {
                        mapType: 'nanshan',
                        top: 'center',
                        left: 'center',
                        width: '65%',
                        height: '95%',

                        name: 'AQI',
                        type: 'heatmap',
                        coordinateSystem: 'geo',
                        blurSize: 40,
                        data: areaData
                        // 鼠标移入
                    }
                ]
            }
            this.myChart.setOption(option, true)
            window.echartsArr.push(this.myChart)
            _this.$erd.listenTo(_this.$refs.zjrlm, element => {
                _this.$nextTick(() => {
                    // DomeId.style.width =document.getElementById("zjpg").offsetWidth-0+'px'
                    _this.myChart.resize()
                })
            })
            setTimeout(() => {
                this.myChart.resize()
            }, 100)
            // }, 0);
        },
        //返回
        fanhui() {
            this.isfanhui = false
            this.$refs.area.form.valueTitle = JSON.parse(window.sessionStorage.getItem('Info')).deptName
            ;(this.form.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId),
                (this.name = JSON.parse(window.sessionStorage.getItem('Info')).deptName)
            this.queryData()
            // let data = {
            //   deptIndex: this.form.deptIndex,
            //   lineGrade: null,
            //   loadType: null,
            //   manufacturer: null,
            //   monitorFlag: 2,
            //   powerFlag: 1,
            //   reportFlag: 3,
            //   scale: null,
            //   searchBeginTime: this.$refs.Timeinterval.timeValue[0],
            //   searchEndTime: this.$refs.Timeinterval.timeValue[1],
            //   serverName: "",
            //   statFlag: true,
            //   statisticalType: this.statisticalType,
            //   timeFlag: this.$refs.Timeinterval.intervald == 3 ? 0 : 1,
            // };
            // getEventHeatMap(data).then((res) => {
            //   this.allData = res.data.areaValue;
            //   this.geoCoordMap = [];
            //   this.list = [];
            //   if (res.data.eventHeatMapValue != []) {
            //     res.data.eventHeatMapValue.forEach((val) => {
            //       val.forEach((item) => {
            //         this.list.push(item);
            //         // this.geoCoordMap.push({
            //         //   name: item.lineName,
            //         //   value: [item.lng.toFixed(2), item.lat.toFixed(2), item.tail],
            //         // });
            //         this.geoCoordMap.push([item.lng, item.lat, item.tail]);
            //       });
            //     });
            //   }
            //   this.initEchartMap();
            //   this.getsagSeevrity();
            //   // this.loading = false;
            // });
        },
        //地图点击事件
        myChartClick() {
            // debugger

            this.myChart.on('click', params => {
                // alert(2122)
                // debugger
                // const { name } = params;
                var name = params.name //地区name
                var mapCode = this.provinces[name] //地区的json数据
                this.jsonData.forEach(item => {
                    if (name == item.name) {
                        this.form.deptIndex = item.id
                        this.$refs.area.form.valueTitle = item.name

                        this.name = item.name
                        let data = {
                            deptIndex: this.form.deptIndex,
                            lineGrade: null,
                            loadType: null,
                            manufacturer: null,
                            monitorFlag: 2,
                            powerFlag: 1,
                            reportFlag: 3,
                            scale: null,
                            searchBeginTime: this.$refs.Timeinterval.timeValue[0],
                            searchEndTime: this.$refs.Timeinterval.timeValue[1],
                            serverName: '',
                            statFlag: true,
                            statisticalType: this.statisticalType,
                            timeFlag: this.$refs.Timeinterval.intervald == 3 ? 0 : 1
                        }
                        this.isfanhui = false
                        this.loading = true
                        getEventHeatMap(data).then(res => {
                            this.allData = res.data.areaValue
                            this.geoCoordMap = []
                            this.list = []
                            if (res.data.eventHeatMapValue != []) {
                                res.data.eventHeatMapValue.forEach(val => {
                                    val.forEach(item => {
                                        this.list.push(item)
                                        // this.geoCoordMap.push({
                                        //   name: item.lineName,
                                        //   value: [item.lng.toFixed(2), item.lat.toFixed(2), item.tail],
                                        // });
                                        this.geoCoordMap.push([item.lng, item.lat, item.tail])
                                    })
                                    this.$refs.area.form.valueTitle = name
                                })
                            }
                            // this.initEchartMap();
                            this.getsagSeevrity()
                            if (name != '中国') {
                                this.isfanhui = true
                            }
                            let obj = {
                                name,
                                scatterData: [],
                                mapData: [],
                                index: 0
                            }
                            myEchart.registerMap(name, mapCode)
                            this.renderMap(obj)
                            this.loading = false
                        })
                        // return;
                    } else {
                        let obj = {
                            name,
                            scatterData: [],
                            mapData: [],
                            index: 0
                        }
                        // if (params.seriesType === "map" ) {
                        if (name != '中国') {
                            this.isfanhui = true
                        }
                        myEchart.registerMap(name, mapCode)
                        this.renderMap(obj)
                        this.loading = false
                    }
                })
                // }
            })
        },
        //获取柱状图
        getsagSeevrity() {
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let xdata = []
            let xVal = []

            var maxNum = this.allData[0] == undefined ? '0' : this.allData[0].count
            for (let i = 0; i < this.allData.length; i++) {
                if (this.allData[i] > maxNum) {
                    maxNum = this.allData[i]
                }
            }
            this.allData.forEach(item => {
                xdata.push(item.name)
                if (item.count == 0) {
                    item.count = maxNum * 0.01
                }
                xVal.push(item.count)
            })
            const echarts = require('echarts')
            let DomeId = document.getElementById('echartzhu')
            setTimeout(() => {
                DomeId.style.width = window.sessionStorage.getItem('appwidth') / 2 - 25 + 'px'
                DomeId.style.height = window.sessionStorage.getItem('appheight') - 460 + 'px'
            }, 0)
            var myChartes = echarts.init(DomeId)
            this.myChartes = myChartes
            myChartes.clear()
            let option = {
                title: {
                    text: '区域暂降次数',
                    left: '45%',
                    top: '15',
                    textStyle: {
                        color: echartsColor.WordColor,
                        fontSize: yan.EchartObject.titleNamefontSize1
                    }
                },
                // legend: {
                //   data: ["暂降次数"],
                //   top: "10px",
                //   right: "10px",
                //   textStyle: {
                //     color: echartsColor.WordColor,
                //   },
                // },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',

                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0,
                    formatter: function (params) {
                        var tips = ''
                        tips += params[0].name + '</br/>'
                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == maxNum * 0.01) {
                                tips += params[i].seriesName + 0 + '<br/>'
                            } else {
                                tips += params[i].seriesName + ':' + params[i].value + '<br/>'
                            }
                        }
                        return tips
                    }
                },
                grid: yan.EchartObject.grid3,
                dataZoom: yan.EchartObject.dataZoom,
                color: echartsColor.FigureColor,
                xAxis: {
                    type: 'category',
                    name: '(区域)',
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            fontFamily: yan.EchartObject.fontFamily,
                            color: echartsColor.WordColor,
                            fontSize: yan.EchartObject.xNamefontSize
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    data: xdata
                },

                yAxis: {
                    type: 'value',
                    name: '暂降次数',
                    minInterval: 20,
                    axisLabel: {
                        color: echartsColor.WordColor,
                        fontSize: yan.EchartObject.yNamefontSize
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                series: [
                    {
                        name: '暂降次数',
                        data: xVal,
                        barWidth: 30,
                        barMinHeight: 5,
                        barMaxWidth: yan.EchartObject.barMaxWidth,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    if (params.value == maxNum * 0.01) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#999999'
                                                }
                                            ],
                                            false
                                        )
                                    } else {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: echartsColor.FigureColor[0] // 0% 处的颜色
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            distance: 5,
                            color: echartsColor.WordColor,
                            formatter: function (params) {
                                var val = ''
                                if (params.value == maxNum * 0.01) {
                                    val = 0
                                } else {
                                    val = params.value
                                }
                                return val
                            },
                            fontSize: 12
                        }
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize()
            }, 100)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.zjrlz, element => {
                _this.$nextTick(() => {
                    DomeId.style.width = document.getElementById('zjrlz').offsetWidth - 0 + 'px'
                    myChartes.resize()
                })
            })

            // window.onresize = function() {
            //   myChart.resize();
            // };

            // this.$nextTick(() => {
            //   this.initEchartMap();
            // });
        }
    }
}
</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;
}
.block {
    margin-top: 10px;
}
.juyu {
    border: 1px solid #ddd;
}
.xshou {
    cursor: pointer;
}

.wzhi {
    position: absolute;
    //font-weight: 550;
    // margin-top: 10px;
    top: 0;
    right: 20px;
    z-index: 1;
    font-size: 14px;
}
</style>
<style lang="scss" scoped>
.back {
    position: absolute;
    top: 25px;
    z-index: 999999999;
    margin-right: 10px;
    margin-left: auto;
    font-size: 29px;
    line-height: 32px;
    color: $themeColor;
    cursor: pointer;
    &:hover {
        color: $themeColor;
        opacity: 0.9;
    }
}
</style>
