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

2020-08-23   阅读:455   分类:前端    标签: ECharts

基于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生成世界地图方法参考:https://www.tpxhm.com/fdetail/391.html

【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/390.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

上一篇:没有更多了文章

下一篇: TP5搜索分页

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×