echarts使用心得（地图）

最新推荐文章于 2024-08-05 05:00:00 发布

FlyYant

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量766

点赞数 2

分类专栏：前端技术文章标签： echarts javascript html

本文链接：https://blog.csdn.net/qq_43066945/article/details/120524499

版权

前端技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍如何在Echarts中使用最新版本实现地图缩放时的标签隐藏功能，以及通过监听地图缩放事件优化大量标记点的显示，避免卡顿问题。通过设置labelLayout.hideOverlap属性实现缩放隐藏，并在放大时重新加载点的label内容。

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

地图的使用
使用最新的echarts版本，引入script文件

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.0/echarts.min.js"></script>

html中放置一个div便可
js：

var myChart = echarts.init(document.querySelector('.gezhongleixing'));//括号里为div的class
var options= {
            roam: true,
            labelLayout: {
                //缩放隐藏label，5.0以后才支持
                hideOverlap: true,

            },
            // option,
            geo: {
                map: name,
                // zoom:1,
                center: getdian(name),
                label: {
                    // 鼠标移动显示区域名称
                    emphasis: {
                        show: true,
                        color: '#fff'
                    }
                },
                // scaleLimit: {
                //     min: 0.4,
                //     max: 5
                // },
                //地图样式修改
                itemStyle: {
                    normal: {
                        areaColor: 'rgba(34, 70, 168, 0.7)',
                        borderColor: '#0692a4'
                    },
                    emphasis: {
                        areaColor: 'rgba(119, 139, 224, 0.548)'
                    }
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params, ticket, callback) {
                    if (params.seriesType == "effectScatter") {
                        return params.data.name;
                    } else {
                        return params.name;
                    }
                }
            }
        }
        myChart.setOption(options);

我在使用5.0以后的labelLayout的hideOverLap时出现缩放隐藏，但是放大不显示，于是我加了一个缩放拖动的监听事件，但如果地图上的标记点比较多，可能会有些卡顿，需要自己优化了

 myChart.on("georoam",function (params){
 	//如果是在拖动地图，直接返回，不作处理
            if (params.dy || params.dx) return;
            if (params.dy == 0 || params.dx == 0)return;
            //如果是在缩放不做处理，我的zoom设置默认为1，所以缩放的到的zoom会比1小
            if (params.zoom<1)return;
            //监听放大事件
            if (params.zoom>1){
            //发现地图放大，重新热加载点的label内容进行显示，opption内为点的样式设计内容
                myChart.setOption(opption);
            }
        })