ECharts - 自定义地图散点标记的背景图片(附样例)
作者:hangge | 2024-02-20 09:35
当使用 ECharts 制作地图散点标记时,我们通常可以使用默认的标记图标,比如圆点或者其他简单形状。然而,有时候我们希望使用自定义的背景图片来代替默认的标记图标,以使地图更符合特定主题或需求。下面我将演示如何在 ECharts 中实现自定义地图散点标记的背景图片。
(2)第 1 种是直接通过提供图片的 url 地址(image://url)进行设置:
(3)第 2 种方法是使用 base64 编码的图片数据:
(4)第 3 中方法是如何使用 Vue 开发,我们可以直接通过 require 引入图片使用:
1,默认样式
(1)ECharts 默认自带了 circle(圆形)、rect(矩形)、roundRect(圆角矩形)、triangle(三角形)、diamond(菱形)、pin(图钉)、arrow(箭头)等标记样式,下面是使用 pin 图钉样式的效果:
(2)下面是相关的样例代码:
<template> <!-- 地图容器 --> <div ref="mapContainer" style="width:100%; height: 600px;"></div> </template> <script> // 引入echarts库 import echarts from 'echarts' export default { data() { return { // 导入江苏省地图的JSON数据 jsMap: require("@/libs/mapJson/320000.json"), // ECharts的配置项 chartOption: { geo: [ { // 地图名称,这里为江苏省 map: '江苏', // 地图缩放级别 zoom: 1, // 地图上的标签配置 label: { show: true, // 是否显示标签 fontSize: 13, // 标签字体大小 color: '#333', // 标签字体颜色 position: ['50%', '50%'], // 标签位置 }, // 地图区域的样式配置 itemStyle: { areaColor: '#5FC5C1', // 地图区域颜色 borderColor: '#fff', // 地图区域边界颜色 fontWeight: 700, // 地图区域字体粗细 borderWidth: 1, // 地图区域边界宽度 shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色 shadowBlur: 10, // 阴影模糊度 }, // 地图区域在强调(hover)状态下的样式配置 emphasis: { itemStyle: { label: { color: '#222', // 强调状态下的标签颜色 fontWeight: 700, // 强调状态下的标签字体粗细 }, areaColor: '#2D8F8A', // 强调状态下的地图区域颜色 borderColor: '#fff', // 强调状态下的地图区域边界颜色 }, }, }, ], series: [ { name: "alarmScatter", type: "scatter", symbol: "pin", symbolSize: 45, coordinateSystem: "geo", data: [], label: { show: true, color: "#ffebdc", fontSize: 13, formatter: "{@value}" }, itemStyle: { color: "#1F94E7", opacity: 0.9 } } ] }, } }, mounted() { // 在组件挂载完成后初始化地图 this.initChart() }, methods: { // 初始化地图 initChart() { // 注册江苏省地图 echarts.registerMap("江苏", this.jsMap) // 初始化ECharts实例,并将地图挂载到指定的容器上 this.chart = echarts.init(this.$refs.mapContainer) // 设置散点数据 this.chartOption.series[0].data = [ { value: [117.184811, 34.261792, 234], name: "徐州市" }, { value: [120.864608, 32.016212, 123], name: "南通市" }, { value: [119.021265, 33.597506, 323], name: "淮安市" } ] // 设置ECharts的配置项 this.chart.setOption(this.chartOption) } }, beforeDestroy() { // 在组件销毁前,释放ECharts实例占用的资源 if (this.chart) { this.chart.dispose() } }, } </script>
2,自定义散点背景
(1)假设我们需要将散点标记的背景替换成如下效果,将 symbol 配置属性设置为指定的图片即可。具体有三种方式指定图片。
series: [ { name: "alarmScatter", type: "scatter", symbol: "image:///hangge-web/image/jsmap-pin.png", symbolSize: 100, coordinateSystem: "geo", data: [], label: { show: true, color: "#2C8E89", fontSize: 14, formatter: "{@value}" } } ]
series: [ { name: "alarmScatter", type: "scatter", symbol: "image://data:image/png;base64,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", symbolSize: 100, coordinateSystem: "geo", data: [], label: { show: true, color: "#2C8E89", fontSize: 14, formatter: "{@value}" } } ]
(4)第 3 中方法是如何使用 Vue 开发,我们可以直接通过 require 引入图片使用:
series: [ { name: "alarmScatter", type: "scatter", symbol: "image://" + require("@/assets/jsmap-pin.png"), symbolSize: 100, coordinateSystem: "geo", data: [], label: { show: true, color: "#2C8E89", fontSize: 14, formatter: "{@value}" } } ]
全部评论(0)