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

浏览536

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

1.png

image.png

步骤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生成世界地图方法参考:/fdetail/391.html


  • 暂无任何回答