vue3中使用echarts实现自定义纹理3d地图

最新推荐文章于 2025-04-08 15:20:00 发布

陷入星河的猫

最新推荐文章于 2025-04-08 15:20:00 发布

阅读量5.4k

点赞数 1

本文链接：https://blog.csdn.net/qq_40920553/article/details/125927110

版权

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

echarts

3 篇文章

订阅专栏

本文介绍了如何通过npm安装Echarts，并在Vue项目中全局引入。详细步骤包括在main.js中配置，以及在vue组件中引入地图背景图片和geoJson数据。通过设置itemStyle属性，实现了地图上每个区域以重复背景图片展示的效果，并提供了完整的代码示例。同时，文章还展示了如何根据窗口大小调整地图的尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

npm下载echarts，在main文件中全局引入

npm install echarts -S

import * as Echarts from 'echarts'
app.config.globalProperties.$Echarts = Echarts;

vue文件中template

<div class="container">
    <img ref="dot" hidden src="../assets/map-bg.png">
    <div id="map" ref="map" style="height: 500px;"></div>
</div>

通过阿里云数据可视化平台下载获取geoJson数据文件，在vue文件中引入该数据文件

import "echarts/map/js/china.js";

实现直接贴代码

import { getCurrentInstance, ref } from 'vue';
// 获取当前组件实例下的proxy
const { proxy } = getCurrentInstance();
// 通过ref获取dom元素
const dot = ref(null)

const map = ref(null);

let myChart = proxy.$Echarts.init(document.getElementById('map'));
let options = {
    backgroundColor: "#040b1c",
    geo: {
        map: 'china',
        type: 'map',
        layoutCenter: ['50%', '50%'],
        layoutSize: '120%',
        zoom: 1,
        roam: false,
        itemStyle: {
            borderColor: '#AEF3FF',
            borderWidth: 2,
            areaColor: {
                image: dot.value,
                repeat: 'repeat'
            },
            shadowColor: 'rgb(58,115,192)',
            shadowOffsetX: 6,
            shadowOffsetY: 12
        }
    },
    series: [
        {
            type: 'map',
            map: 'china',
            layoutCenter: ['50%', '50%'],
            layoutSize: '120%',
            zoom: 1,
            roam: false,
            itemStyle: {
                borderColor: '#AEF3FF',
                borderWidth: 1,
                areaColor: {
                    image: dot.value,
                    repeat: 'repeat'
                },
            }
        }
    ]
}
myChart.setOption(options);
window.onresize = () => {
    myChart.resize()
}