ECharts Globe 是一个基于 ECharts 的三维地球组件，它允许开发者将全球数据以交互式地图的形式展示出来。通过 ECharts Globe，我们可以实现全球视角的交互式地图，让用户能够直观地了解不同地区的数据分布情况。本文将详细介绍如何使用 ECharts Globe 创建交互式地图，包括准备工作、地图配置、数据展示以及交互功能等方面。

一、准备工作

在开始使用 ECharts Globe 之前，我们需要做一些准备工作：

  1. 环境搭建：确保你的开发环境已经安装了 ECharts。可以通过 npm、yarn 或直接下载 ECharts 的压缩包来安装。
// 使用 npm 安装 ECharts npm install echarts --save
  1. 引入 ECharts Globe：在 HTML 文件中引入 ECharts 和 ECharts Globe 的相关文件。
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <!-- 引入 ECharts --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script> <!-- 引入 ECharts Globe --> <script src="https://cdn.bootcdn.net/ajax/libs/echarts-globe/2.0.9/echarts-globe.min.js"></script> <script type="text/javascript"> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('container')); </script> </body> </html>

二、地图配置

接下来，我们将配置 ECharts Globe 的基本参数。

  1. 基本配置：设置地图的尺寸、视角等基本参数。
var option = { globe: { // 地图类型，' globe' 或 'map' type: 'globe', // 地图视角 viewControl: { enable: true, // 指定视角缩放级别 zoom: 1.5, // 指定视角的缩放比例 zoomScale: 1.5, // 指定视角的旋转角度 rotate: [30, 30], // 指定视角的缩放动画 autoRotate: true, // 指定视角的缩放动画速度 autoRotateSpeed: 30 }, // 地图背景颜色 background: '#000', // 地图阴影效果 shadowColor: 'rgba(0, 0, 0, 0.5)', // 地图高亮显示 highlightFeature: true, // 地图高亮显示的颜色 highlightColor: '#fff', // 地图纹理 baseTexture: null, // 地图高光纹理 highlightTexture: null, // 地图阴影纹理 shadowTexture: null, // 地图旋转动画 rotation: { // 地球自转速度 speed: 5, // 地球自转方向，'cw' 或 'ccw' autoRotate: true }, // 地图光照 light: { // 光照颜色 color: '#fff', // 光照强度 intensity: 1.5, // 光照方向 direction: [0.5, 1, 1] }, // 地图极光 polar: { show: false, // 极光颜色 color: '#fff', // 极光透明度 opacity: 0.5 }, // 地图标签 label: { // 标签显示 show: true, // 标签字体大小 fontSize: 12, // 标签字体颜色 color: '#fff', // 标签背景颜色 backgroundColor: 'rgba(0, 0, 0, 0.5)', // 标签背景透明度 borderColor: '#fff', // 标签边框大小 borderWidth: 1 }, // 地图经纬线 lines: { // 经纬线显示 show: true, // 经纬线颜色 color: '#fff', // 经纬线宽度 width: 1, // 经纬线类型 type: 'solid' } } };
  1. 添加数据：将数据添加到地图中，可以展示不同地区的数据分布情况。
// 示例数据 var data = [ { name: '北京', value: 100 }, { name: '上海', value: 200 }, { name: '广州', value: 150 } ]; // 设置 ECharts Globe 的 series 配置 option.series = [ { type: 'globe', coordinateSystem: 'globe', // 数据项 data: data, // 高亮显示 itemStyle: { color: '#f4e925' }, // 标记 label: { show: true, formatter: '{b}: {c}' } } ]; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);

三、交互功能

ECharts Globe 支持多种交互功能，以下是一些常见的交互方式：

  1. 鼠标悬停：鼠标悬停在某个地区时，显示该地区的详细信息。
// 鼠标悬停事件 myChart.on('hover', function (params) { if (params.componentType === 'series') { // 显示地区名称和数值 console.log(params.name + ': ' + params.value); } });
  1. 点击事件：点击某个地区时，触发相应的事件。
// 点击事件 myChart.on('click', function (params) { if (params.componentType === 'series') { // 执行点击事件逻辑 console.log('点击了 ' + params.name); } });
  1. 缩放和旋转：用户可以通过鼠标滚轮和鼠标拖拽来缩放和旋转地图。

四、总结

通过以上步骤，我们可以使用 ECharts Globe 创建一个交互式地图，展示全球视角的数据分布情况。ECharts Globe 提供了丰富的配置选项和交互功能，可以帮助开发者快速实现各种场景下的三维地球可视化。希望本文对你有所帮助！