nuxt3 世界地图（中文版）

前言

注意使用其它语言也是一样可以的，我这里使用的是nuxt3，vue、react都是一样的效果。

效果图

依赖

npm install echarts

本文使用的是："echarts": "^5.4.3",

配置echarts插件

创建文件echarts.client.ts

import * as echarts from 'echarts';
// 这个是热词图，与地图无关
~~import 'echarts-wordcloud';~~

export default defineNuxtPlugin(nuxtApp => {
    return {
        provide: {
            eChart: echarts,
        },
    };
});

下载其它

Github其它文件链接，世界地图需要world.json和country-name-zh.json

页面使用

主要的配置使用*表示，其它配置可以选择性删除，可以直接复制进行修改

<!-- 首页机构地区分布 -->
<template>
    <div id="world" ref="world"></div>
</template>

<script lang="ts" setup>
// 引入json文件
* import worldJson from '~/assets/json/world.json';
* import nameMap from '~/assets/json/country-name-zh.json';

const { $eChart } = useNuxtApp();
const world = ref();
const colors: string[] = ['#ecf5ff', '#d9ecff', '#c6e2ff', '#a0cfff', '#79bbff', '#409EFF', '#337ecc'];

onMounted(() => {
    * $eChart.registerMap('world', worldJson);
    const myEchart = $eChart.init(world.value);
    myEchart.setOption({
        title: {
            show: false,
        },
        grid: {
            top: '3%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true,
        },
        tooltip: {
            trigger: 'item',
            // 标题背景色
            // backgroundColor: 'transparent',
            // 边框颜色
            borderColor: '#FFFFFF',
            // 边框线宽
            // borderWidth: 0,
            // 图例内边距，单位px  5  [5, 10]  [5,10,5,10]
            padding: [5, 10],
            // 文本样式
            textStyle: 'mytextStyle',
            formatter: function (params: any) {
                return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value));
            },
        },
        // 左下角的渐变颜色条
        visualMap: {
            min: 0,
            // max值根据实际情况设置
            max: 200,
            left: 'left',
            type: 'continuous',
            show: true,
            textStyle: {
                fontSize: 12,
                color: '#fff',
            },
            realtime: false,
            orient: 'horizontal',
            calculable: true,
            // 自定义颜色，每一个小段都是一个颜色
            pieces: [
                { value: 0, color: colors[0] },
                { min: 1, max: 19, color: colors[1] },
            ],
            // 颜色取值
            inRange: {
                color: colors,
            },
        },
        // 颜色块的数值
        // dataRange: {},
        series: [
            {
                name: 'World Population (2010)',
                type: 'map',
                silent: false,
                mapType: 'world',
                zoom: 1.2,
                // aspectScale: 1,
                // 禁止进行缩小
                roam: false,
                itemStyle: {
                    // 地图初始颜色
                    areaColor: '#c6e2ff',
                    borderWidth: 0.5,
                    borderColor: 'rgba(0, 0, 0, 0.3)',
                    borderType: 'solid',
                    // 图形的描边颜色
                    // normal: {
                    //     borderColor: 'rgba(0, 0, 0, 0.2)',
                    // },
                    emphasis: {
                        label: {
                            show: true,
                            // 悬浮在地图上的文字颜色
                            textStyle: {
                                color: '#333',
                            },
                        },
                        // 鼠标滑过区域颜色
                        areaColor: {
                            // type: 'radial',
                            // x: 0.5,
                            // y: 0.5,
                            // r: 1,
                            colorStops: [
                                // {
                                //     offset: 0,
                                //     color: '#c6e2ff', // 0% 处的颜色
                                // },
                                {
                                    offset: 1,
                                    color: '#5470c6', // 100% 处的颜色
                                },
                            ],
                            globalCoord: false,
                        },
                    },
                },
                // 图形上的文本标签（显示地图省份）
                label: {
                    normal: {
                        show: false,
                    },
                },
                // 这里可以设置数值，数值不同颜色不同
                data: [
                    { name: '美国', value: '1' },
                    { name: '中国', value: '200' },
                ],
                * nameMap,
            },
        ],
    });
});
</script>

<style lang="scss" scoped>
#world {
    width: 100%;
    height: 380px;
}
</style>