echarts bmap地图 自定义图标上方添加文字

实现效果

代码如下:

import pump from '@/gis/assets/image/pump.png';

series: [
    {
        type: 'lines',
        coordinateSystem: 'bmap',
        markPoint: {
            // symbol: `image://${pump}`, // 也可支持本地图片
            symbol: 'path://M512.21504 373.029547c-76.264107 0-138.287787 62.149973-138.287787 138.53696 0 76.386987 62.02368 138.492587 138.287787 138.492586 76.21632 0 138.24-62.1056 138.24-138.492586 0-76.386987-62.02368-138.53696-138.24-138.53696z m0 214.162773c-41.5744 0-75.4176-33.96608-75.4176-75.625813s33.8432-75.543893 75.4176-75.543894c41.570987 0 75.369813 33.88416 75.369813 75.543894s-33.80224 75.625813-75.369813 75.625813z m454.949547-107.103573h-33.54624a422.447787 422.447787 0 0 0-32.027307-133.341867c-21.295787-50.404693-51.800747-95.696213-90.58304-134.56384-38.874453-38.87104-83.995307-69.376-134.355627-90.712747a419.334827 419.334827 0 0 0-133.174613-32.1536v-33.62816c0-17.408-14.0288-31.51872-31.433387-31.51872-17.322667 0-31.392427 14.11072-31.392426 31.51872v33.672534a417.7408 417.7408 0 0 0-132.918614 32.109226C297.41056 142.80704 252.245333 173.312 213.418667 212.18304 174.63296 251.05408 144.172373 296.3456 122.876587 346.74688a421.21216 421.21216 0 0 0-32.068267 133.341867H56.58624c-17.322667 0-31.392427 14.11072-31.392427 31.47776 0 17.408 14.06976 31.51872 31.392427 31.51872h34.22208a421.74464 421.74464 0 0 0 32.068267 133.338453c21.295787 50.36032 51.756373 95.65184 90.54208 134.52288 38.826667 38.87104 83.991893 69.376 134.314666 90.753707 42.461867 17.916587 87.118507 28.730027 133.04832 32.109226v32.279894c0 17.408 14.06976 31.515307 31.433387 31.515306 17.408 0 31.429973-14.11072 31.429973-31.515306v-32.279894c45.970773-3.3792 90.58304-14.19264 133.00736-32.109226 50.36032-21.377707 95.484587-51.882667 134.355627-90.753707 38.782293-38.87104 69.287253-84.16256 90.58304-134.52288a423.028053 423.028053 0 0 0 32.027307-133.338453h33.54624c17.404587 0 31.429973-14.114133 31.429973-31.51872 0-17.363627-14.0288-31.47776-31.429973-31.47776zM543.645013 870.611627v-73.434454c0-17.322667-14.021973-31.51872-31.429973-31.51872-17.36704 0-31.433387 14.196053-31.433387 31.51872v73.434454c-173.312-15.127893-311.808-153.87648-326.89152-327.522987h76.557654c17.36704 0 31.433387-14.114133 31.433386-31.51872 0-17.363627-14.06976-31.47776-31.433386-31.47776h-76.561067c15.08352-173.605547 153.494187-312.357547 326.761813-327.522987v71.02464c0 17.363627 14.06976 31.47776 31.392427 31.47776 17.404587 0 31.433387-14.114133 31.433387-31.47776v-71.0656c173.39392 15.04256 311.975253 153.87648 327.017813 327.56736h-77.151573c-17.322667 0-31.433387 14.11072-31.433387 31.47776 0 17.408 14.11072 31.51872 31.433387 31.51872h77.151573c-15.039147 173.63968-153.535147 312.39168-326.847147 327.519574z',
            symbolSize: 20,
            symbolOffset: ['-10%', '-10%'],
            effect: {
                show: true,
                shadowBlur: 0
            },
            label: {
                formatter: '{c}',
                position: 'top',
                color: '#00ffff',
                show: true
            },
            data: monitorPoints
        },
        seriesIndex: 4,
        zlevel: 4
    }
]

重点:

label: {
  formatter: '{c}',
  position: 'top',
  color: '#00ffff',
  show: true
},
posted @ 2023-10-26 20:51  ZerlinM  阅读(42)  评论(0编辑  收藏  举报