echarts 地图鼠标点击和滚动事件

杨大大28

于 2021-11-24 20:04:31 发布

阅读量2.2k

点赞数 1

分类专栏：前端 javascript 三维文章标签：三维点击缩放

本文链接：https://blog.csdn.net/popstarqq/article/details/121523493

版权

前端同时被 3 个专栏收录

94 篇文章 16 订阅

订阅专栏

javascript

55 篇文章 4 订阅

订阅专栏

三维

14 篇文章 1 订阅

订阅专栏

本文介绍了如何使用Echarts库在地图组件中开启鼠标点击和滚动功能，通过设置`roam`为`true`实现地图的缩放和平移漫游。同时，注册了点击事件和拖动事件监听器，详细展示了处理点击和拖动事件的方法，为地图应用提供了交互性的增强。

摘要由CSDN通过智能技术生成

1 开启鼠标点击和滚动

设置roam为true

          geo: {
            map: 'china',
            roam: true, // 鼠标缩放和平移漫游
            // silent: true,
            zoom: 1.1,
            center: [105.32817322555658, 33.930049038112244],
            itemStyle: {
              normal: {
                borderColor: 'rgba(88,121,193,1)',
                borderWidth: 1,
                areaColor: 'rgba(72,111,197,.2)'
              },
              emphasis: {
                areaColor: '#F5A623'
              }
            },
            label: {
              normal: {
                show: true,
                color: '#fff'
              },
              emphasis: {
                show: false
              }
            }
          },

2 注册事件

  this.chinaChart = echarts.init(this.$refs.Map)

点击事件

 this.chinaChart.on('click', (data) => {})

拖动事件

      this.chinaChart.on('georoam', (params) => {
        // // 如果是拖拽事件，则返回
        if (params.dy || params.dx) return
        var _option = that.chinaChart.getOption()
        var _zoom = _option.geo[0].zoom
        console.log(_option.geo[0])
      })