vue加载echarts中国地图

1.效果

2. 参考文章：

https://blog.csdn.net/qq_45832807/article/details/123692476?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167894895616800182163938%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167894895616800182163938&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_blogfirst_rank_ecpm_v1~rank_v31_ecpm-13-123692476-null-null.blog_rank_default&utm_term=echarts&spm=1018.2226.3001.4450
作者：HerayChen

3.china.json 前往参考文章下载

4.单页面完整代码

<template>
    <div ref="openingChart" style="height: 600px;"></div>
</template>


<script>
import china from "../assets/chinaChange.json";
export default {
    mounted() {
		setTimeout(() => {
            this.initCharts();
        }, 3000);
	},
    methods: {
        initCharts() {
            // 初始化中国地图
            this.$echarts.registerMap("china", china);
            // 获取dom节点
            let openingChart = this.$echarts.init(this.$refs.openingChart);
            // option配置写在最下面的
            let option = {
                // 地图背景色
                backgroundColor: "#ccd3e4",
                geo: {
                    map: 'china',
                },
                tooltip: {
                    trigger: 'item',
                    // 自定义提示框的内容
                    /** 这里自定义显示的值是data中value数组的第二个值
                     * formatter(params) {
                            return (
                            "
" +
                            params.data.name +
                            " 
 " +
                            "省份总额度：" +
                            params.data.value[2] +
                            "（万元）
"
                            );
                        }
                     */
                },
                series: [
                    {
                        type: 'map',
                        map: 'china',
                        geoIndex: 1,
                        showLegendSymbol: false, // 存在legend时显示
                        tooltip: {
                            show: false
                        },
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        roam: false,

                        itemStyle: {
                            normal: {
                                areaColor: "#aaa",
                                borderColor: "#ccd3e4",
                                borderWidth: 1,
                            },
                            emphasis: {
                                areaColor: "#aaa",
                            },
                        },
                    }, {
                        name: '省份总额度',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: [{
                            name: "深圳",
                            value: [121.15, 31.89, 12],
                        },
                        {
                            name: "武汉",
                            value: [109.781327, 39.608266, 29]
                        }],
                        symbolSize: 20,
                        symbol: 'circle',
                        label: {
                            normal: {
                                show: false,
                            },
                            emphasis: {
                                show: false,
                            },
                        },
                        showEffectOn: "render",
                        itemStyle: {
                            normal: {
                                color: {
                                    type: "radial",
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "#e5c68b",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "#6e96d4",
                                        },
                                        {
                                            offset: 1,
                                            color: "#6e96d4",
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                            },
                        },

                    },
                ]
            }

            openingChart.setOption(option);
            window.addEventListener("resize", () => {
                openingBankChart.resize();
            });
        }
    },
    mounted() {
        this.initCharts();
    }
}
</script>


<style scoped>
#myChart {
    width: 100vw;
    height: 100vh;
    border: 1px solid rebeccapurple;
}
</style>