echarts 地图默认一个地区为选中状态（高光状态）

最新推荐文章于 2025-05-06 11:32:27 发布

原创最新推荐文章于 2025-05-06 11:32:27 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端

本文介绍了如何使用ECharts在地图上实现高亮特定区域，如七星关区，并详细说明了如何通过导入自定义地图JSON文件来配置不同区域的颜色和边界。提示在录入series.data时注意避免包含地图模块本身。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

值得注意的时如果你想让某块地区设置为高光，那么你就不能直接把他放到data参数里面去，不然你设置的内容就会被他覆盖。

代码：

let myChart = echarts.init(document.getElementById('mapBar'));
echarts.registerMap("bijie", bijie);   // 自己导入的JSON文件
let option = {
     
      geo: {
		silent: true,
        map: "beijing", //地图类型
        aspectScale: 0.75, //这个参数用于 scale 地图的长宽比
        zoom: 1.2, //当前视角的缩放比例
        top: '80',
        roam: false, //是否开启鼠标缩放和平移漫游
        itemStyle: {
          normal: {
            areaColor: "#115ae1", //地图区域的颜色
            shadowColor: "rgba(0, 0, 0, 1)", //阴影颜色
            shadowBlur: 20,
            borderWidth: 0, //描边线宽。为 0 时无描边
            shadowOffsetX: 5, //阴影水平方向上的偏移距离
            shadowOffsetY: 10, //阴影垂直方向上的偏移距离
          },
        },
//////////////////////////////////////////////////////
		regions: [ //这个地方是关键,通过设置regions,可以实现不同的省份边界线配置不同的颜色,
			{
				name: '七星关区', //这个名字要和china.js保持一致
				itemStyle: {
				normal: {
					areaColor:'#f3db5c', // 背景颜色
					borderColor: "#f0f",  
					borderWidth: 1, // 边框宽度
					shadowBlur: 20, // 阴影泛化程度
					borderWidth: 0, //描边线宽。为 0 时无描边
					shadowOffsetX: 4, //阴影水平方向上的偏移距离
					shadowOffsetY: 10, //阴影垂直方向上的偏移距离
				},
			},
		}],

//////////////////////////////////////////////////////
      },
      series: [{
			data: mapData, // 地图值
      }],
    };
    myChart.setOption(option);

在对series.data 的值录入的时候千万不要把需要展示的地图模块展示进去。

以上项目针对于自定义地图，需要导入地图JSON。它可以详细到区县，如果你有耐心自己去把家乡的地区框选出来，那他可以无限详细！！！