echarts 地图标点图片

### 如何在 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]。同时还可以根据实际需求进一步定制这些标志的位置、尺寸以及其他交互特性。