使用 Vue + Echarts 绘制中国地图

# 前言

同学们平时做图表一般用什么呢?Echartst.js大家熟悉吗？
用图表都做些什么统计呢？折线、柱状、饼图、K线还是仪表盘？
今天我们来研究下中国地图的展示~~

# 第一步：安装 Echartst.js

npm install echars@4.9.0 -S

注意：这里有个坑
要展示中国地图需要用到china.js，但版本不同china,js的路径不同，有的甚至找不到在哪放着
所以这里以4.9.0这个版本为例子，大家可根据自己的版本不同自行按需引入。

# 第二步：全局引入

main.js

import echarts from 'echarts';
Vue.prototype.$echarts = echarts

注意：平常使用的话，这么全局注册就可以了。但咱们今天要展示中国地图，还需引入china.js并注册下,所以要按如下引入才可，否侧不能正常显示。

main.js

import echarts from 'echarts';
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
Vue.prototype.$echarts = echarts

# 第三步：在页面中画出中国地图

html 代码

<template>
    <!-- 中国地图 -->
    <div>
        <div class="map-box" ref="chinaMap" />
    </div>
</template>

methods 方法

mapChinaOptions ( data, formatter ) {
    let max = 0;
    let riskMaxPoint = data.map( ( item ) => {
        return item.riskPointNum
    } )
    if ( data && data.length ) {
        max = Math.max( ...riskMaxPoint )
    }
    return {
        visualMap: {
            show: false,
            min: 0,
            max: max,
            // inRange: {
            //     color: ['#fae8e9', '#f7a8be', '#f1658b ', '#CB000C']
            // },
        },
        // 暂且不知道做啥子用的
        // geo: {
        //     map: 'china',
        //     // layoutCenter:['10%','5%'],
        //     // center: [104.114129, 35.950339],
        // },
        grid: {
            top: 10,
            bottom: 10,
            width: '1000px',
            height: '500px'
        },
        tooltip: {
            trigger: 'item',
            formatter: formatter ? formatter : '{b}<br/>{c}',
            borderColor: '#CB000C',
            borderWidth: '1'
        },
        dataRange: { // 数值范围对应的 取色
            x: 'left',
            y: 'bottom',
            show: true,
            splitList: [
                { start: 20000, color: '#CB000C' },
                { start: 10001, end: 20000, color: '#f1658b' },
                { start: 5001, end: 10000, color: 'rgba(247,168,190,.8)' },
                { end: 5000, color: '#fae8e9' }
            ],
            color: ['#fae8e9', '#f7a8be', '#f1658b ', '#CB000C']
        },
        series: [
            {
                type: 'map',
                map: 'china',
                itemStyle: {
                    areaColor: '#fff', //地图的颜色
                    borderColor: 'rgba(60,70,88,.5)', //边界线颜色
                    borderWidth: '.5', //边界线宽
                    emphasis: { // 对应的鼠标悬浮效果
                        color: '#FF0000',
                        areaColor: '#CB000C',
                        borderColor: '#FFF',
                        borderWidth: 1,
                    }
                },
                label: {
                    fontSize: 12,
                    normal: {
                        show: true, // 默认 是否显示省份标签
                        color: '#000',
                    },
                    emphasis: {
                        show: true, // 鼠标 hover 时是否显示身份标签
                        textStyle: {
                            color: '#fff',
                        },
                    },
                },
                data: data
            }
        ]
    }
}

在 mounted 中调用

let map = this.$echarts.init( this.$refs.chinaMap ),
    data =  [
             { "name": "北京", "value": 632, "riskNum": 563, "riskPointNum": 69 }, 
             { "name": "黑龙江", "value": 1623, "riskNum": 948, "riskPointNum": 675 },
             { "name": "河北", "value": 98, "riskNum": 98, "riskPointNum": "343" }
    ];

let options = this.mapChinaOptions ( data);

map.setOption( options );

最终效果如下：

1642662637(1).png

是不是很神奇，赶紧试试吧
关于地图下钻，且听下回分解~~~