Echarts map 点击地图单个区域变色

原创最新推荐文章于 2026-06-17 13:55:36 发布 1w 阅读 AI写同款

39粉丝45篇原创

关注

Echarts地图配置最终效果：组件代码 <template> <div class="container"> <div id="map"></div> <button :data-code="geoName" @click="changeMap">{{geoName}}</button> </div> </template> <script> import axios from 'axios' 阅读详情

AI摘要

本文介绍了如何使用Echarts的geo.select配置项来实现地图点击后单个区域变色，并详细展示了如何定制选中区域的label和itemStyle样式。通过实例代码演示了如何灵活运用官方文档中的选项，提升地图交互体验。

地图点击单个区域模块变色

Echarts 官方文档引用地址：https://echarts.apache.org/zh/option.html#geo.select

当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。（论熟读官方文档的重要性）

在Echarts—map—option—geo的配置选项中有一个select配置项，这个select专门配置地图选中之后的itemStyle样式以及label样式，下面放一部分我改动成功的代码供大家参考一下。

var option = {
          backgroundColor: "transparent",
          graphic: [],
          geo: {
            map: opt.mapName,
            roam: false, // 是否允许缩放
            zoom: 1.1,
            label: {
              normal: {},
              emphasis: {},
            },
            itemStyle: {
              normal: { // 默认地图区域样式
                areaColor: '#ddd',
                borderColor: "#4ECEE6",
                borderWidth: 1,
                shadowColor: "#2C99F6",
                shadowOffsetY: 0,
                shadowBlur: 25,
              },
              emphasis: { // 鼠标悬浮地图区域样式
                show: true,
                areaColor: "#0075FF",
              },
            },
            select: { // 地图选中区域样式
              label:{ // 选中区域的label(文字)样式
                color: '#fff'
              },
              itemStyle: {// 选中区域的默认样式
                areaColor: '#0075FF'
              },
            },
            layoutCenter: ["45%", "51%"], // 距离左右，上下距离的百分比
            layoutSize: "90%", // map百分比大小
          },
          series: [],
        };