<template>
  <div class="centerTopPage">
    <div class="mapBox">
      <div v-if="type == 1" id="mapEcharts"></div>
      <div v-if="type == 2" id="mapEcharts2"></div>
    </div>
    <div class="buttonTop">
      <div
        :class="type == 1 ? 'on' : ''"
        @click="getMapSelect(1)"
        class="buttom1"
      >
        全国
      </div>
      <div
        :class="type == 2 ? 'on' : ''"
        @click="getMapSelect(2)"
        class="buttom1"
      >
        全市
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
let mapChinaJson = require('@/untils/china.json')
let ningxiaJson = require('@/untils/ningxia.json')
import { getEquipmentDisByMapApi } from "../../api/screen";

export default {
  name: 'centerTopPage',
  data() {
    return {
      type: 1,
      zoom: 1.39,
      zoom2: 1.2,
      mapEcharts: null,
      mapEcharts2: null,
      mapJson: null,
      pointArea: [],
      pointAll: [],
      companyList: [],
      companyAreaList: [],
      isCity: 0,
      cityCount: [],
      gozoom: 1
    }
  },
  created() {
    // this.getCompanyList()
    // this.getCompanyAreaList()
    // this.getCityCount()
  },
  mounted() {

    this.getEquipmentDisByMapApiPage()
    this.getInitData()
  },
  methods: {
    getEquipmentDisByMapApiPage() {
      getEquipmentDisByMapApi().then(res => {
        console.log('res=====', res);
      })
    },
    getCompanyList() {
      let params = {
        provinceId: ''
      }
      getCompanyListByProvinceId(params).then(res => {
        if (res.success && res.data) {
          this.companyList = res.data
        }
      })
    },
    getCompanyAreaList() {
      let params = {
        areaId: ''
      }
      getCompanyListByAreaId(params).then(res => {
        if (res.success && res.data) {
          this.companyAreaList = res.data
        }
      })
    },
    getCityCount() {
      // this.getInitData()
      // let params = {
      //   isCity: this.isCity
      // }
      // getCityCount(params).then(res => {
      //   if (res.success && res.data) {
      //     if (this.type == 1) {
      //       res.data.forEach(item => {
      //         item.value = item.center.split(',')
      //         item.isActive = false
      //         if (item.areaName == '北京市') {
      //           item.areaColor = '#fff'
      //         }
      //       })
      //       console.log(res.data)
      //       this.cityCount = res.data
      //       this.getInitData()
      //     } else if (this.type == 2) {
      //       res.data.forEach(item => {
      //         item.value = item.center.split(',')
      //         item.isActive = false
      //       })
      //       this.AreaCount = res.data
      //     }
      //   }
      // })
    },
    getMapSelect(type) {
      let dom = document.getElementsByClassName('iconMap')
      dom[0].style.display = 'none'
      if (type == 1) {
        this.type = 1
        if (this.mapEcharts) {
          this.mapEcharts.dispose()
          this.mapEcharts = null
        }
        if (this.mapEcharts2) {
          this.mapEcharts2.dispose()
          this.mapEcharts2 = null
        }
        setTimeout(() => {
          this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
          let mapJson1 = mapChinaJson
          echarts.registerMap('china', mapJson1)
          this.setMapOption()
        }, 200)
      } else {
        this.type = 2
        this.isCity = 1
        this.getCityCount()
        if (this.mapEcharts) {
          this.mapEcharts.dispose()
          this.mapEcharts = null
        }
        if (this.mapEcharts2) {
          this.mapEcharts2.dispose()
          this.mapEcharts2 = null
        }
        setTimeout(() => {
          this.mapEcharts2 = echarts.init(
            document.getElementById('mapEcharts2')
          )
          // let mapJson2 = mapJson('1515507975659761665', '')
          let mapJson2 = ningxiaJson
          echarts.registerMap('hs', mapJson2)
          this.setMapOption2()
        }, 200)
      }
    },
    getInitData() {
      this.mapEcharts = echarts.init(document.getElementById('mapEcharts'))
      this.mapJson = mapChinaJson
      echarts.registerMap('china', this.mapJson)
      this.setMapOption()
    },
    setMapOption() {
      //获取当前显示地图下方地市的坐标点数据； 用于气泡显示
      let geoCoordMap = {};
      // 获取地区详细信息
      let mapFeatures = this.mapJson.features;
      // 遍历获取每个地区的经纬度
      mapFeatures.forEach(function (v, i) {
        // 获取当前地区名
        let name = v.properties.name;
        if (name) {
          // 获取当前地区的经纬度
          geoCoordMap[name] = v.properties.center;
        }
      });

      let mapData = [{
        name: "青海省",
        value: ['101.778', '36.623'], a: '100'
      },
      {
        name: "宁夏回族自治区",
        value: ['106.278', '38.466'], a: '100'
      },
      {
        name: '安徽省', value: ['117.283', '31.861'], a: '100'
      },
      {
        name: '湖南省', value: ['112.982', '28.194'], a: '100'
      }
      ]
      let that = this
      this.pointAll = this.cityCount
      this.pointAll.push({
        name: '宁夏',
        //自定义区域的颜色
        itemStyle: {
          areaColor: '#F50508',
          borderColor: '#1773c3', // 区域边框
          shadowColor: '#1773c3' // 阴影
        }
      })
      let splitList = [
        { name: '北京市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
        {
          name: '天津市',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '上海市',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '重庆市',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '河北省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '河南省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '云南省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '辽宁省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '黑龙江省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '湖南省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '安徽省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '山东省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '新疆维吾尔自治区',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '江苏省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '浙江省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '江西省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '湖北省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '广西壮族自治区',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '甘肃省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '山西省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '内蒙古自治区',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '陕西省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '吉林省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '福建省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '贵州省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '广东省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '青海省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '西藏自治区',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '四川省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '宁夏回族自治区',
          itemStyle: { normal: { areaColor: '#2187FF' } }
        },
        {
          name: '海南省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '台湾省',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '香港特别行政区',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        },
        {
          name: '澳门特别行政区',
          itemStyle: { normal: { areaColor: '#0A2B7B' } }
        }
      ]
      let imgUrl = require('../../assets/img/myImage/tankuang.png')
      let echartOption = {
        geo: [
          {
            show: true,
            map: 'china',
            aspectScale: 0.8,
            zoom: this.zoom,
            roam: true, // 是否允许缩放
            animationDurationUpdate: 0,
            layoutSize: '92%',
            layoutCenter: ['50%', '68%'],
            itemStyle: {
              normal: {
                label: { show: false },
                areaColor: '#0A2B7B', //地图颜色
                opacity: 1,
                borderColor: '#174C95', //地图边框颜色
                borderWidth: 1, //地图边框宽度
                shadowColor: 'none',
                shadowBlur: 10,
                color: '#fff'
                // 设置扇形的阴影
              },
              emphasis: {
                //选中省份的颜色
                areaColor: '#765af3',
                label: {
                  show: true
                }
              }
            },
            label: {
              normal: {
                show: true,
                fontSize: 14,
                fontWeight: 500,
                color: 'rgba(255,255,255,0.5)'
              },
              emphasis: {
                show: true,
                areaColor: '#0a183d',
                color: '#fff'
              }
            },
            zlevel: 1,
            regions: splitList
          },
          {
            map: 'china',
            aspectScale: 0.8,
            roam: true, // 是否允许缩放
            animationDurationUpdate: 0,
            zoom: this.zoom,
            layoutSize: '92%',
            layoutCenter: ['50%', '69.5%'],
            itemStyle: {
              areaColor: '#6e55dc',
              borderColor: '#6e55dc',
              borderWidth: 1,
              opacity: 0.5,
              color: '#fff'
            },
            zlevel: -1,
            silent: true,
            tooltip: {
              show: false,
              trigger: 'item'
            }
          }
        ],
        visualMap: {
          show: false,
          top: 'top',
          min: 0,
          max: 2,
          seriesIndex: 0,
          calculable: true,
          inRange: {
            color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022']
          },
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          alwaysShowContent: true,
          showDelay: 0, //浮层显示的延迟
          transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
          enterable: true,
          className: 'iconMap',
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
          formatter: function (params) {
            if (params.data) {
              let companyHtml = ''
              let className = 'itemColor1 itemColor'
              // that.companyList.forEach(item => {
              //   if (item.provinceId == params.data.areaId) {
              //     if (item.companyType == '古建商、协会') {
              //       className = 'itemColor1 itemColor'
              //     } else if (item.companyType == '古建施工企业') {
              //       className = 'itemColor2 itemColor'
              //     } else if (item.companyType == '古建规划设计单位') {
              //       className = 'itemColor3 itemColor'
              //     } else if (item.companyType == '古建交易平台') {
              //       className = 'itemColor4 itemColor'
              //     } else if (item.companyType == '古建构件及材料生产企业') {
              //       className = 'itemColor5 itemColor'
              //     } else if (item.companyType == '大学高校') {
              //       className = 'itemColor6 itemColor'
              //     }
              //     companyHtml +=
              //       '<div class="' +
              //       className +
              //       '" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">' +
              //       item.companyName +
              //       '</div>'
              //   }
              // })
              let html = `
              <div style="width:260px;height:180px;background: url(${imgUrl}) no-repeat; background-size:100% 100%; padding:10px 12px;position: relative;">
                  <div id="tooltipGB" style="position: absolute;cursor: pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;">X</div>
                  <div style="font-size: 14px; height: 20px;line-height:20px;">${params.data.areaName}</div>
                  <div class="scrollTooltip" style="margin-top:10px;height:130px; overflow-y:auto;">
                    <div style="white-space:normal;font-size: 12px;font-weight: 400; position:relative;">
                      ${companyHtml}
                    </div>
                  </div>
              </div>`
              return html
            }
          },
          backgroundColor: 'rgba(4,24,51,0)',
          borderColor: 'rgba(99, 173, 222,0)',
          borderWidth: 0,
          padding: [0, -12, 0, 0],
          position: 'right',
          textStyle: {
            color: '#fff',
            fontWeight: 'bolder'
          }
        },
        series: [
          {
            type: 'scatter', //带有涟漪效果的
            map: mapData,
            roam: false,
            coordinateSystem: 'geo', //使用坐标系
            zlevel: 1,
            symbolSize: [45, 55],
            symbol: (value, params) => {
              if (params.name == '安徽省') {
                return 'image://' + require('@/assets/img/myImage/markPoints.png')
              }
              if (params.name == '湖南省') {
                return 'image://' + require('@/assets/img/myImage/markPoints.png')
              }
              if (params.name == '宁夏回族自治区') {
                return 'image://' + require('@/assets/img/myImage/markPoints.png')
              }
              if (params.name == '青海省') {
                return 'image://' + require('@/assets/img/myImage/markPoints.png')
              }
            },
            emphasis: {
              scale: false,
            },
            symbolKeepAspect: true,
            label: {
              normal: {
                show: true,
                color: '#7CC3FF',
                fontSize: 16,
                fontFamily: 'cursive',
                fontWeight: 'bold',
                position: 'top',
                padding: [0, 0, -15, 0],
                formatter: function (params) {
                  return params.data.count
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            data: mapData || []
          },
        ]
      }
      this.mapEcharts.setOption(echartOption)
      this.mapEcharts.on('georoam', function (params) {
        let option = that.mapEcharts.getOption() //获得option对象
        if (params.zoom != null && params.zoom != undefined) {
          //捕捉到缩放时
          option.geo[1].zoom = option.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
          option.geo[1].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
          option.geo[0].label.show = true //下层的geo的中心位置随着上层geo一起改变
        } else {
          //捕捉到拖曳时
          option.geo[1].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变
        }
        if (1 < params.zoom) {
          // console.log(this.gozoom,'this.gozoom');
          // console.log(params.zoom,'params.gozoom');

          option.geo[0].label.show = true //下层的geo的中心位置随着上层geo一起改变
        } else {
          option.geo[0].label.show = false //下层的geo的中心位置随着上层geo一起改变

        }
        that.mapEcharts.setOption(option) //设置option
      })

      this.mapEcharts.on('click', function (params) {
        if (params.seriesType === 'scatter' && !params.name) {
          let option = that.mapEcharts.getOption() //获得option对象
          // 点击变黄
          option.series[0].data.forEach(item => {
            if (params.data.areaName != item.areaName) {
              if (item.isActive) {
                item.isActive = false
              }
            } else {
              item.isActive = true
            }
          })

          that.getCompanyList(params.data)
          // set(params)
          that.mapEcharts.setOption(option)
          let domtooltipGB = document.getElementById('tooltipGB')
          if (domtooltipGB) {
            let option = that.mapEcharts.getOption() //获得option对象

            domtooltipGB.onclick = () => {
              option.series[0].data.forEach(item => {
                item.isActive = false
              })

              let dom2 = document.getElementsByClassName('iconMap')

              dom2[0].style.display = 'none'
              // set({ data: { name: '' } })
              that.mapEcharts.setOption(option)
            }
          }
        } else {
          let option = that.mapEcharts.getOption() //获得option对象
          option.series[0].data.forEach(item => {
            item.isActive = false
          })
          let dom2 = document.getElementsByClassName('iconMap')
          dom2[0].style.display = 'none'
          that.mapEcharts.setOption(option)
        }
      })
      let set = event => {
        this.pointAll.forEach((v, i) => {
          if (v.areaName != event.data.areaName) {
            if (v.isActive) {
              v.isActive = false
            }
          } else {
            v.isActive = true
          }
        })
      }
    },

    setMapOption2() {
      let that = this
      this.pointArea = this.AreaCount
      let splitList2 = [
        { name: '石嘴山市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
        { name: '银川市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
        { name: '吴忠市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
        { name: '中卫市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
        { name: '固原市', itemStyle: { normal: { areaColor: '#0A2B7B' } } },
      ]
      let imgUrl = require('../../assets/img/myImage/tankuang.png')
      let echartOption2 = {
        geo: [
          {
            show: true,
            map: 'hs',
            aspectScale: 0.8,
            zoom: this.zoom2,
            roam: true, // 是否允许缩放
            animationDurationUpdate: 0,
            layoutSize: '82%',
            layoutCenter: ['50%', '48%'],
            itemStyle: {
              normal: {
                label: { show: false },
                areaColor: '#281577', //地图颜色
                opacity: 1,
                borderColor: '#5876ba', //地图边框颜色
                borderWidth: 1, //地图边框宽度
                shadowColor: 'none',
                shadowBlur: 10,
                color: '#fff'
                // 设置扇形的阴影
              },
              emphasis: {
                //选中省份的颜色
                areaColor: '#765af3',
                label: { show: false }
              }
            },
            label: {
              normal: {
                show: true,
                fontSize: 14,
                fontWeight: 500,
                color: 'rgba(255,255,255,0.5)'
              },
              emphasis: {
                show: true,
                areaColor: '#0a183d',
                color: '#fff'
              }
            },
            regions: splitList2
          },
          {
            map: 'hs',
            aspectScale: 0.8,
            roam: true, // 是否允许缩放
            zoom: this.zoom2,
            animationDurationUpdate: 0,
            layoutSize: '82%',
            layoutCenter: ['50%', '50.5%'],
            itemStyle: {
              areaColor: '#6e55dc',
              borderColor: '#6e55dc',
              borderWidth: 1,
              opacity: 0.5,
              color: '#fff'
            },
            zlevel: -1,
            silent: true,
            tooltip: {
              show: false,
              trigger: 'item'
            }
          }
        ],
        visualMap: {
          show: false,
          top: 'top',
          min: 0,
          max: 2,
          seriesIndex: 0,
          calculable: true,
          inRange: {
            color: ['#998f74', '#04a4f6', '#00943e', '#dae07b', '#b62022']
          }
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'click',
          alwaysShowContent: true,
          showDelay: 0, //浮层显示的延迟
          transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
          enterable: true,
          className: 'iconMap',
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
          formatter: function (params) {
            if (params.data.areaName) {
              let companyHtml = ''
              that.companyAreaList.forEach(item => {
                if (item.areaId == params.data.areaId) {
                  companyHtml +=
                    '<div class="itemColor1 itemColor" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">' +
                    item.companyName +
                    '</div>'
                }
              })
              let html = `
              <div style="width:260px;height:180px;background: url(${imgUrl}) no-repeat; background-size:100% 100%; padding:10px 12px;position: relative;">
                  <div id="tooltipGB2" style="position: absolute;cursor:pointer; width:30px;height:30px;line-height:30px;text-align:center;right:5px;top:5px;">X</div>
                  <div style="font-size: 14px; height: 20px;line-height:20px;">${params.data.areaName}</div>
                  <div class="scrollTooltip" style="margin-top:10px;height:130px; overflow-y:auto;">
                    <div style="white-space:normal;font-size: 12px;font-weight: 400;">
                      ${companyHtml}
                    </div>
                  </div>
              </div>`
              return html
            } else {
              return ''
            }
          },
          backgroundColor: 'rgba(4,24,51,0)',
          borderColor: 'rgba(99, 173, 222,0)',
          borderWidth: 0,
          padding: [0, -12, 0, 0],
          position: 'right',
          textStyle: {
            color: '#fff',
            fontWeight: 'bolder'
          }
        },

        series: [
          {
            type: 'scatter', //带有涟漪效果的
            coordinateSystem: 'geo', //使用坐标系
            zlevel: 1,
            symbolSize: [36, 48],
            symbol: function (value, params) {
              if (params.data.isActive) {
                return 'image://' + require('@/assets/img/myImage/point_on.png')
              } else {
                return 'image://' + require('@/assets/img/myImage/point.png')
              }
            },
            label: {
              normal: {
                show: true,
                color: '#7CC3FF',
                fontSize: 16,
                fontFamily: 'cursive',
                fontWeight: 'bold',
                position: 'top',
                padding: [0, 0, -15, 0],
                formatter: function (params) {
                  return params.data.count
                }
              }
            },
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            data: this.pointArea || []
          }
        ]
      }
      this.mapEcharts2.setOption(echartOption2)

      this.mapEcharts2.on('georoam', function (params) {
        let option2 = that.mapEcharts2.getOption() //获得option对象
        if (params.zoom != null && params.zoom != undefined) {
          //捕捉到缩放时
          option2.geo[1].zoom = option2.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变
          option2.geo[1].center = option2.geo[0].center //下层的geo的中心位置随着上层geo一起改变
        } else {
          //捕捉到拖曳时
          option2.geo[1].center = option2.geo[0].center //下层的geo的中心位置随着上层geo一起改变
        }
        that.mapEcharts2.setOption(option2) //设置option
      })

      this.mapEcharts2.on('click', function (params) {
        if (params.seriesType === 'scatter' && !params.name) {
          let option = that.mapEcharts2.getOption() //获得option对象

          option.series[0].data.forEach(item => {
            if (params.data.areaName != item.areaName) {
              if (item.isActive) {
                item.isActive = false
              }
            } else {
              item.isActive = true
            }
          })
          set2(params)
          that.mapEcharts2.setOption(option)
          let domtooltipGB2 = document.getElementById('tooltipGB2')
          if (domtooltipGB2) {
            domtooltipGB2.onclick = () => {
              let dom2 = document.getElementsByClassName('iconMap')
              option.series[0].data.forEach(item => {
                item.isActive = false
              })
              dom2[0].style.display = 'none'
              set2({ data: { name: '' } })
              that.mapEcharts2.setOption(option)
            }
          }
        } else {
          let option = that.mapEcharts2.getOption() //获得option对象
          option.series[0].data.forEach(item => {
            item.isActive = false
          })
          let dom2 = document.getElementsByClassName('iconMap')
          dom2[0].style.display = 'none'
          that.mapEcharts2.setOption(option)
        }
      })

      let set2 = event => {
        this.pointArea.forEach((v, i) => {
          if (v.areaName != event.data.areaName) {
            if (v.isActive) {
              v.isActive = false
            }
          } else {
            v.isActive = true
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.centerTopPage {
  width: 100%;
  height: 627px;
  // background:palegoldenrod;
  margin-bottom: 2%;
  padding: 0 10px;
  position: relative;
  box-sizing: border-box;
  .iconMap {
    display: block !important;
    visibility: visible !important;
    opacity: 1;
  }
  .buttonTop {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }
  .buttom1 {
    width: 110px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
    color: #55f3fb;
    // background: url(../../assets/img/checked.png) no-repeat center;
    background-size: 110px 32px;
    margin-right: 12px;
    cursor: pointer;
  }
  .buttom1.on {
    color: #0095ff;
    // background: url(../../assets/img/checked_on.png) no-repeat center;
    background-size: 110px 32px;
  }
  .mapBox {
    width: 100%;
    height: 97%;
    display: flex;
    position: relative;
    #mapEcharts {
      width: 100%;
      height: 100%;
    }
    #mapEcharts2 {
      width: 100%;
      height: 100%;
    }
    z-index: 1000;
  }
  .label-box {
    position: absolute;
    bottom: 0px;
    left: 40px;
    // background: url('../../assets/img/home/labelBg.png') no-repeat;
    background-size: 100% 100%;
    padding: 10px 15px;
    .item {
      font-size: 14px;
      line-height: 22px;
      color: #fff;
      position: relative;
      padding-left: 15px;
      font-size: 16px;
    }
    .item:before {
      content: '';
      width: 10px;
      height: 10px;
      background: #06bbf2;
      position: absolute;
      top: 6px;
      left: 0px;
    }
    .itemColor1:before {
      background: #06bbf2;
    }
    .itemColor2:before {
      background: #2df0fe;
    }
    .itemColor3:before {
      background: #10e0a5;
    }
    .itemColor4:before {
      background: #dcef4e;
    }
    .itemColor5:before {
      background: #f48413;
    }
    .itemColor6:before {
      background: #fc5403;
    }
  }
}
</style>

<style>
.scrollTooltip::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scrollTooltip::-webkit-scrollbar-thumb {
  background-color: #1653a6;
  border-radius: 10px;
  -webkit-box-shadow: inset 1px 1px 0 #1653a6;
}
.itemColor {
  position: relative;
  padding-left: 15px;
  line-height: 22px;
}
.itemColor:before {
  content: '';
  width: 10px;
  height: 10px;
  background: #06bbf2;
  position: absolute;
  top: 6px;
  left: 0px;
}
.itemColor1:before {
  background: #06bbf2;
}
.itemColor2:before {
  background: #2df0fe;
}
.itemColor3:before {
  background: #10e0a5;
}
.itemColor4:before {
  background: #dcef4e;
}
.itemColor5:before {
  background: #f48413;
}
.itemColor6:before {
  background: #fc5403;
}
</style>
