ECharts 以地图为底图的热力图

以下代码放到echarts 官网示例直接显示效果。

1. 设置 geo 使用对应的地图
2. 设置visualMap
3. 设置数据 （坐标 + 权重）

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/geo/USA.json', function (usaJson) {
  myChart.hideLoading();
  echarts.registerMap('USA', usaJson, {
    Alaska: {
      left: -131,
      top: 25,
      width: 15
    },
    Hawaii: {
      left: -110,
      top: 28,
      width: 5
    },
    'Puerto Rico': {
      left: -76,
      top: 26,
      width: 2
    }
  });
  option = {
    
      // 【新增】必须配置 geo 组件，heatmap 才能找到坐标系
  geo: {
    map: 'USA',
    roam: true,
    emphasis: {
      label: {
        show: true
      }
    },
    itemStyle: {
      areaColor: '#f3f3f3', // 地图底色
      borderColor: '#999'
    }
  },
    
 visualMap: {
    min: 0,
    max: 100, // 修改为模拟数据的最大值
    calculable: true,
    realtime: false,
    inRange: {
color: [
    '#0d0221', '#261447', '#4a1259', '#7b2d8e', 
    '#b5367a', '#e8457a', '#ff7eb3', '#ffb7d5'
]
    },
    // 建议添加 textStyle 以确保颜色条可见
    textStyle: {
        color: '#000'
    }
},
  series: [
    {
      name: 'Gaussian',
      type: 'heatmap',
      coordinateSystem: 'geo',
      data: [
         [-74.006, 40.7128, 100], // 纽约
            [-77.0369, 38.9072, 90], // 华盛顿
           [-75.1652, 39.9526, 85], // 费城
           [-71.0589, 42.3601, 80], // 波士顿
           // 美国西海岸城市群 (高密度)
            [-118.2437, 34.0522, 95], // 洛杉矶
            [-122.4194, 37.7749, 88], // 旧金山
            [-122.084, 37.422, 75],   // 硅谷/圣何塞
            
            // 中部及南部主要城市
            [-87.6298, 41.8781, 70],  // 芝加哥
            [-95.3698, 29.7604, 65],  // 休斯顿
           [-81.6557, 27.7926, 60],  // 奥兰多 (旅游热点)
            [-112.074, 33.4484, 55],  // 凤凰城
           
            // 随机分布的低密度点 (模拟乡村或稀疏地区)
           [-104.9903, 39.7392, 10], // 丹佛
            [-96.797, 32.7767, 15],   // 达拉斯
            [-80.1918, 25.7617, 20],  // 迈阿密
           [-157.8583, 21.3069, 5]   // 檀香山 (夏威夷)
        ],
        blur: 30,
        pointSize: 20,
      emphasis: {
        itemStyle: {
          borderColor: '#333',
          borderWidth: 1
        }
      }
    }
  ]
  
  
  
  
  };
  myChart.setOption(option);
});```