echarts地图

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
        }
      ]
    }
  );
}