echarts设置3d地图

### 如何在 ECharts 中设置和配置 3D 地图

#### 配置基础环境
为了使用 ECharts 的 3D 功能，需要引入 `echarts` 和 `echarts-gl` 库。确保项目中已经包含了这两个库的最新版本。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.x/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.x/dist/echarts-gl.min.js"></script>

#### 初始化图表实例并加载地图数据
创建一个容器用于容纳图表，并初始化 ECharts 实例：

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

接着，注册所需的地图文件，这里以中国为例：

myChart.showLoading();
$.getJSON('https://geo.datav.aliyun.com/areas_v3/bound/100000.json', function (chinaJson) {
    echarts.registerMap('China', chinaJson);
    myChart.hideLoading();
});

#### 设置基本选项
定义绘制 3D 地图的基础配置项，包括视角调整、光照效果以及地形高度映射等参数：

option = {
    geo3D: {
        map: 'China',
        shading: 'lambert',
        boxHeight: 1,
        viewControl: {
            projection: 'perspective'
        },
        light: {
            main: {
                intensity: 1.2,
                shadow: true
            }
        }
    }
};

上述代码片段设置了地理坐标系组件为三维模式，并应用了兰伯特着色法来增强立体感[^1]。

#### 添加交互特性
为了让用户体验更加友好，在此基础上还可以加入点击事件监听器以便于响应用户的操作行为：

myChart.on('click', function (params) {
    if (params.componentType === 'series') {
        alert(`您选择了 ${params.name}`);
    }
});

这段脚本实现了当用户单击某个区域时弹窗显示该地区的名称[^3]。

通过以上几个部分的操作即可完成一个简单的基于 ECharts 的 3D 地图展示案例。当然实际应用场景可能会更复杂一些，可能涉及到更多的自定义样式或是与其他图形组合呈现等多种情况。