echarts地图立体效果

ECharts 提供了 `map3D` 组件，可以实现地图的立体效果。

首先要引入相应的库文件和地图数据，比如：

<!-- 引入 echarts.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<!-- 引入 echarts-gl.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/1.1.1/echarts-gl.min.js"></script>
<!-- 引入中国地图数据 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/dataTool.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/bmap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/map.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/map3D.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/geo3D.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/echarts-liquidfill.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/wordCloud.min.js"></script>

<!-- 引入中国地图数据 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/geo/china.json"></script>

然后在页面中创建一个 div 容器用来渲染地图：

<div id="mapContainer" style="height: 500px"></div>

接着就可以使用 ECharts 的 API 来绘制地图了，示例代码如下：

// 初始化 echarts 实例
let myChart = echarts.init(document.getElementById('mapContainer'));

// 配置项
let option = {
  geo3D: {
    map: 'china',
    itemStyle: {
      color: '#0099ff',
      opacity: 1
    },
    label: {
      show: false,
      textStyle: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    shading: 'lambert',
    light: {
      main: {
        intensity: 2,
        shadow: true,
        alpha: 30,
        beta: 30
      },
      ambient: {
        intensity: 0.5
      }
    },
    viewControl: {
      alpha: 15,
      beta: 40,
      distance: 100,
      minDistance: 50,
      maxDistance: 200
    },
    groundPlane: {
      show: true,
      color: '#aaa'
    },
    realisticMaterial: {
      roughness: 0.9,
      metalness: 0
    }
  },
  series: [
    {
      type: 'scatter3D',
      coordinateSystem: 'geo3D',
      symbolSize: 5,
      itemStyle: {
        color: '#fff'
      },
      data: [
        [113.324443, 23.102604],
        [116.405285, 39.904989],
        [121.473662, 31.230372],
        [104.065735, 30.659462],
        [106.544809, 29.556347]
      ]
    }
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

上面的代码会绘制一个中国地图，并在地图上显示一些散点。你可以根据需要修改配置项和数据来实现自己想要的效果。