在vue中实现中国地图

前言

4.9版本的可以看这篇文章，5.x版本的可以看 echarts地图的常见用法：基本使用、区域颜色分级、水波动画、区域轮播 案例更加丰富

安装

npm install echarts@4.9

不要安装最新版本的，最新版本的echarts不支持下面的代码

我的代码

<template>
    <div class="centent" ref="echarts"></div>
</template>

<script>
// 引入echarts
import echarts from 'echarts';
// 引入地图
import 'echarts/lib/chart/map';
// 引入js
import 'echarts/map/js/china.js';
export default {
    components: {},
    data() {
        // 这里存放数据
        return {

        };
    },

    mounted() {
        this.init();
    },
    // 方法集合
    methods: {
        init() {
            let myChart = echarts.init(this.$refs.echarts);
            let option = {
                tooltip: {
                    // 鼠标移到图里面的浮动提示框
                    formatter(params) {
                        let htmlStr = `
                          <div style='font-size:18px;'> ${params.name}</div>
                        `;
                        return htmlStr;
                    }
                },
                // geo配置详解： https://echarts.baidu.com/option.html#geo
                geo: {
                    map: 'china',
                    show: true,
                    roam: true,
                    top: 0,
                    label: {
                        emphasis: {
                            show: false
                        }
                    },
                    // 地图的背景色
                    itemStyle: {
                        normal: {
                            areaColor: '#091632',
                            borderColor: '#9adcfa',
                            shadowColor: '#09184F',
                            shadowBlur: 20
                        }
                    }
                },
                series: [
                    // 地图部分
                    {
                        type: 'map',
                        map: 'china',
                        geoIndex: 1,
                        aspectScale: 0.75, // 长宽比
                        showLegendSymbol: true, // 存在legend时显示
                        top: 0,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        //是否开启鼠标缩放和平移漫游
                        roam: false,
                        //默认样式
                        itemStyle: {
                            normal: {
                                areaColor: '#031525',
                                borderColor: '#3B5077',
                                borderWidth: 1
                            },
                            emphasis: {
                                areaColor: '#0f2c70'
                            }
                        },
                        data: [
                            {
                                name: '黑龙江',
                                //自定义省的颜色
                                itemStyle: {
                                    normal: {
                                        areaColor: '#F50508',
                                        borderColor: '#1773c3', // 区域边框
                                        shadowColor: '#1773c3', // 阴影
                                        shadowBlur: 20
                                    }
                                }
                            }
                        ],
                        zlevel: 0
                    },
                    // 气泡
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        //要有对应的经纬度才显示，先经度再维度
                        data: [{ name: '哈尔滨', value: [126.63, 45.75] }],
                        showEffectOn: 'render',
                        rippleEffect: {
                            scale: 4, // 波纹的最大缩放比例
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                show: true,
                                formatter: '{b}',
                                position: 'right',
                                fontWeight: 500,
                                fontSize: 14
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#32cd32',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            }
                        },
                        emphasis: {
                            itemStyle: {
                                color: '#f4e925' // 高亮颜色
                            }
                        },
                        zlevel: 1
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.centent {
    width: 500px;
    height: 500px;
    margin-top: 100px;
}
</style>

效果：