v3+ECharts 地图实现多个自定义图片的图标

最新推荐文章于 2024-06-18 12:29:21 发布

知否灬知否

最新推荐文章于 2024-06-18 12:29:21 发布

阅读量593

点赞数 8

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_51958206/article/details/135867840

版权

在这里插入图片描述
备注：地图json, 图标图片准备替换下

<template>
    <div ref="mapEcharts" class="map-echart"></div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import mapcity from "@/tool/map/map.json"
import { ref, nextTick, onMounted } from 'vue'
const mapEcharts = ref(null)
onMounted(() => {
    //获取山东地图
    initEcharts()

})
function initEcharts() {
    echarts.registerMap('mapcity', mapcity)
    nextTick(() => {
        const map = echarts.init(mapEcharts.value, null, {
            renderer: 'canvas',
        })
        let LableData = [
            {
                name: "济南",
                value: [117.000923,
                    36.675807],
            },
            {
                name: "日照",
                value: [119.461208,
                    35.428588],
            },

        ];
        const option = {
            // 悬浮窗
            tooltip: {
                trigger: 'item',
            },
            geo: {
                map: 'mapcity',
                zoom: 1.2,
                roam: false,
                label: {
                    show: true,
                    color: 'black',
                    position: 'inside',
                    distance: 0,
                    fontSize: 10,
                    rotate: 0,
                },
                // 所有地图的区域颜色
                itemStyle: {
                    areaColor: '#eee',
                    borderColor: '#02c0ff',
                },
                emphasis: {
                    itemStyle: {
                        areaColor: '#aaa',
                        shadowColor: 'rgba(0,0,0,0.8)',
                    },
                },
            },
            series: [
                {
                    name: "lable",
                    type: "scatter",
                    coordinateSystem: "geo",
                    symbol: 'image://' + new URL(`./003.png`, import.meta.url).href,
                    symbolSize: [30, 30],
                    symbolOffset: [0, "10%"],
                    hoverAnimation: true,
                    zlevel: 2,
                    label: {
                        normal: {
                            show: false,
                            textStyle: {
                                color: "#fff",
                                lineHeight: 15,
                            },
                            formatter(params) {
                                return params.data.value[2];
                            },
                        },
                    },

                    itemStyle: {
                        normal: {
                            color: "#6495ED", //标志颜色
                            opacity: 0.8,
                            borderColor: "#aee9fb",
                            borderWidth: 0.6,
                        },
                    },
                    showEffectOn: "render",
                    rippleEffect: {
                        brushType: "stroke",
                    },
                    data: LableData,
                },
                {
                    name: "lable",
                    type: "scatter",
                    coordinateSystem: "geo",
                    symbol: 'image://' + new URL(`./001.png`, import.meta.url).href,
                    symbolSize: [20, 20],
                    symbolOffset: [0, "-70%"],
                    hoverAnimation: true,
                    zlevel: 2,
                    label: {
                        normal: {
                            show: false,
                            textStyle: {
                                color: "#fff",
                                lineHeight: 15,
                            },
                            formatter(params) {
                                return params.data.value[2];
                            },
                        },
                    },

                    itemStyle: {
                        normal: {
                            color: "#6495ED", //标志颜色
                            opacity: 0.8,
                            borderColor: "#aee9fb",
                            borderWidth: 0.6,
                        },
                    },
                    showEffectOn: "render",
                    rippleEffect: {
                        brushType: "stroke",
                    },
                    data: LableData,
                },

            ],
        }
        map.setOption(option)
        map.on('click', function (params) {


        })

    })

}
</script>

<style scoped>
.map-echart {
    width: 100%;
    height: calc(100% - 50px);
}

.topbox {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mapTitle {
    width: 300px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-weight: bold;
    cursor: pointer;
    color: #2d3436;
}
</style>