echarts地图标点

### 实现地理坐标标点 要在 ECharts 中添加基于地理坐标的标点，需先确保已正确引入 ECharts 库文件[^2]。HTML 文件结构应包含用于展示图表的 `div` 容器以及必要的脚本引用。 对于具体的 JavaScript 配置部分，在初始化 ECharts 实例之后，设置系列类型为 `'scatter'` 或者 `'effectScatter'` 来创建散点图效果，并通过 `geoCoord` 参数指定地理位置数据： ```javascript var chartDom = document.getElementById('map'); var myChart = echarts.init(chartDom); var option; option = { geo: { map: 'world', // 可替换为中国或其他地区代码 roam: true, zoom: 1.2 }, series : [ { name: '地点', type: 'scatter', coordinateSystem: 'geo', data: [ {name: '北京', value: [116.4074, 39.9042]}, {name: '上海', value: [121.4737, 31.2304]} ], symbolSize: function (val) { return val[2] * 5; } } ] }; myChart.setOption(option); ``` 上述配置中，`data` 数组内的每一项都代表一个位置点，其中包含了名称和对应的经度纬度值[^3]。此外还可以调整 `symbolSize` 函数来自定义不同大小的标记符号。 为了使这些标点更加直观易懂，可以进一步定制样式属性如颜色、透明度等；同时利用 tooltip 组件提供鼠标悬停提示信息功能。

### 如何在 ECharts 中使用自定义地标图标图片 为了实现带有自定义地标的地图效果，在 `Vue` 项目中集成并配置 `ECharts` 是必要的。通过设置特定选项，可以在地图上显示自定义图像作为地标。 #### 导入依赖库 确保已经在项目的入口文件（如 `main.js`）中正确导入了 `ECharts` 并挂载到全局对象： ```javascript import echarts from 'echarts' Vue.prototype.$echarts = echarts; ``` #### 初始化图表实例 创建一个新的方法来初始化地图组件，并应用所需的样式和功能。这通常是在页面加载完成后执行的操作之一： ```javascript const myChart = echarts.init(document.getElementById('main')); myChart.setOption({ series: [{ type: 'map', mapType: 'china', // 或者其他地区名称 roam: true, label: { show: false }, itemStyle: { areaColor: '#eee', borderColor: '#333' } }] }); ``` #### 添加自定义地标图标 要向地图添加具有自定义图标的地标，可以通过修改 `series` 的 `markPoint` 属性完成此操作。这里展示了如何指定不同类型的地标及其对应的 URL 路径： ```javascript let baseBg = require('@/assets/path/to/base-bg-image.png'); let littleIcon = require('@/assets/path/to/little-icon.png'); myChart.setOption({ ... series: [{ ... markPoint: { symbolSize: function (val) { return val[2] * 20; // 动态调整大小 }, data: [ { name: "浙江", value: ["120.19", "30.26", 1], // 经纬度坐标加上权重值 symbol: 'image://' + baseBg, // 使用本地资源路径 tooltip: { formatter: '{b}' // 显示城市名 } }, { name: "杭州", value: ["120.15", "30.28", 0.5], symbol: 'image://' + littleIcon, tooltip: { formatter: '{b}' } } ] } }] }); ``` 上述代码片段说明了怎样利用 `symbol` 参数设定为 `'image://URL'` 来引用外部或内部存储的 PNG 文件作为地标图案[^4]。同时还可以根据实际需求进一步定制这些标志的位置、尺寸以及其他交互特性。