echarts地图缩放与页面滚动问题

我在页面中放了一个echarts地图，并开启了缩放功能，但是如果鼠标放在地图上滑动滚轮，整个页面也会同步上下滚动，请问该怎么让用户只在地图范围内缩放地图不滑动整个页面呢？

可以通过阻止事件冒泡来解决这个问题。具体来说，当鼠标在地图上滑动滚轮时，会触发 mousewheel 或 DOMMouseScroll 事件，在事件处理函数中，可以先阻止事件的默认行为，然后阻止事件向上级元素冒泡，代码如下：

chart.on('mousewheel', function (params) {
  // 阻止事件的默认行为
  params.event.preventDefault();
  // 阻止事件向上级元素冒泡
  params.event.stopPropagation();
  // 处理缩放逻辑
  // ...
});

没碰到过这种情况 给你提供个思路
你给地图外边的div加个鼠标移入的事件，移入执行关闭浏览器的上下滚动。鼠标移出在打开

  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7502718
  • 这篇博客你也可以参考下：ECharts地图钻取下一级，开启平移缩放功能后，地图不在容器中间，肿么办？
  • 除此之外, 这篇博客: Echarts雷达图 将数值放在类目值下并根据数值大小设置不同背景色标注中的 Echarts雷达图 将数值放在类目值下并根据数值大小设置不同背景色标注 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    • 目的：将雷达图数值放在类目值下并根据数值大小设置不同背景色标注
    • 实现：利用radar.name.rich.formatter
    • 代码：
    let valueArr = [83,53,81,70,85,48,90,10,6]
tabChartRadarData(valueArr) {
            let indicator = [{ name: '数学', max: 100, min:0 },
                        { name: '语文', max: 100, min:0 },
                        { name: '英语', max: 100, min:0 },
                        { name: '化学', max: 100, min:0 },
                        { name: '物理', max: 100, min:0 },
                        { name: '生物', max: 100, min:0 },
                        { name: '体育', max: 100, min:0 },
                        { name: '音乐', max: 100, min:0 },
                        { name: '美术', max: 100, min:0 }]
            let myChart = echarts.init(document.getElementById('chartRadar'));
            let option = {
                color: ['#6DCDFF'],
                radar: {
                    center: ['50%','50%'],//调整雷达图的位置
                    indicator: indicator,
                    splitArea: {
                        show: true,
                    },
                },
                series: [{
                    type: 'radar',
                    data: [
                        {
                            value: valueArr,
                            symbolSize: 8,
                            areaStyle: {
                                color: '#AEE4FF'
                            }
                        }
                    ]
                }]
            };
            myChart.setOption(option)
            let i = -1
            let itemValue = 0
            myChart.setOption({
                radar: [
                    {
                        name: {
                            rich: {
                                a: {
                                    color: '#000',
                                    lineHeight: 16
                                },
                                b: {
                                    color: '#fff',
                                    align: 'center',
                                    backgroundColor: '#F2821D',//#F7C242,#B0DAAA,#CECECE
                                    padding: 2,
                                    borderRadius: 4
                                },
                                c:{
                                    color: '#fff',
                                    align: 'center',
                                    backgroundColor: '#F7C242',//#F7C242,#B0DAAA,#CECECE
                                    padding: 2,
                                    borderRadius: 4
                                },
                                d:{
                                    color: '#fff',
                                    align: 'center',
                                    backgroundColor: '#B0DAAA',//#F7C242,#B0DAAA,#CECECE
                                    padding: 2,
                                    borderRadius: 4
                                },
                                e:{
                                    color: '#fff',
                                    align: 'center',
                                    backgroundColor: '#CECECE',//#F7C242,#B0DAAA,#CECECE
                                    padding: 2,
                                    borderRadius: 4
                                }
                            },
                            formatter: (a,b)=>{
                                let isOdd = (valueArr.length % 2 != 0)
                                let nosplitArr = isOdd?[0,parseInt(valueArr.length/2),parseInt(valueArr.length/2)+1]:[0,parseInt(valueArr.length/2)]
                                console.log('splitArr',nosplitArr);
                                i++
                                let splitStr = '\n'
                                if(nosplitArr.includes(i)){
                                    splitStr = ' '
                                }
                                itemValue = parseInt(`${valueArr[i]}`)
                                if(itemValue > 80){
                                    return `{a|${a}}${splitStr}{b|${valueArr[i]}}`
                                }else if(itemValue > 60){
                                    return `{a|${a}}${splitStr}{c|${valueArr[i]}}`
                                }else if(itemValue > 50){
                                    return `{a|${a}}${splitStr}{d|${valueArr[i]}}`
                                }else{
                                    return `{a|${a}}${splitStr}{e|${valueArr[i]}}`
                                }    
                            }
                        }
                    }
                ]
            })
        },
    • 效果图：
      在这里插入图片描述
  • 以下回答由chatgpt基于相关博客总结生成:

    对于问题：如何优化echarts地图缩放功能？

    可以使用echarts自带的dataZoom组件来优化地图缩放功能，具体实现步骤如下：

    1.在echarts配置项中开启dataZoom组件：

    dataZoom: [{
    type: 'inside', //内置型组件，可使用鼠标滚轮缩放
    xAxisIndex: 0, //在第一个横坐标上开启缩放
    yAxisIndex: 0, //在第一个纵坐标上开启缩放
    zoomLock:true, //开启zoomLock锁定功能
    start: 0, //初始化时，地图的最小值
    end: 100, //初始化时，地图的最大值
    filterMode: 'empty' //缩放时，只缩放空值的地图
}]

    2.在div容器中设置overflow为hidden，防止页面跟着整体滚动：

    <div id="mapContainer" style="overflow:hidden">
</div>

    3.设置Map实例的scrollWheelZoom属性为true，启用地图缩放功能：

    map.set('scrollWheelZoom', true);

    完整代码如下：

    //引入Echarts和百度地图
import echarts from 'echarts';
import BMap from 'echarts/extension/bmap/bmap';

//在mounted方法中创建Map实例和Echarts容器
mounted() {
    //创建Map实例
    const map = new BMap.Map(document.getElementById('mapContainer'));
    const point = new BMap.Point(longitude, latitude); //地图中心点
    map.centerAndZoom(point, 15); //设置地图中心点和缩放级别

    //添加地图控件
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.enableScrollWheelZoom(true); //启用地图缩放功能

    //绘制地图
    const option = {
        bmap: {
            center: [longitude, latitude],
            zoom: 15,
            roam: true,
        },
        series: [
            //地图系列
            {
                type: 'map',
                map: 'xxx',
                //省份数据
                data: [{
                        name: '北京',
                        value: 100
                    },
                    {
                        name: '上海',
                        value: 50
                    }
                ],
                //设置地图样式
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#333'
                        }
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: '#333'
                        }
                    }
                }
            }
        ],
        dataZoom: [{
            type: 'inside',
            xAxisIndex: 0,
            yAxisIndex: 0,
            zoomLock:true,
            start: 0,
            end: 100,
            filterMode: 'empty'
        }]
    };

    //创建Echarts容器
    const echartsContainer = document.createElement('div');
    echartsContainer.style.width = '100%';
    echartsContainer.style.height = '100%';
    document.getElementById('mapContainer').appendChild(echartsContainer);
    //创建Echarts实例，并关联百度地图
    const myChart = echarts.init(echartsContainer);
    myChart.setOption(option);
    myChart.setMap(map);
}

    注意事项：

    1.在使用百度地图扩展的Echarts时，需要在页面上引入百度地图API的js文件； 2.如果页面中同时存在多个Echarts图表，要确保每个图表的id都是唯一的； 3.为了避免地图缩放时，页面一起跟着滚动，需要将容器div的overflow属性设置为hidden.