1.效果图

左侧为地图展示，右侧可滚动地域和游客总量，地图下方图例对应4个区间分别是0，0.25，0.5，0.75 1对应地图颜色。

2.如要实现地图展示，需创建一个div容器用来加载地图，在加载地图前需准备json数据。这个数据就是当前的国内地图。DataV.GeoAtlas地理小工具系列，根据下载json数据。

3.配置当前地图的显示

容器:

<div id="GetScreenTouristRef" style="height: 220px; width: 250px"></div>

当前配置项，

基于 Echarts 的中国地图展示游客数据的图表。函数接受一个参数 touristDomesticFromTop，该参数应为一个包含了各地区游客数据的数组。

函数主要实现了以下功能：

1. 初始化 Echarts 实例，并注册中国地图。
2. 设置地图展示的样式，包括布局位置、大小、游标等。
3. 设置提示框样式和内容，根据鼠标悬停在地图上的位置显示相应地区的游客数据。
4. 设置地理坐标系为中国地图，禁止地图漫游和放大。
5. 在游标中设置指定的图例颜色inrange以及pieces。
6. 设置地图各区域的样式，包括边框宽度、颜色以及鼠标悬停时的样式变化。
7. 最后将传入的游客数据 touristDomesticFromTop 显示在地图上。

// 国内地图
const GetScreenTouristDomesticEcharts = (touristDomesticFromTop) => {// 获取地图容器const mapChart = document.getElementById("GetScreenTouristRef");var mapChartInstance = echarts.init(mapChart)// 注册地图echarts.registerMap("china", China);mapChartInstance.setOption({layoutCenter: ['50%', '40%'],//位置layoutSize: 220,//大小// 游标visualMap: {orient: 'horizontal',type: 'piecewise',itemWidth: 30,itemHeight: 7,showLabel: false,seriesIndex: [0],min: 0,max: 1,calculable: true,splitNumber: 4,itemGap: 0,left: 70,bottom: 10,inRange: {color: ['#1A3875', '#3164CB', '#508AFF', '#88AFFD'],symbol: 'rect'},pieces: [{ gt: 0.75, lte: 1, label: '0.75-1' },{ gt: 0.5, lte: 0.75, label: '0.5-0.75' },{ gt: 0.25, lte: 0.5, label: '0.25-0.5' },{ gt: 0, lte: 0.25, label: '0-0.25' }],},tooltip: {trigger: 'item',axisPointer: {type: 'line',snap: false},showContent: true,triggerOn: 'mousemove',confine: true,backgroundColor: 'rgba(0,0,0,0.6)',padding: 15,position: 'left',borderRadius: 6,borderColor: 'rgba(0,0,0,0.6)',borderWidth: 1,textStyle: {color: 'white',fontStyle: 'normal',fontWeight: 'normal'},formatter(params) {if (params && params.data && params.data.value) {var htmlText = `<div> ${params.data.name}：<span style='background: linear-gradient(to right, #5EB5F6, #8BEDF7);-webkit-background-clip: text;color: transparent;font-weight: 600;'>${params.data.shu}</span></div > `return htmlText} else {var htmlText = `${params.name} `return htmlText}},},geo: {map: 'china',roam: false, //开关可移动可放大},series: [{type: 'map',mapType: 'china',showLegendSymbol: false, //去掉指示点itemStyle: {normal: {borderWidth: 1, //区域边框宽度borderColor: '#00a6dc', //区域边框颜色areaColor: '#1A3875', //区域颜色label: {show: false, //是否显示各省名称textStyle: {color: '#ff5500', //显示各省名称颜色},},},emphasis: {areaColor: '#C79739', //区域颜色，鼠标悬停颜色label: {show: false, //鼠标悬浮时是否显示各省名称textStyle: {color: '#fdf1f6', //鼠标悬浮时显示各省名称的颜色},},},},data: touristDomesticFromTop}]});
}