echarts生成中国地形图，中国地图数据统计

2020-08-23 阅读：6361 分类：前端标签： ECharts

基于echarts实现中国地图显示，省份区域地区鼠标悬停显示区域数据，数据从低到高，显示不同的颜色，主要用于数据统计。效果如下图所示：

步骤1：引入相关地图文件

引入 echarts.min.js 和 china.js

附件下载及案例：

链接：https://pan.baidu.com/s/1T_1zb-LObESMu90Y_Zq5dg

提取码：ia9w

步骤2：用于存放地图的盒子

<div id="region" style="width: 700px;height:600px;"></div>

步骤3：js实例化代码:

<script>
	var myChart2 = echarts.init(document.getElementById('region'));
    var option2 = {
        backgroundColor: '#FFFFFF',
        title: {
            text: '中国',
            x:'center'
        },
        tooltip : {
            trigger: 'item'
        },
        visualMap: {
            min: 0,
            max: 1000000,
            text:['高','低'],
            realtime: false,
            calculable: false,
            color: ['orangered','yellow','lightskyblue']
        },

        series: [{
            name: '浏览量',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: .5,//区域边框宽度
                    borderColor: '#FFF7FB',//区域边框颜色
                    areaColor:"#C4E1FF",//区域颜色

                },

                emphasis: {
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor:"#ece39e",
                }
            },
            data:[
		         {name: '北京', value: 1100},
		         {name: '湖北', value: 2221250},
		         {name: '上海', value: 1500},
		         {name: '广州', value: 5200},
		         {name: '广东', value: 900500},
		         {name: '新疆', value: 5000},
		         {name: '西藏', value: 500000},
		         {name: '湖南', value: 21250},
		         {name: '内蒙古', value: 182250}
	         ]
        }]
    };
    myChart2.setOption(option2);

</script>

以上就是echarts实现中国地图分布案例，常见的区域分布图，我们在百度统计上可以看到类似，还有今年2020的全国区域疫情概况分布图，大家只需稍微更改下，自定义下即可。

注：echarts生成世界地图方法参考：https://www.tpxhm.com/fdetail/391.html