Echart（v5）实现中国地图区域图

一、需求背景

需要实现一个中国地图的区域图（区域级别到市），并且指定区域可以高亮。

二、相关工具

1、中国的GeoJSON数据获取：DataV.GeoAtlas地理小工具系列

2、Echart组件库 Apache ECharts

三、实现

echart配置：

const options = {series:[{type: 'map',map: 'china',roam: true, //缩放，开启缩放或者平移，可以设置成 'scale' 或者 'move'， true都开启zoom: 1,          // 地图放大aspectScale: 0.8, //地图宽高比例nameProperty: 'name', //关联关键数据geojson数据中的关键key emphasis: {disabled: true //关闭高亮},itemStyle: {normal: {areaColor: 'rgba(27, 73, 135, 0.3)',borderColor: 'rgba(58, 128, 177, 0.4)',},},select: {disabled: true},tooltip: {trigger: "item",show: true,formatter: (params: any) => {console.log(params)return 'zyk';}},//todo 根据添加的地点，确定data里的数据，精确到市data: [{name: '乌鲁木齐市',value: 66,//自定义特殊 tooltip，仅对该数据项有效tooltip:{formatter:(val:any)=>{debuggerconsole.log(val)return '666'}},itemStyle: {areaColor: 'yellow',color: 'yellow'}}]}]
}const MyChart = echarts.init(document.getElementById("map-container"));
echarts.registerMap("china", chinaMap);
MyChart.setOption(options);

关键注释：

【1】echarts.registerMap("china", chinaMap); //注册地图

// params1：map的名称，必须与options.series中的map字段一致

// params2: chinaMap，中国的GeoJSON

效果图：