echarts3d地图热力图

ECharts是一个强大的数据可视化库，它支持3D地图功能，其中包括热力图（Heatmap）展示。在3D地图热力图中，通常用于表示地理区域上某个指标的数据密度，颜色深浅代表数据量的大小。要创建一个echarts3d的地图热力图，你需要做以下几个步骤：

1. 首先，在HTML中引入ECharts库和地图数据文件，例如China.js。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
<script src="https://unpkg.com/@antv/cartographic@1.2.1/dist/cartographic.min.js"></script>

2. 创建一个ECharts实例，并设置为3D地图模式。

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  type: 'map3d',
  mapType: 'china'
});

3. 定义热力图的数据和配置项，如颜色映射、视觉样式等。

var geoCoordMap = ...; // 这里需要中国各城市的经纬度数据
var data = ...; // 根据实际需求填充的数据，一般是一个二维数组，其中每一项对应地图上的一个点

option = {
  visualMap: {
    min: 0,
    max: 100, // 设置最大值，可以根据数据动态调整
    show: true,
    pieces: [ { value: 0, color: 'white' }, { value: 100, color: 'red' } ], // 色阶配置
    calculable: true,
    inRange: {
      symbolSize: [40, 60], // 热区大小
      opacity: 0.8
    }
  },
  series: [{
    type: 'heatmap3D',
    data: data,
    coordinates: geoCoordMap
  }]
};

4. 最后，通过`setOption`方法应用配置到图表上。

myChart.setOption(option);