【highcharts】highcharts(highmaps)实现疫情地图(一看就会篇)

【highcharts】highcharts(highmaps)实现疫情地图

有人可能问为什么不用echarts,echarts简单容易上手啊,因为echarts他官网没有地图数据的下载地址需要自己上网搜比较麻烦,并且highcharts官网有全世界的地图,大到世界地图小到世界各地市区地图,都是比较全的,后期加个下钻功能也是比较方便容易的。

一,highcharts使用介绍

Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。

注意

如果您既想做地图又想做图表,那么您只需要从官网下载文件,并且引入
highcharts.js + map.js
官网地址:官网地址

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> 
<script src="http://cdn.hcharts.cn/highmaps/modules/map.js"></script> 

如果您只需要实现地图的功能,那么只需要 highmaps就ok.
highmaps下载地址:https://www.highcharts.com.cn/download

<script src="http://cdn.highcharts.com.cn/highmaps/8.0.4/highmaps.js"></script>

二,开始使用

1.首先你需要有一个具有宽高的dom元素

<div id="container" style="width: 600px;height:400px;"></div>

2.你需要中国地图和世界地图的js数据,地址https://img.hcharts.cn/mapdata/选择js文件,然后他会打开一个网页,你把内容全选并且复制到你的记事本里,把记事本后缀txt,改成json数据就算是完成了。
并且引用他们

<script src="./Js/China.json"></script>
<script src="./Js/word1.json"></script>

3.然后初始化charts,然后写入数据,并且配置它,就直接上成品代码,大家往里套就好

 var map_china_tol_data = [{
                "name": "北京",
                "value": 480
            },
            {
                "name": "天津",
                "value": 136
            }, {
                "name": "河北",
                "value": 318
            }, {
                "name": "山西",
                "value": 133
            }, {
                "name": "内蒙古",
                "value": 75
            }, {
                "name": "辽宁",
                "value": 125
            }, {
                "name": "吉林",
                "value": 93
            }, {
                "name": "黑龙江",
                "value": 483
            }, {
                "name": "上海",
                "value": 363
            }, {
                "name": "江苏",
                "value": 631
            }, {
                "name": "浙江",
                "value": 1233
            }, {
                "name": "安徽",
                "value": 990
            }, {
                "name": "福建",
                "value": 296
            }, {
                "name": "江西",
                "value": 935
            }, {
                "name": "山东",
                "value": 761
            }, {
                "name": "河南",
                "value": 1273
            }, {
                "name": "湖北",
                "value": 67800
            }, {
                "name": "湖南",
                "value": 1018
            }, {
                "name": "广东",
                "value": 1378
            }, {
                "name": "广西",
                "value": 253
            }, {
                "name": "海南",
                "value": 168
            }, {
                "name": "重庆",
                "value": 576
            }, {
                "name": "四川",
                "value": 540
            }, {
                "name": "贵州",
                "value": 146
            }, {
                "name": "云南",
                "value": 176
            }, {
                "name": "西藏",
                "value": 1
            }, {
                "name": "陕西",
                "value": 246
            }, {
                "name": "甘肃",
                "value": 133
            }, {
                "name": "青海",
                "value": 18
            }, {
                "name": "宁夏",
                "value": 75
            }, {
                "name": "新疆",
                "value": 76
            }, {
                "name": "台湾",
                "value": 108
            }, {
                "name": "香港",
                "value": 109
            }, {
                "name": "澳门",
                "value": 110
            }, {
                "name": "南海诸岛",
                "value": 0
            }, {
                "name": "南海诸岛",
                "value": 0
            }
        ];
        // 初始化图表
        //map_china_tol:你的dom元素的id名
        var map = new Highcharts.Map('map_china_tol', {
            title: {
                text: '中国累计确诊'
            },
            mapNavigation: {
                enabled: true,
                enableButtons: false,
                enableTouchZoom:false,
                enableDoubleClickZoomTo: true
            },
            legend: {
                align: 'left',
                verticalAlign: 'top',
                floating: true,
                x: 0,
                y: -20
            },
            colorAxis: {
                dataClasses: [{
                    to: 1,
                    color: 'white',
                }, {
                    from: 1,
                    to: 59,
                    color: '#f2ab9a',
                }, {
                    from: 59,
                    to: 599,
                    color: '#f96c4e',
                }, {
                    from: 599,
                    to: 2999,
                    color: '#f13c10',
                }, {
                    from: 2999,
                    color: '#500b00',
                }],

            },
            series: [{
                data: map_china_tol_data,
                name: '现存确诊',
                mapData: Highcharts.maps['cn/china'],
                joinBy: 'name' // 根据 name 属性进行关联
            }]
        });

还有一点需要注意

mapData: Highcharts.maps['cn/china'],

这个地方,需要和你地图数据的js文件的
在这里插入图片描述
这个位置对应上,不然是跟没有地图数据是一样的,一片空白。

我做的这个支持双击放大,鼠标滚轮放大,但是不支持手机的手势操作,想要添加手势操作的同学 把enableTouchZoom:false的false改成ture就好了。

4.世界地图注意
下载过世界地图的同学可能知道,世界地图国家名称都是英文的,那么如何改成中文的呢,

{
        "type": "Feature",
        "id": "US",
        "properties": {
            "hc-group": "admin0",
            "hc-middle-x": 0.70,
            "hc-middle-y": 0.68,
            "hc-key": "us",
            "hc-a2": "US",
            "name": "美国",
            //解决方法
            //这个name原来是英文,改成中文,
            //然后在js配置数据的时候,你的名字就可以是中文的了
            //不过这个name要和你js配置数据的name保持一致,不然是无效的
            "labelrank": "2",
            "country-abbrev": "U.S.A.",
            "subregion": "Northern America",
            "region-wb": "North America",
            "iso-a3": "USA",
            "iso-a2": "US",
            "woe-id": "23424977",
            "continent": "North America"
        },

解决方法就是我注释中提到的这些了,这是个笨方法只能一个个改,
原谅我才疏浅陋,其他汉化方法我还没想到。


以上就是我在做完疫情地图这个项目之后的总结,可能比较low,但是我把我做项目的时候遇到的问题都分享出来了,大家可以避免踩很多坑。

各位学长学姐知道其他简单的汉化方法的可以评论区告诉我,谢谢大家了!

你可能感兴趣的:(web前端)