Echarts中拖动缩放事件georoam影响click事件的解决办法

岩岩很哇塞！

于 2025-03-21 17:33:54 发布

阅读量253

点赞数 8

分类专栏：前端小项目文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/zhaoyan_love/article/details/146425867

版权

前端小项目专栏收录该内容

5 篇文章

订阅专栏

一、问题描述

当地图中拖动缩放事件georoam与点击事件同时存在时，拖动事件会影响click事件，可能导致点击地图区域时，触发不了click事件，而是触发georoam事件；或者点击地图上的选点时能够触发click事件，但是点击区域时触发不了的情况

二、问题视频

地图事件

三、解决办法

1、添加全局控制
2、添加鼠标按下和抬起事件，并控制全局参数
3、在拖动缩放事件georoam中控制全局参数，使点击时不触发georoam事件

// 添加全局控制
let isMouseDown = ref(false)

// 添加鼠标按下和抬起事件，并控制全局参数
 myChart.on('mousedown', () => (isMouseDown.value = true))
 myChart.on('mouseup', (e) => {
   isMouseDown.value = false
   moveEcharts(e)
 })

// 在拖动缩放事件georoam中控制全局参数，使点击时不触发georoam事件
 myChart.on('georoam', function (params) {
   if (isMouseDown.value) return // 过滤通过鼠标拖拽触发的georoam
     moveEcharts(params)
 })

// click事件与moveEcharts方法
 myChart.on('click', function (params) {
      console.log(params)

      if (!params) return
      let obj = params
      if (obj.componentType == 'geo' && !curzone.value) {
        myChart.dispose()
        console.log('点击省份')
        initechart(obj.name)
        curzone.value = obj.name
        getArreaList('city', obj.name)
      } else if (obj.componentType == 'series') {
        cityTitle.value = obj.name
        console.log('点击城市', obj.name)
        listQuery.value.county = cityList.value.find((item) => item.name == obj.name).code
        showPop.value = true
        getList(cityTitle.value)
      }
    })
function moveEcharts(params) {
    var option = myChart.getOption() //获得option对象
    // console.log('option的值：', option)
    // 获取当前的缩放和中心位置
    const currentZoom = option.geo[0].zoom
    const currentCenter = option.geo[0].center

    // 遍历所有geo组件，更新它们的缩放和中心位置
    option.geo.forEach((geo, index) => {
      // 保持geo组件的可交互性
      geo.silent = false // 确保geo组件可以接收事件
      geo.selectedMode = 'single' // 保持选中模式

      if (params.zoom != null && params.zoom != undefined) {
        // 捕捉到缩放时
        geo.zoom = currentZoom // 所有geo组件的缩放等级跟着一起改变
      }
      geo.center = currentCenter // 所有geo组件的中心位置随着一起改变
    })
    isMouseDown.value = false
    myChart.setOption(option, { silent: true }) //设置option
  }

四、全部代码

<script setup>
import {
  getMapNewsList,
  getMapNewsByType,
  getMapNewsByPCode,
  getMapNewsBypermission
} from '@/api/screen'
import * as echarts from 'echarts'
import axios from 'axios'
import { useStore } from 'vuex'

const store = useStore()
const cityTitle = ref('')
const fglTotal = ref('1.3W')
const showPop = ref(false)
const loading = ref(false)
const paginationParam = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
const listQuery = ref({
  current: 1,
  size: 10,
  province: '370000',
  city: null,
  county: null,
  system: null
})
const cityList = ref([])
const tableColumns = reactive([
  {
    align: 'left',
    prop: 'title',
    label: '稿件标题',
    width: 383,
    showOverflowTooltip: true
  },

  {
    align: 'left',
    prop: 'createTime',
    label: '发布时间',
    width: 188,
    showOverflowTooltip: true
  },
  {
    align: 'center',
    prop: 'createName',
    width: 98,
    label: '签发人'
  }
])
const tableData = ref([])

watch(
  () => store.state.users.screenZfType,
  (val) => {
    switch (val) {
      case 'systhese':
        listQuery.value.system = null
        break
      case 'zfw':
        listQuery.value.system = 'pal'
        break
      case 'fy':
        listQuery.value.system = 'court'
        break
      case 'jcy':
        listQuery.value.system = 'ppo'
        break
      case 'ga':
        listQuery.value.system = 'psb'
        break
      case 'sfxz':
        listQuery.value.system = 'doj'
        break
      default:
        listQuery.value.system = null
        break
    }
    if (tableData.value && tableData.value.length > 0) {
      getList(cityTitle.value)
    }
  },
  {
    immediate: true
  }
)

const curzone = ref()
//获取稿件列表
function getList(city) {
  console.log(cityList.value)

  cityList.value.forEach((item) => {
    if (item.type == 'county' && item.name == city) {
      listQuery.value.city = item.pcode
      listQuery.value.county = item.code
    } else if (item.type == 'city' && item.name == city) {
      listQuery.value.city = item.code
      listQuery.value.county = null
    }
  })

  getMapNewsList(listQuery.value)
    .then((res) => {
      tableData.value = res.data.list || []
      paginationParam.value.total = res.data.total
    })
    .catch(() => {
      tableData.value = []
      paginationParam.value.total = 0
    })
}
//根据类型获取区域列表
function getArreaList(type, name) {
  getMapNewsByType(type).then((res) => {
    if (type === 'province') {
      listQuery.value.province = res.data[0].code
    }

    let cityCode = res.data[0].code
    let PCode = type === 'city' ? cityList.value.find((item) => item.name == name).code : cityCode

    getArreaListByPCode(PCode)
  })
}
//根据父级code获取区域列表
function getArreaListByPCode(pCode) {
  getMapNewsByPCode(pCode).then((res) => {
    cityList.value = res.data || []
    // listQuery.value.province = res.data[0].pcode
  })
}

//关闭弹窗
function closePop() {
  showPop.value = false
  listQuery.value.current = 1
  paginationParam.value.currentPage = 1
}
let isMouseDown = ref(false)
function initechart(site) {
  var chartDom = document.getElementById('myechart')
  var myChart = echarts.init(chartDom)
  var customerBatteryCityData = [
    { name: '济南市', value: 5 },
    { name: '济宁市', value: 4 },
    { name: '青岛市', value: 3 },
    { name: '威海市', value: 2 },
    { name: '烟台市', value: 1 },
    { name: '菏泽市', value: 1 },
    { name: '日照市', value: 1 },
    { name: '临沂市', value: 1 },
    { name: '枣庄市', value: 1 },
    { name: '滨州市', value: 0 },
    { name: '德州市', value: 1 },
    { name: '聊城市', value: 1 },
    { name: '泰安市', value: 1 },
    { name: '淄博市', value: 0 },
    { name: '潍坊市', value: 0 }
  ]
  var img2 =
    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAxCAYAAADDY2cuAAAPBUlEQVR4Xu1ca4xd11X+9uuccx/z8sx4PK0Te4idxJYIKY6QIpAYSFWVquFHW6MEhKoghAAJhBAvp9DGSVwifsAfpEooapVUNLFpg5AKrZAgU9qQJvE4Tpq4SWslE9u1x573zL33PPYLrX3OHY8fjRzVUkzvXM3xGXnunbl3f2etb61vffswbD5uuBVg7/qOvP/xP2fM33Cf5kZ6Qz/B2l256P4hPonPcWBGAh25hkTU0OYWgsUoXIrcGdxsUiyZE3jdAvsdNgG6eDl4z/dhWvRhWFxAR9aq9aMntGB9AzXr0DArWLVh/dhv2MuvpUtB8V5MYkYtYzkRiGsCPAG84hCCXuhgLcC0h005os4CkJ/ELg3G3I10kb5v78V7tg/TUkNFCaLEw9QleAxI6WA4h3QMXFsg9zCpxUAKnNXT2Gc2XtgXQQkR8ukoR6fuwfsd7IBEXHcwMQfjFvAECOBSD6wxmJUUrvUqFnOwXzHv20LcSH/Ye74LJ9U2pHUH2e/B+h18g4PFDCxc2AysAHyWA2sCenkArvWfuCMDY+sRsw7KpPdyGcebCZJBBr71wytDH/4F33d/xNgo/bJAIC6c3JvzneW//86P3jx7wbRt5owrHP2k5BjXY0HDeXlZeDBIMBFz2egT0b13bhnfv2dkZy3iyjMwRnjQ8ngUZ7n+nyf6z39Rw56V4AuncWZtBpN5N1o2gPJ2soZ0SEBs/cjKwMc/JkYeeuKHsyvvtPPCO+adcZ5Z5q2BW1rV+gdnWp3Oiil85pw3zsF5D3hPf7WnOIbRYnP6YkwyziPBRV3I8dE42bmtVotiziE8Z5RuJGM1xfl9E1sHeIyj/zB46i8MilmFeP453Na6FBTv2SRONDoQowJ+/MHlnf/09ZnFsX+dmV+zOZzNvXUa3mvnXG6sSb12bW1cx1qnnfGFpTjxcIRIrxVlFAOEC2cQnDHFhUi4lA0peJ0rnkhJQDEJxmMIGTPRXxPi6V++ffsh//b955rFawbywjReWeqSfhkp3rM7cXxAojYm4ccfWZn4l8deOVMcP9dOTdtb3XbGZtagMNYX1rjUWJ874zJjvbEOdFiChdJiD5bKjFGCYpCcokXwRHEWS8ESIVkUDsEiKVRTSNmAVDUmnrrn9u1P6fMHToys/ZdF7VwNEwtTjAVuXgfll/C9QYNkG4cbP7gyceTz06eyY6fbbb3mdTFfFLajCwIFmg7rPJ0L42ApdVXpyxKfUBrrktCNxMLX+b2sJ/4ACMB4AAWCcyjOmZICMRWuXCBSBJSUQyqOBkQUNZk8/NHbb37anD/w2kjrWQE+m6E1N83u0leA4hFt1bBbD63c8syjL5xJj8202sVSkRcLRebbWqPQBEQJjNEOxCXW0LlMXZ7SVw8+CBAifMGoe2CQkkMKDikFSnAEEiXVUBJHW2Si+rn66r17dh42F/78ldGVKQt+AejMXwHKPkz3CzS3ABg+tLzzPx7+zun02Mzaml7Mc72YZ75dVKBog0K7EhhHZwdnPCyBEnilt4ieOnfBGRgHJLUisgsKRQgPoERKohZJORjHcjhKogEVPfOJvRPPZBf++OXxxW9lMAsD+NDSFenrDrxaV1D9AqzvgbfG//0LL86yH55ZbemlPLdLee7bOYFikFOkaIu8oCgJqSwAYojsKXW58NUTj1ANc7oIWeivqcYiYJTkUBFHTIBEApGUSGIhCJTBKJEDcfzYRyY+eFSt/t5rE63vAsnKNKZblxI9gL3+9aiGpCbBkgtf6jw+t6R35itp7taK3K6mBTpaI88pfRlkhYUuHLS1MMZBOw9rHXwApLdSGKd+kFIXpTDGEVWREikCQyCO6JBIIiX6a4o1o5j3J9G24Thu7BYPDE76HxRIs2nsS6/oU+C9+DWclCkK9dzf5Y/bjrmVdfLCUZ/SyjXSTCMrSkAKOqqIKaj6ovTlXai+Aig9hAsnkhcMAhQtJZcoxQPJEzAlIOFgjZrizTjyzSjitVgmN+M3f/a3srcLRGaj1LJBZgmKMAOmOD848IRPi1uRUdrKDNpZEQBJMwKFOKUCRjuUoJAsdpFTeiJ3bfiQoUehkjhiAZRIEBgXQamRlBgpNCPF6jWFWqJQj6J4KPpU9idvvAPs9xv1w6tL83/90peR6d1oZxQhBdq5QZ5pdAqDnL4vLDICJhA+pTHiF4qWild6CBXmGbgsKy8qiYncpeKoUfqKBJK4ipREoh4r1AmQRKEWReDykzj08+9cvlpXB+XAS08iK3ajkxVIU41OrtGhKKFDG6SFLfmFgOk2jyQeU0lMvNJDDSSnPqUqhyltEaeokLbKUrgW00FET2AQMBFqNfo+QsI/iYN3nbp2UNJ8FzodjXZeoBMipkxfaeAVg5wAyV1oIEP66lZgvUQopexb9iiCQRGnKI4kEDwPwBAg4aDoCOcIjZpCg0ARn7p2UP7qhSdBoBCXdKpIoYghfsm1QZZTSWyQGRdSWGgkrS+llqos7pUM1iV5SWWxLNMXHXEsEMsuIBKNpASmTF9Reaj3CEonvyUAEiKFgKHUFdIY8QlxS8kp1LfYwkN7FzgFvTZaqaIkVF+yBCSiKKHURVVXLELaovTVqJWR0qT0FRMo+99bpKyDQtFCJJ+ZcKYoIVDoTGVxIHtdpi+qwHqmc+ymgquBIstIIT6hcrhO4FDKut6gUJ9C6WsTlMsS8yYoNyBTbYKyCUpJ9BWnbKavH3NBvJ+Rskn0/w9AoZKYyuHN6qtsHC8pibvVV7ckvl7VVzvbhTR083SYILdcbB4r/auomscgtVTNI5XFPfSgWUro6PmGjj6oxKVCXHbxspRYfpLm8cALT6Kjd6FDc5TQo2ikqUGaVzJL6Owt8qAS02yFdC+a1ZNq31ug0PVXyvYMghpHUomrjp5EyXgjKDEpxBFIKW6+V5klCJI5qcQVKNU8hbSvILNkJLOU00cSJEPzSPMUQ26zHgMliJHlLCXILARKXEVKECTDKDhES5BZut18AOUaBMnSKc7wN9NPsjzf7UliaacaaUFq8YZIWVeIS1GSjBM0eSSZxV3hV/7pzmXrQ64qfUU0Cg5yC8n2pVoc0leQ8EmMlKwRR54EyYF4P/7sjncu92JvHHKtu8W//ejil3xW7PatIkc7LcJ8vjt5TDMid1KKy9RVipEXZZZemc9vUFnKGT2BQi4WAoXSF5E9yfdVpNDkkUTIZjV9rEdRYzvuu+l36m+fwF57VS/xPn9UDWN7tIaF+Pv/qB9PV/WEXc0Kv5bntkXcUlTjYEpdJEhWmhcBQkMuR0RPJN9Ds5QuMGQxCtYiGnRVgISZSjWjT0iQjCTrSyKaz/NmHNcHkmjwFvbpbffWT24B8m9gV3GFbfVuPJ9IjDY1TOPO/+078s03FvvOnW117HKR2eWMxsI6kHsYB9OMXpP/q5ylkHHCVemrFwXJbqTQ9FEpihjye1WRQtFCEn6ixEAcicEkFgNxfN9d4yPzo9nvLu8tjjvw1nO4rd1NY+sOyV/Em80MdkhADn12/qZvfv6509nxk8ureqnIzEKe+aAQk+eLCJ5ME5S+yPtVlcM0Rwner17LX1R9kb2ockfKMOwSwWLUdbOQxagWSzmUxGI4TqLBOPnKJ/ZOfN0s/OGrH1j+tgVfehGzK90tJeugTOL4QI6+EUBvfXh54t8eef5M59hbK61iIc/0fJb6FpnxjAmer9LNUrojdXBJktu+3FNE6atXCjCyq4I2OnQtRmRdrYheknmCzHiUxoJDUqnhOFbDSU0Nqfhrv75n4oid/9PXRtMpi3TOIF+8wiF5N04MeagxwI49svIzX330xVPpsZl2q1go8mI+T33HlLMUAiX4iYNdlXxf5IqkHqV0R/aGk3hjRVmBQmNhms/T1ocuMJwipgQlVlKRO3IkTuJBro58bM/OI3buL783sjLFIc5nuG1umtGmrA0GbwLFAOMSctvDKzsPHzp6Knv5VLuVr1it53Vmg22VGsXKxVICUhq8ieCpPyEvcdhW1COtCjkkQ7TQ/hTq7InoZWXyJl4hDxidlWCJlBQp8ZCMo37Iwx/ds+OwOf/gqyPtZzn4bIFbL1wBSpm+6tsY/AfIdf+3x0/lL/+o3TEtWN2yhetY47W2PrfW5yZsgyjd91QWEygECFVeFSC90NmHDUMVMKECY5xRpCjJeSIEi4VkFCUqbIWQakBK1WBKNZl4+p7bb3rKzh14fUv63wX07FUN3kT0HmIrgxv/zPLNX/nim+ejb51Z6ZjcW5vC0hY6b7ylTUM+tcZ0jPEdQ/9vw04uipJec0eWiJT/kP4lOWeSc55wKepSsLqQMpGSQOGKc5FAyBoTMgL/2q/uvekLbvb33xpY+26K7PzL+NBit1dZbx7v9qdrDovDCo2x314e/aMxre578NjMhflUG1eAAKGtdd4VsDa1Rq8ZY1OrXeos7fBCqUP25oy+1EEYAYKIc0k7uZpSyqZQvMaFkGBM0NY7MKkYf2DX2OA92wfbn+2bud9BnCvA5qbx5TWwh0Lpug7KPu+VwBv9tBVCQmz7g6Xxz+yJ6/dktBGI1puVeYkKq1dmW53Hps6cnZ0rcpuXEQR6HiOZ5adbVbnqpwubUcm2Ck4RUW8K+fGf2zL0wJ3bRhoxD7uCw0ZVBiSCsyWjT/+zm334+4PZUQM3F6Fv+Xlspx3CYY0vl1mSGINNBjNkwQdruR8ea6sPMsY459wxy4xwyNLULp442zo3f86srp2NsvaZ3CLuFXZ/l4tOxWLLDqcGd0T1HaNsdPtQY8wL17TMRxQp9MqOsMtzzfSsA19xkEsAVmvY1enuTbkUFACT/lm5iC2xQlKLoRoO7bpEFFmYal8yN92N+TF8S6IvncJL+mp3TejBeAl7R+nmBgmaiYGuO8QNQNcUoBxYdXMDujkEMo2iTTeIWEORncBeukHEesl6+R0nQn23CyelgI22wCqGWOYoRB1ABu8dpAGkjnC+uNzC35NAXP6hvRe78A25HTtUDkTd9UvAmYG2BpEF1nSEsSLGdj0FkBh5SQ9xdYP3xZu9BAqb3JDmpkqG6R69tZXuWq+6sH4HGbCXTWKUAZPVK6cwhUkHHATwOdr+cNWG7t3vYnStb2Lzedd1BTZBua7LeX1+2f8ByDqSuffFKG8AAAAASUVORK5CYII='

  var option

  axios.get(`./static/map/${site}.json`).then((res) => {
    echarts.registerMap('Shandong', res.data)
    // 获取标记城市的坐标点
    let allpoint = res.data.features
    let citydata = allpoint.map((item, idx) => {
      return {
        name: item.properties.name,
        value: item.properties.center
      }
    })

    option = {
      // tooltip: {
      //   trigger: 'item',
      //   showDelay: 0,
      //   transitionDuration: 0.2
      // },
      geo: [
        {
          map: 'Shandong',
          zoom: 1,
          silent: false, // 允许接收事件
          select: {
            disabled: false, // 启用选中
            itemStyle: {
              areaColor: '#389BB7' // 选中样式
            }
          },
          layoutCenter: ['50%', '50%'], //位置
          layoutSize: '100%', //大小
          label: {
            show: curzone.value ? true : false,
            show: false,
            color: '#fff',
            fontSize: 16
          },
          itemStyle: {
            borderColor: 'rgba(147, 235, 248, 1)',
            borderWidth: 1,
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: 'RGBA(11, 75, 231, 1)' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'RGBA(6, 146, 243, 1)' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            shadowBlur: 10,
            shadowColor: 'rgba(128, 217, 248, 1)',
            shadowOffsetX: -2,
            shadowOffsetY: 2
          },
          emphasis: {
            label: {
              show: curzone.value ? true : false,
              color: '#fff'
            },
            itemStyle: {
              areaColor: '#389BB7'
            }
          },
          top: 0,
          roam: true // 'scale' 或 'move'
        },
        // 重影
        {
          map: 'Shandong',
          zlevel: -1,
          zoom: 1,
          roam: true,
          layoutCenter: ['50%', '52%'],
          layoutSize: '100%', //大小
          select: {
            disabled: true
          },
          silent: true,
          itemStyle: {
            areaColor: '#031525',
            borderWidth: 0,
            shadowColor: '#D79D3D',
            shadowBlur: 30,
            shadowOffsetX: -5,
            shadowOffsetY: 10
          }
        }
      ],
      series: [
        {
          name: '城市坐标点',
          type: 'scatter',
          coordinateSystem: 'geo',
          symbolSize: 10,
          label: {
            formatter: '{b}',
            position: 'top',
            color: '#fff',
            fontSize: 16,
            // show: curzone.value ? false : true
            show: false
          },

          itemStyle: {
            borderColor: 'RGBA(255, 214, 44, 1)',
            color: '#Fff',
            borderWidth: 3,
            shadowColor: 'RGBA(255, 214, 44, 1)',
            shadowOffsetY: 0,
            shadowBlur: 10,
            areaColor: 'RGBA(255, 214, 44, 1)'
          },
          emphasis: {
            areaColor: 'rgba(29,85,139,.6)'
          },

          data: citydata
        },
        //柱状体的主干
        {
          type: 'lines',
          effect: {
            show: false,
            symbolSize: 5 // 图标大小
          },
          lineStyle: {
            width: 6, // 尾迹线条宽度
            color: 'rgb(22,255,255, .6)',
            opacity: 1, // 尾迹线条透明度
            curveness: 0 // 尾迹线条曲直度
          },
          label: {
            show: 0,
            position: 'end',
            formatter: '245'
          },
          silent: true,
          data: lineData()
        },
        // 柱状体的顶部
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          geoIndex: 0,
          label: {
            normal: {
              show: true,
              formatter: function (params) {
                var name = params.data[2].name
                // var text = `{tline|${name}}:{fline|${value}}`
                var text = `{tline|城市}:{fline|${name}}`
                return text
              },
              color: '#fff',
              rich: {
                fline: {
                  // padding: [0, 25],
                  color: '#fff',
                  fontSize: 14,
                  fontWeight: 400
                },
                tline: {
                  // padding: [0, 27],
                  color: '#ABF8FF',
                  fontSize: 12
                }
              }
            },
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            color: '#00FFF6',
            opacity: 1
          },
          symbol: img2,
          symbolSize: [100, 50],
          symbolOffset: [0, -20],
          data: scatterData()
        },
        // 柱状体的底部
        {
          geoIndex: 0,
          type: 'effectScatter',
          coordinateSystem: 'geo',
          rippleEffect: {
            scale: 10,
            brushType: 'stroke'
          },
          showEffectOn: 'render',
          itemStyle: {
            color: '#00FFFF'
          },
          label: {
            formatter: '{b}',
            position: 'bottom',
            color: '#fff',
            fontSize: 12,
            distance: 10,
            show: false
          },
          symbol: 'circle',
          symbolSize: [10, 5],
          itemStyle: {
            // color: '#F7AF21',
            color: 'rgb(22,255,255, 1)',
            opacity: 1
          },
          data: scatterData2()
        }
      ]
    }
    myChart.setOption(option)

    // 动态计算柱形图的高度（定一个max）
    function lineMaxHeight() {
      const maxValue = Math.max(...customerBatteryCityData.map((item) => item.value))
      return 0.9 / maxValue
    }
    // 柱状体的主干
    function lineData() {
      return customerBatteryCityData
        .map((item) => {
          const cityInfo = citydata.find((city) => city.name === item.name)
          if (!cityInfo) {
            console.error(`未找到 ${item.name} 的城市信息`)
            return null
          }
          const coord = cityInfo.value
          return {
            coords: [coord, [coord[0], coord[1] + item.value * lineMaxHeight()]]
          }
        })
        .filter(Boolean)
    }
    // 柱状体的顶部
    function scatterData() {
      return customerBatteryCityData
        .filter((item) => item.value > 0)
        .map((item) => {
          const cityInfo = citydata.find((city) => city.name === item.name)
          if (!cityInfo) {
            console.error(`未找到 ${item.name} 的城市信息`)
            return null
          }
          const coord = cityInfo.value
          return [coord[0], coord[1] + item.value * lineMaxHeight(), item]
        })
        .filter(Boolean)
    }
    // 柱状体的底部
    function scatterData2() {
      return customerBatteryCityData
        .filter((item) => item.value > 0)
        .map((item) => {
          const cityInfo = citydata.find((city) => city.name === item.name)
          if (!cityInfo) {
            console.error(`未找到 ${item.name} 的城市信息`)
            return null
          }
          return {
            name: item.name,
            value: cityInfo.value
          }
        })
        .filter(Boolean)
    }

    myChart.on('mousedown', () => (isMouseDown.value = true))
    myChart.on('mouseup', (e) => {
      console.log('抬起', e)
      isMouseDown.value = false
      moveEcharts(e)
    })
    myChart.on('click', function (params) {
      console.log(params)

      if (!params) return
      let obj = params
      if (obj.componentType == 'geo' && !curzone.value) {
        myChart.dispose()
        console.log('点击省份')
        initechart(obj.name)
        curzone.value = obj.name
        getArreaList('city', obj.name)
      } else if (obj.componentType == 'series') {
        cityTitle.value = obj.name
        console.log('点击城市', obj.name)
        listQuery.value.county = cityList.value.find((item) => item.name == obj.name).code
        showPop.value = true
        getList(cityTitle.value)
      }
    })
    // georoam事件处理

    myChart.on('georoam', function (params) {
      if (isMouseDown.value) return // 过滤通过鼠标拖拽触发的georoam
      console.log(params)
      moveEcharts(params)
    })
  })
  function moveEcharts(params) {
    var option = myChart.getOption() //获得option对象
    // console.log('option的值：', option)
    // 获取当前的缩放和中心位置
    const currentZoom = option.geo[0].zoom
    const currentCenter = option.geo[0].center

    // 遍历所有geo组件，更新它们的缩放和中心位置
    option.geo.forEach((geo, index) => {
      // 保持geo组件的可交互性
      geo.silent = false // 确保geo组件可以接收事件
      geo.selectedMode = 'single' // 保持选中模式

      if (params.zoom != null && params.zoom != undefined) {
        // 捕捉到缩放时
        geo.zoom = currentZoom // 所有geo组件的缩放等级跟着一起改变
      }
      geo.center = currentCenter // 所有geo组件的中心位置随着一起改变
    })
    isMouseDown.value = false
    myChart.setOption(option, { silent: true }) //设置option
  }
}
function goall() {
  initechart('山东省')
  curzone.value = null
  getArreaList('province', '')
}
onMounted(() => {
  initechart('山东省')
  getArreaList('province', '')
})

function changeCurrentPage(page) {
  paginationParam.value.currentPage = page
  listQuery.value.current = page
  getList(cityTitle.value)
}
</script>

<template>
  <div class="screwh">
    <p class="city">
      <span class="all" @click="goall">全部</span>
      <span v-if="curzone" class="curCity">> {{ curzone }}</span>
    </p>
    <div id="myechart"></div>
  </div>
  <popup-template
    :showPop="showPop"
    :loading="loading"
    :cityTitle="cityTitle"
    :baseColumns="tableColumns"
    :tableData="tableData"
    :paginationParam="paginationParam"
    @closePop="closePop"
    @changeCurrentPage="changeCurrentPage"
  >
    <!-- <template #header>
      <div class="popup-tips">平台发稿量：{{ fglTotal }}</div>
    </template> -->
  </popup-template>
</template>