JS + Echarts实现中国地图 China.js

China.js文件现在已经下载不到了 China.js文件已经放到末尾了  China.json以及各个省市json可以私   

效果图：

1.创建容器  

我在CSS里给过了宽高 所以没写  复制的时候一定要加宽高！

<div class="map" id="map"></div>

2.引入China.js 和 Echarts

这里Echarts用的CDN 5.3.2版本

<script crossorigin="anonymous" integrity="sha512-weWXHm0Ws2cZKjjwugRMnnOAx9uCP/wUVf84W7/fXQimwYUK28zPDGPprDozomQLpKv6U99xN9PI9+yLI9qxNw==" src="https://lib.baomitu.com/echarts/5.3.2/echarts.min.js"></script>
<script src="../js/china.js"></script>

3. 实例化代码

data_list是数据  瞎写的 建议折叠一下

   (function () {
        const data_list = [{
            name: '江苏',
            value: 0
        }, {
            name: '安徽',
            value: 1
        }, {
            name: '湖北',
            value: 1
        }, {
            name: '湖南',
            value: 0
        }, {
            name: '广东',
            value: 1
        }, {
            name: '浙江',
            value: 1
        }, {
            name: '福建',
            value: 1
        }, {
            name: '山东',
            value: 1
        }, {
            name: '河南',
            value: 4
        }, {
            name: '四川',
            value: 0
        }, {
            name: '河北',
            value: 0
        }, {
            name: '江西',
            value: 0
        }, {
            name: '黑龙江',
            value: 1
        }, {
            name: '陕西',
            value: 0
        }, {
            name: '贵州',
            value: 0
        }, {
            name: '吉林',
            value: 0
        }, {
            name: '广西',
            value: 1
        }, {
            name: '山西',
            value: 0
        }, {
            name: '云南',
            value: 0
        }, {
            name: '辽宁',
            value: 0
        }, {
            name: '甘肃',
            value: 0
        }, {
            name: '重庆',
            value: 0
        }, {
            name: '内蒙古',
            value: 0
        }, {
            name: '海南',
            value: 0
        }, {
            name: '天津',
            value: 0
        }, {
            name: '新疆',
            value: 0
        }, {
            name: '上海',
            value: 2
        }, {
            name: '宁夏',
            value: 0
        }, {
            name: '青海',
            value: 0
        }, {
            name: '北京',
            value: 0
        }, {
            name: '西藏',
            value: 0
        }]
        let new_data_list = data_list.map((item, index) => {
            return item.value
        })
        let data_list_max = Math.max(...new_data_list);
        var map_Chart = echarts.init(document.getElementById('map'));
        option = {
            title: {
                text: '本群闸总鼠窝分布',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: (params) => {
                    let num
                    let showHtml = ''
                    if (isNaN(params.value)) {
                        num = '0'
                    } else {
                        num = params.value
                    }
                    showHtml += `
                        <span style="display: flex;">
                            ${'省份'}：${params.name}</br>
                            ${'鼠窝'}：${num}
                        </span>
                    `
                    return showHtml

                }
            },

            dataRange: {
                x: 'left',
                y: 'bottom',
                min: 0,
                max: data_list_max,
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true,
                inRange: {
                    color: ['#d1e7fe', '#1989fa'],

                }
            },
            series: [{
                name: '数据',
                type: 'map',
                mapType: 'china',
                roam: false,
                selectedMode: false,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            textStyle: {
                                color: 'black'
                            }
                        }
                    },
                    emphasis: {
                        areaColor: '#95ec69',
                        label: {
                            show: true

                        }
                    }
                },
                data: data_list
            }]
        };

        map_Chart.setOption(option)
    })();

China.js下载地址： china.js

提取码：49kh

如果出现乱码情况 不用担心 正常引入使用即可