yclw/src/views/groupPage/baseMap/components/EchartsMap.vue

<template>
  <div class="EchartsMap" v-if="show">
    <div class="chart" ref="middleMap"></div>
    <!-- <div class="back" v-show="backShow" @click="backClick">〈 返回</div> -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'
//引入map相关json配置
import mapJson from './mapJson/config.json'
import mainMap from './mapJson/china.json'
import moment from 'moment'
export default {
  name: 'EchartsMap',
  props: {
    show: {}
  },
  data() {
    return {
      groupAttr: null,
      //项目数据信息
      projectChart: null,
      mdata: null,
      //集团以及区域数据信息
      groupChart: null,
      mapname: null, //子地图json数据
      mapData: [], //地图图上数据
      mapBuildingData: [], //地图建管项目
      mapEPCData: [], //地图EPC项目
      mapSuspendData: [], //地图暂停项目
      mapNohandedData: [], //地图未移交项目
      isSilent: null, //图形是否不响应和触发鼠标事件
      mapDistance: null, //地图视角距离主体的距离
      mapBoxWidth: null, //三维地图在三维场景中的宽度
      offset: null, //三维地图中心偏移
      clickSymbol: null, //地图点击标识,0为区域点击,1为项目点击
      domImg: null, //地图背景图片
      //
      backShow: false,
      clickPermissions: false,

      //防抖
      timeout: null,
      //标题栏组件引用
      headerComp: null
    }
  },
  computed: {
    groupData() {
      return this.$store.state.bigScreen.groupProject
    },
    //区域名称存储
    groupName() {
      return this.$store.state.bigScreen.groupName
    }
  },
  watch: {
    // show: {
    //   handler(n, o) {
    //     if (n)
    //       this.$nextTick(() => {
    //         this.getData()
    //       })
    //   },
    //   immediate: true
    // },
    groupData: {
      handler(val) {
        this.$nextTick(() => {
          this.getData()
        })
      },
      deep: true
    },
    groupName: {
      handler(val) {
        this.$nextTick(() => {
          this.getData()
        })
      },
      deep: true
    }
  },
  mounted() {
    this.resizeChart()
  },
  methods: {
    resizeChart() {
      //图表大小自适应
      window.addEventListener('resize', () => {
        this.$nextTick(() => {
          this.getData()
        })
      })
    },
    debounce(fn, wait) {
      if (this.timeout !== null) clearTimeout(this.timeout)
      this.timeout = setTimeout(fn, wait)
    },
    getData() {
      this.debounce(() => {
        if (!this.$refs.middleMap) return
        this.destroyChart()
        // if(this.groupAttr!==true){
        //     this.showWorkArea()
        // }else{
        //   this.composeScanInfo(this.groupInfoData)
        // }
        this.composeScanInfo(this.groupData)
      }, 650)
    },
    /**
     * 项目信息模块
     */
    //获取工区数据
    async showWorkArea() {
      let mapData1 = [] //存储未开工信息
      let mapData2 = [] //存储在建信息
      let mapData3 = [] //存储完工信息
      let mapData4 = [] //存储停工信息
      let mapDataScan = [] //存储今日扫码信息
      const res = await GetBuildAreaStatistic_api({ prjId: this.pData.prjId })
      const { code, result } = res.data
      if (code === 1) {
        let arr = []
        result.forEach((item) => {
          arr.push(item.builtStatus)
          switch (item.builtStatus) {
            //无状态情况特殊处理，归于未施工
            case null:
              mapData1.push({
                name: item.zdwName,
                value: [item.longitude, item.latitude, 1],
                designLength: item.tfPipeLength,
                lengthPercentNew: item.lengthPercentNew
              })
              break
            case 1:
              mapData1.push({
                name: item.zdwName,
                value: [item.longitude, item.latitude, 1],
                designLength: item.tfPipeLength,
                lengthPercentNew: item.lengthPercentNew
              })
              break
            case 2:
              mapData2.push({
                name: item.zdwName,
                value: [item.longitude, item.latitude, 2],
                designLength: item.tfPipeLength,
                lengthPercentNew: item.lengthPercentNew
              })
              break
            case 3:
              mapData3.push({
                name: item.zdwName,
                value: [item.longitude, item.latitude, 3],
                designLength: item.tfPipeLength,
                lengthPercentNew: item.lengthPercentNew
              })
              break
            case 4:
              mapData4.push({
                name: item.zdwName,
                value: [item.longitude, item.latitude, 4],
                designLength: item.tfPipeLength,
                lengthPercentNew: item.lengthPercentNew
              })
              break
          }
          if (item.todayScan != null && item.todayScan > 0) {
            mapDataScan.push({
              name: item.zdwName,
              value: [item.longitude, item.latitude, 5],
              designLength: item.tfPipeLength,
              lengthPercentNew: item.lengthPercentNew
            })
          }
        })
        this.showMapInfo(
          mapData1,
          mapData2,
          mapData3,
          mapData4,
          mapDataScan,
          mapData1.length,
          mapData2.length,
          mapData3.length,
          mapData4.length,
          mapDataScan.length
        )
      } else {
        this.$message.error('工区信息获取失败')
      }
    },
    //显示地图信息
    // showMapInfo(mapData1, mapData2, mapData3, mapData4, mapDataScan, data1, data2, data3, data4, dataScan) {
    //   var that = this
    //   let mapname = null
    //   let mapRegion = null
    //   //地图数据加载
    //   let match = (name) => mapJson.regionData.filter((o) => o.name == name)
    //   if (match(that.pData.projectName.substring(0, 2)).length > 0) {
    //     mapname = require(`@/components/HomePage${match(that.pData.projectName.substring(0, 2))[0].json}`)
    //   }
    //   if (that.pData.projectName.indexOf('宜昌') != -1) {
    //     mapname = require('@/components/HomePage/mapJson/HB-YC.json') //地图json数据
    //   }
    //   if (mapname == null) return
    //   //初始加载
    //   this.projectChart = echarts.init(this.$refs.middleMap)
    //   this.projectChart.showLoading('default', {
    //     text: '统计中，请稍候...',
    //     maskColor: '#2957A2',
    //     textColor: '#fff',
    //     fontSize: 14,
    //     zlevel: 9999
    //   })
    //   let domImg = document.createElement('img')
    //   domImg.crossOrigin = 'anonymous'
    //   //   domImg.src = require('@/components/HomePage/images/projectMapImage.png')
    //   setTimeout(function () {
    //     mapInit()
    //   }, 1000)
    //   //加载方法
    //   let mapInit = () => {
    //     echarts.registerMap('mainMap', mapname)
    //     this.projectChart.hideLoading()
    //     var option = {
    //       backgroundColor: 'transparent',
    //       title: {
    //         top: 20,
    //         text: mapRegion,
    //         subtext: '',
    //         x: 'right',
    //         textStyle: {
    //           color: '#fff',
    //           fontWeight: 500,
    //           fontSize: 14
    //         }
    //       },
    //       legend: {
    //         orient: 'vertical',
    //         left: 0,
    //         bottom: 20,
    //         data: [
    //           {
    //             name: '未开工：' + data1 + '个'
    //           },
    //           {
    //             name: '施工中：' + data2 + '个'
    //           },
    //           {
    //             name: '已完工：' + data3 + '个'
    //           },
    //           {
    //             name: '停   工：' + data4 + '个'
    //           },
    //           {
    //             name: '今日扫码：' + dataScan + '个'
    //           }
    //         ],
    //         inactiveBorderWidth: 0,
    //         itemStyle: {
    //           borderWidth: 0,
    //           opacity: 1
    //         },
    //         textStyle: {
    //           color: '#fff'
    //         }
    //       },
    //       tooltip: {
    //         enterable: true,
    //         backgroundColor: 'rgba(0,2,89,0.8)',
    //         triggerOn: 'mousemove',
    //         borderWidth: 0,
    //         formatter: function (params) {
    //           var showData = params['data']
    //           if (showData) {
    //             return `<div><div style="color:#fff;float:left">${
    //               showData.name +
    //               '<br>设计里程：' +
    //               (that.setNullAndUndefinedEmpty(showData.designLength) / 1000).toFixed(3) +
    //               'km<br>实际施工百分比：' +
    //               that.setNullAndUndefinedEmpty(showData.lengthPercentNew) +
    //               '%'
    //             }</div></div>`
    //           } else {
    //             return ``
    //           }
    //         }
    //       },
    //       geo: {
    //         map: 'mainMap',
    //         aspectScale: 0.75,
    //         layoutCenter: ['50%', '50%'],
    //         layoutSize: '90%',
    //         silent: true,
    //         roam: true,
    //         z: 0,
    //         itemStyle: {
    //           areaColor: {
    //             image: domImg,
    //             repeat: 'repeat'
    //           },
    //           shadowColor: 'rgba(0, 0, 0, 0.7)',
    //           shadowBlur: 0,
    //           shadowOffsetX: 0,
    //           shadowOffsetY: 5,
    //           borderColor: 'rgba(0, 0, 0, 0.7)',
    //           borderWidth: 0.5,
    //           opacity: 1
    //         },
    //         emphasis: {
    //           areaColor: '#2AB8FF',
    //           borderWidth: 1,
    //           color: 'red',
    //           label: {
    //             show: false
    //           }
    //         }
    //       },
    //       series: [
    //         {
    //           name: '未开工：' + data1 + '个',
    //           type: 'scatter',
    //           coordinateSystem: 'geo',
    //           itemStyle: {
    //             color: '#FFFFFF',
    //             borderWidth: 1,
    //             borderColor: '#696969'
    //           },
    //           symbol: 'circle',
    //           zlevel: 3,
    //           data: mapData1
    //         },
    //         {
    //           name: '施工中：' + data2 + '个',
    //           type: 'scatter',
    //           coordinateSystem: 'geo',
    //           itemStyle: {
    //             color: '#00FFFF',
    //             borderWidth: 1,
    //             borderColor: '#696969'
    //           },
    //           symbol: 'circle',
    //           zlevel: 3,
    //           data: mapData2
    //         },
    //         {
    //           name: '已完工：' + data3 + '个',
    //           type: 'scatter',
    //           coordinateSystem: 'geo',
    //           itemStyle: {
    //             color: '#08CA5F',
    //             borderWidth: 1,
    //             borderColor: '#696969'
    //           },
    //           symbol: 'circle',
    //           zlevel: 3,
    //           data: mapData3
    //         },
    //         {
    //           name: '停   工：' + data4 + '个',
    //           type: 'scatter',
    //           coordinateSystem: 'geo',
    //           itemStyle: {
    //             color: '#EA4551',
    //             borderWidth: 1,
    //             borderColor: '#696969'
    //           },
    //           symbol: 'circle',
    //           zlevel: 3,
    //           data: mapData4
    //         },
    //         {
    //           name: '今日扫码：' + dataScan + '个',
    //           type: 'effectScatter',
    //           coordinateSystem: 'geo',
    //           rippleEffect: {
    //             scale: 5,
    //             brushType: 'stroke'
    //           },
    //           showEffectOn: 'render',
    //           itemStyle: {
    //             color: '#E2F039'
    //           },
    //           label: {
    //             color: '#fff'
    //           },
    //           symbol: 'circle',
    //           data: mapDataScan,
    //           zlevel: 3
    //         }
    //       ]
    //     }
    //     this.projectChart.resize()
    //     this.projectChart.setOption(option, {
    //       notMerge: true
    //     })
    //     //图表大小自适应
    //     window.addEventListener('resize', () => {
    //       this.projectChart.resize()
    //     })
    //   }
    // },
    //组装施工数据
    composeScanInfo(result) {
      //清空存储
      this.mapBuildingData.splice(0, this.mapBuildingData.length)
      this.mapEPCData.splice(0, this.mapEPCData.length)
      this.mapSuspendData.splice(0, this.mapSuspendData.length)
      this.mapNohandedData.splice(0, this.mapNohandedData.length)
      result.forEach((item) => {
        let median = { name: item.prjName, value: [item.longitude, item.latitude], datas: item }
        this.mapBuildingData.push(median)
        if (item.type == '建管/EPC') {
          let median = { name: item.prjName, value: [item.longitude, item.latitude], datas: item }
          this.mapEPCData.push(median)
        }
        if (item.stage == '暂停阶段') {
          let median = { name: item.prjName, value: [item.longitude, item.latitude], datas: item }
          this.mapSuspendData.push(median)
        }
        if (item.type == '未移交') {
          let median = { name: item.prjName, value: [item.longitude, item.latitude], datas: item }
          this.mapNohandedData.push(median)
        }
      })
      // //加载空数据防止图上数据下陷
      this.mapBuildingData.push({ name: '', value: [0, 0], datas: {} })
      this.mapEPCData.push({ name: '', value: [0, 0], datas: {} })
      this.mapSuspendData.push({ name: '', value: [0, 200], datas: {} })
      this.mapNohandedData.push({ name: '', value: [0, 0], datas: {} })
      //地图json数据加载
      this.getMapJsonData()
    },
    //地图json数据
    getMapJsonData() {
      this.mapData = []
      //地图json数据
      if (this.groupName === '三峡发展') {
        // if(this.groupName==null){
        this.mapname = mainMap
        // this.userBindInfo.forEach(item=>{
        //     if(item.pid=="1"){
        //         if(item.orgName.substring(0,2)=='上游'){
        // this.mapData.push({"name":"云南省","value":{'orgId':item.orgID,'showName':item.groupName+"/"+item.orgName}})
        // this.mapData.push({"name":"贵州省","value":{'orgId':item.orgID,'showName':item.groupName+"/"+item.orgName}})
        // this.mapData.push({"name":"重庆市","value":{'orgId':item.orgID,'showName':item.groupName+"/"+item.orgName}})
        //         }
        //         else{
        //             this.mapData.push({"name":item.orgName.substring(0,3),"value":{'orgId':item.orgID,'showName':item.groupName+"/"+item.orgName}})
        //         }
        //     }
        // })
        this.mapname.features.map((item) => {
          const { name } = item.properties
          const province = name.substring(0, 2)
          if (
            province === '四川' ||
            province === '重庆' ||
            province === '云南' ||
            province === '贵州' ||
            province === '湖南' ||
            province === '湖北' ||
            province === '江西' ||
            province === '安徽' ||
            province === '浙江' ||
            province === '江苏' ||
            province === '长江'
          ) {
            this.mapData.push({
              name: name,
              height: province !== '长江' ? 10 : 11,
              itemStyle: {
                color: province !== '长江' ? '#40426B' : '#fff',
                borderColor: '#000',
                borderWidth: province !== '长江' ? 2 : 0
              },
              label: {
                show: province !== '长江' ? true : false,
                color: '#fff',
                fontSize: 14,
                fontWeight: 'bold'
              },
              emphasis: { label: { fontSize: 16, fontWeight: 'bold', color: '#fff' } }
            })
          }
        })
        this.clickSymbol = 1
        this.isSilent = true
        this.mapDistance = 320
        this.mapBoxWidth = 550
        this.offset = 40
      } else {
        let match = (name) => mapJson.groupData.filter((o) => o.name == name)
        if (match(this.groupName.substring(0, 2)).length > 0) {
          this.mapname = require(`@/views/groupPage/baseMap/components${match(this.groupName.substring(0, 2))[0].json}`)
        }
        this.clickSymbol = 1
        this.isSilent = true
        this.mapDistance = 320
        this.mapBoxWidth = 200
        this.offset = 0
        this.mapData = []
      }
      //地图初始化
      this.mapInit()
    },
    //地图初始化
    mapInit() {
      var that = this
      //容器加载
      this.groupChart = echarts.init(this.$refs.middleMap)
      // let EPCImg = `path://M 20 17 Z M 22.93 3.06 a 20 20 0 1 0 20 20 A 20 20 0 0 0 22.93 3.06 Z M 29 33 H 17 V 13 h 12 v 4 h -8 v 4 h 8 v 4 H 21 v 4 h 8 Z Z Z M 22 43 h 2.13 v 39 h -2.13 z M 18.26 86.27 a 4.67 4.67 0 1 0 9.34 0 a 4.67 4.67 0 1 0 -9.34 0 z`
      // let PRJImg = `path://M 20 17 Z M 22.93 3.06 a 20 20 0 1 0 20 20 A 20 20 0 0 0 22.93 3.06 Z M 22 43 h 2.13 v 39 h -2.13 z M 18.26 86.27 a 4.67 4.67 0 1 0 9.34 0 a 4.67 4.67 0 1 0 -9.34 0 z`
      let img =
        'path://M839.68 337.8176L512 665.3952 184.32 337.8176 512 0l327.68 337.8176z M384 956.5184a128 67.4816 0 1 0 256 0 128 67.4816 0 1 0-256 0Z M496.64 635.1872h30.72V915.456h-30.72z'
      this.groupChart.showLoading('default', {
        text: '统计中，请稍候...',
        maskColor: 'transparent',
        textColor: '#fff',
        fontSize: 14,
        zlevel: 9999
      })
      //地图背景图预加载
      let domImg = document.createElement('img')
      domImg.crossOrigin = 'anonymous'
      domImg.src = require('@/views/groupPage/images/mapbj.png')

      function tooltipCustom(toolTipSource) {
        if (!toolTipSource) {
          return ''
        }
        if (!toolTipSource.body.data.datas) return
        const data = toolTipSource.body.data.datas
        let header = `<div class="echart-tooltip-header"><div class="name" title=${data.type}>${data.type}</div><div class="status">${data.stage}</div></div>`
        let body = []
        body.push(
          `<div class="echart-tooltip-body-item"><div class="name">项目名称：</div><div class="value" title=${toolTipSource.body.name}>${toolTipSource.body.name}</div></div>`
        )
        body.push(
          `<div class="echart-tooltip-body-item"><div class="name">开工时间：</div><div class="value">${
            data.realBeginTime !== '/' ? moment(data.realBeginTime).format('YYYY-MM-DD') : data.realBeginTime
          }</div></div>`
        )
        body.push(
          `<div class="echart-tooltip-body-item"><div class="name">计划工期：</div><div class="value">${
            data.planEndTime !== '/' ? moment(data.planEndTime).format('YYYY-MM-DD') : data.planEndTime
          }</div></div>`
        )
        body.push(
          `<div class="echart-tooltip-body-item"><div class="name">投资总额：</div><div class="value" title=${data.planInvestment}>${data.planInvestment}亿</div></div>`
        )
        body.push(
          `<div class="echart-tooltip-body-item"><div class="name">建设地点：</div><div class="value" title=${data.city}>${data.city}</div></div>`
        )
        return `<div class="echart-tooltip-wrap">
                    ${header}
                    <div class="echart-tooltip-body">
                        ${body.join('')}
                    </div>
                </div>`
      }
      let viewControl = {
        autoRotate: true, //是否自动旋转
        autoRotateSpeed: 5, //旋转速度
        autoRotateAfterStill: 10, //在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。
        alpha: 40, //上下旋转的角度
        maxBeta: 15, //沿y轴旋转的角度，设置Infinity控制其一直旋转
        distance: that.mapDistance, //地图视角 控制初始大小
        // minDistance: 0,
        center: [that.offset, 0, 0]
      }
      var option
      let mapInitialize = () => {
        echarts.registerMap('riverBasin', this.mapname)
        this.groupChart.hideLoading()
        //地图背景图
        //配置项
        option = {
          backgroundColor: 'transparent',
          geo3D: {
            map: 'riverBasin',
            show: false,
            silent: that.isSilent,
            boxWidth: that.mapBoxWidth, //三维地图在三维场景中的宽度
            viewControl: viewControl,
            zlevel: -10
          },
          tooltip: {
            enterable: true,
            className: 'echart-tooltip-content',
            triggerOn: 'mousemove',
            backgroundColor: 'transparent',
            formatter(params) {
              return tooltipCustom({ body: params })
            }
          },
          series: [
            {
              type: 'map3D',
              name: this.groupName,
              map: 'riverBasin',
              silent: that.isSilent,
              regionHeight: 2,
              boxWidth: that.mapBoxWidth, //三维地图在三维场景中的宽度
              roam: true,
              itemStyle: {
                // color:'rgb(14,105,174)',
                color: 'rgb(14,105,120)',
                opacity: 1,
                borderWidth: 1,
                borderColor: '#0B496C'
              },
              emphasis: {
                label: {
                  show: false
                }
              },
              viewControl: viewControl,
              shading: 'realistic',
              realisticMaterial: {
                //纹理材质
                detailTexture: domImg,
                textureTiling: 1
              },
              // shading: 'color',
              light: {
                main: {
                  color: '#fff', //光照颜色#E4F7FE
                  intensity: 5.2, //光照强度
                  shadowQuality: 'high', //阴影亮度
                  shadow: true, //是否显示阴影
                  // alpha: 90,
                  beta: 45
                },
                ambient: {
                  intensity: 0.3
                }
              },
              // postEffect: {
              //   enable: true,
              //   bloom: {
              //     enable: false
              //   },
              //   SSAO: {
              //     enable: true,
              //     quality: 'medium',
              //     radius: 10,
              //     intensity: 0.2
              //   }
              // },
              zlevel: 1,
              data: this.mapData
            },
            {
              name: '建管项目',
              type: 'scatter3D',
              coordinateSystem: 'geo3D',
              itemStyle: {
                color: '#E3B434'
              },
              emphasis: {
                label: {
                  show: false
                }
              },
              symbol: img,
              // symbolSize: [35, 70], //宽度、高度
              symbolSize: [18, 30], //宽度、高度
              data: this.mapBuildingData,
              blendMode: 'source-over',
              zlevel: 10
            },
            {
              name: 'EPC项目',
              type: 'scatter3D',
              coordinateSystem: 'geo3D',
              itemStyle: {
                color: '#00C98F'
              },
              emphasis: {
                label: {
                  show: false
                }
              },
              symbol: img,
              // symbolSize: [35, 70], //宽度、高度
              symbolSize: [18, 30], //宽度、高度
              data: this.mapEPCData,
              blendMode: 'source-over',
              zlevel: 20
            },
            {
              name: '暂停项目',
              type: 'scatter3D',
              coordinateSystem: 'geo3D',
              itemStyle: {
                color: '#ffffff',
                opacity: 1
              },
              emphasis: {
                label: {
                  show: false
                }
              },
              symbol: img,
              // symbolSize: [35, 70], //宽度、高度
              symbolSize: [18, 30], //宽度、高度
              data: this.mapSuspendData,
              blendMode: 'source-over',
              zlevel: 30
            },
            {
              name: '未移交',
              type: 'scatter3D',
              coordinateSystem: 'geo3D',
              itemStyle: {
                color: '#ff4040',
                opacity: 1
              },
              emphasis: {
                label: {
                  show: false
                }
              },
              symbol: img,
              // symbolSize: [35, 70], //宽度、高度
              symbolSize: [18, 30], //宽度、高度
              data: this.mapNohandedData,
              blendMode: 'source-over',
              zlevel: 40
            }
          ]
        }
        // this.groupChart.resize()
        this.groupChart.setOption(option, {
          notMerge: true
        })
      }
      domImg.onload = () => {
        setTimeout(() => {
          mapInitialize()
        }, 1000)
      }
      //地图点击事件
      if (this.clickSymbol == 0) {
        // this.chartRegionClickEvent()
        this.chartProjectClickEvent()
      } else {
        this.chartProjectClickEvent()
      }
    },
    //地图区域点击事件
    chartRegionClickEvent() {
      if (!this.groupChart) return
      //图表点击事件
      var that = this
      this.groupChart.off('click') //清除原有的点击事件
      this.groupChart.on('click', 'series.map3D', function (e) {
        console.log('地图点击', e)
        if (e.value == null) return
        let changeData = {
          orgId: e.value.orgId,
          groupName: e.name,
          unitSymbol: e.value.orgId,
          pidSymbol: '1',
          showName: e.value.showName
        }
        that.$emit('changeGroupData', changeData)
        that.backShow = true
        that.clickPermissions = true
      })
    },
    //地图项目点击事件
    chartProjectClickEvent() {
      if (!this.groupChart) return
      var that = this
      this.groupChart.off('click') //清除原有的点击事件
      this.groupChart.on('click', 'series.scatter3D', function (e) {
        if (e.value == null) return
        that.debounce(() => {
          that.$store.state.bigScreen.currentMenuItem = {
            name: e.name.split('项目')[0],
            value: 'HB06',
            pid: 2
          }
        }, 600)
      })
    },
    //返回至初始
    backClick() {
      if (this.clickPermissions) {
        let changeData = {
          orgId: null,
          groupName: null,
          unitSymbol: '',
          pidSymbol: '0',
          showName: '环保集团'
        }
        this.$emit('changeGroupData', changeData)
        this.backShow = false
      }
    },
    //图表销毁
    destroyChart() {
      if (this.projectChart != null) {
        this.projectChart.dispose()
        this.projectChart = null
      }
      if (this.groupChart != null) {
        this.groupChart.dispose()
        this.groupChart = null
      }
    }
  },
  beforeDestroy() {
    this.destroyChart()
  }
}
</script>

<style lang="scss" scoped>
.EchartsMap {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~@/views/groupPage/images/bj.png') no-repeat;
  background-size: 100% 100%;
  .chart {
    width: 100%;
    height: 100%;
  }
  .back {
    position: absolute;
    left: 17px;
    top: 25px;
    color: rgb(222, 222, 222);
    font-size: 12px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0px 6px 1px 0px;
    border-radius: 3px;
    z-index: 100;
    display: block;
  }
  /deep/ .echart-tooltip-content {
    background: linear-gradient(0deg, rgba(2, 20, 37, 0.82) 0%, rgba(7, 38, 67, 0.89) 100%);
    box-shadow: 0px 3px 13px 0px #000000;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(24, 255, 168, 1), rgba(25, 137, 252, 1)) 1;
    // height: 1.041667rem /* 200/192 */;
    width: 1.375rem; /* 264/192 */
    font-size: 0.0625rem /* 12/192 */ !important;
    padding: 0.052083rem /* 10/192 */ !important;
    font-family: Source Han Sans CN;
    .echart-tooltip-wrap {
      .echart-tooltip-header {
        height: 0.104167rem /* 20/192 */;
        display: flex;
        justify-content: space-between;
        .name {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 0.083333rem /* 16/192 */;
          font-weight: bold;
          color: #16c6ea;
        }
        .status {
          flex: 0.5;
          // width: 0.229167rem /* 44/192 */;
          // height: 100%;
          background: linear-gradient(90deg, #1695ee, #06bc82);
          border-radius: 2px;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.072917rem; /* 14/192 */
        }
      }
      .echart-tooltip-body {
        height: calc(100% - 20px);
        width: 100%;
        display: flex;
        flex-flow: column;
        .echart-tooltip-body-item {
          font-size: 0.072917rem /* 14/192 */;
          font-weight: 400;
          padding: 0.026042rem /* 5/192 */ 0;
          display: flex;
          .name {
            color: #ffffff;
          }
          .value {
            color: rgba(14, 202, 240, 1);
            flex: 1;
            // overflow: hidden;
            // text-overflow: ellipsis;
            white-space: normal;
          }
        }
      }
    }
  }
}
</style>