vue3 ECharts实现可视化中国地图

目录

版本问题解决

中国地图实现

版本问题解决

目前echarts的最新版本为5.5.1

echarts在4.9.0版本以后移除了中国地图，所以如果的你的版本高于4.9.0就需要手动导入中国地图。版本低于或者等于4.9.0则不需要导入。

这里我分享一种导入方法：

1.将项目的echarts版本切换为4.9.0

npm install echarts@4.9.0

2.切换成功后我们打开node_modules目录并找到echarts的依赖包

3.展开echarts目录会发现有个map目录，我们把map目录复制一份可以先保存到桌面 。

需要注意的是不要直接在vscode里面复制，可能会失败建议直接在windows文件系统打开项目复制如下图：

4.复制好先找个目录保存

5.接着就可以把项目中的echarts版本切换回原先版本了。

这里我切换回最新版本。

npm install echarts@latest

切换回最新版echarts依赖包下是没有map目录的

 6.现在就可以导入了

复制map文件夹到echarts依赖包下如图：

中国地图实现

1.在vue的main.js/ts入口文件导入echarts和导入中国地图

// 导入echarts图表库及其中国地图JSON数据
import * as echarts from 'echarts'
import china from 'echarts/map/json/china.json' // 导入china包
echarts.registerMap('china', china)

2. 现在就可以编写中国地图组件了代码如下

<template>
    <!-- 地图容器 -->
    <div class="map" ref="chartContainer"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts/map/js/china'; // 导入中国地图数据

// 定义地图容器的引用
const chartContainer = ref(null);

// 初始化地图的配置项
const option = ref({
    tooltip: {
        trigger: 'item' // 鼠标悬浮时显示提示信息
    },
    visualMap: {
        min: 0, // 最小值
        max: 1000, // 最大值
        left: 'left', // 位置
        top: 'bottom', // 位置
        text: ['高', '低'], // 文本
        calculable: true // 是否显示拖拽用的手柄
    },
    series: [
        {
            name: '数据', // 系列名称
            type: 'map', // 类型为地图
            map: 'china', // 使用的地图类型，这里是中国地图
            label: {
                show: true // 显示地图区域名称
            },
            data: [
                { name: '北京', value: 10 },
                { name: '天津', value: 200 },
                { name: '上海', value: 300 },
                { name: '山东', value: 90 },
                { name: '河北', value: 500 },
                { name: '河南', value: 800 },
                { name: '江苏', value: 700 },
                { name: '浙江', value: 600 },
                // 继续添加更多省份数据项
            ]
        }
    ]
});

// 清理省份名称的函数，去掉省份名称的常见后缀
function cleanProvinceName(provinceName) {
    const suffixes = ["市", "省", "自治区", "特别行政区"];
    for (let suffix of suffixes) {
        provinceName = provinceName.replace(new RegExp(suffix + "$"), "");
    }
    return provinceName;
}

// 初始化地图函数，创建echarts实例并设置选项
const init = () => {
    const chart = echarts.init(chartContainer.value);
    chart.setOption(option.value);
}

onMounted(() => {
    init();
});

</script>

<style scoped>
.map {
    width: 800px;
    height: 650px;
}
</style>

效果展示