目前图表是大热门，所以趁着这段休假时间试试用highcharts制作了一个疫情地图，数据来源于http://garnetcdn.migu.cn/lovebridge.html
- 进入highcharts官网，进入文档教程》API文档》highmaps，里面是相关资料
- 如下是body页面及css样式及引入的相关文件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入文件 -->
<script src="jquery-3.4.1.min.js"></script>
<script src="highmaps.js"></script>
<script src="exporting.js"></script>
<script src="drilldown.js"></script>
<script src="art-template.js"></script>
<style>
body {
background-color: #fdf9fc;
}
#container {
margin-top: 100px;
width: 50vw;
height: 90vh;
}
h1 {
font-weight: 700;
padding: .1rem;
font-size: 40px;
}
.table {
padding: 40px 20px;
width: 29vw;
font-size: 26px;
text-align: center;
background-color: #fff;
box-shadow: 0 0.08rem 0.45rem 0 rgba(221, 221, 238, .69);
}
.table .head {
color: #9b9b9b;
}
.table>.tbody:nth-child(2n+1) {
background-color: #f6f6f8;
}
.table .row {
padding: 15px 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
</style>
</head>
<body>
<div class="box" style="display: flex;justify-content: space-around">
<div id="container"></div>
<div class="right">
<h1 style="text-align: center;height: 50px;line-height: 50px;">国内病例</h1>
<div class="table">
<div class="head row">
<div>省区市</div>
<div>确诊(例)</div>
<div>疑似(例)</div>
<div>出院(例)</div>
<div>死亡(例)</div>
</div>
<script type="text/html" id="tpl">
//$data代表当前的数组，根据数组循环，此名字不能改变
{{each $data item index}}
<div class="tbody row">
<div style='font-weight:700'>{{item.na}}</div>
<div>{{item.tn.split(',')[0]}}</div>
<div>{{item.tn.split(',')[1]}}</div>
<div>{{item.tn.split(',')[2]}}</div>
<div>{{item.tn.split(',')[3]}}</div>
</div>
{{/each}}
</script>
</div>
</div>
</div>
</body>
- 首先通过ajax获取数据，我将它封装成了promise对象，命名为bjax:
function bjax() {
return new Promise((resolve, reject) => {
let ajax = new XMLHttpRequest()
ajax.open('GET', 'http://lovebridge.migu.cn:18188/api/map?url=http:%2F%2Fgarnetcdn.migu.cn%2Flovebridge.html', 'true')
ajax.send()
ajax.onreadystatechange = function (r) {
if (ajax.readyState === 4) {
if (ajax.status === 200) {
// console.log(JSON.parse(ajax.response))
resolve(JSON.parse(ajax.response).data.country[0].province)
}
}
}
})
}
- 将网站上得到的数据转为highcharts需要的格式,可以通过如下代码转换成需要的格式，因为highcharts中需要传的参数名是data，所以直接将转换成的数组命名为data：
async function aa (mapdata) {
let res = await bjax()
let data = []
res.forEach(item => {
data.push({ name: item.na, value: parseInt(item.tn.split(',')[0]) })
});
}
// 调用
aa()
-
可以在highcharts中查看类似的实例，将代码及需要的文件复制过来，然后根据要求修改代码,目前还有几处缺点未找到方法，希望有大佬能提供指点
- 地图上内蒙古的文字超出了地图的范围
- 地图上的字体没有根据数量的大小而改变颜色
var map = null;
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', async function (mapdata) {
let res = await bjax()
let data = []
res.forEach(item => {
data.push({ name: item.na, value: parseInt(item.tn.split(',')[0]) })
});
map = new Highcharts.Map('container', {
// 标题
title: {
text: '新型冠状病毒感染的肺炎疫情最新情况',
y: 45,
floating: true,
style: {
'fontWeight': 'bold',
'font-size': '46px',
}
},
// 图例
legend: {
itemStyle: {
'fontSize': '20px',
},
align: 'left',
verticalAlign: 'bottom',
layout: 'vertical',
valueDecimals: 0,//图例的小数点
// 图例默认是圆形的，通过设置如下参数改为长方形，相应文档可以查看legend目录
symbolRadius: 0,
symbolWidth: 45,
symbolHeight: 20,
itemMarginTop: 10,
squareSymbol: false,
y: -150,
// 通过设置symbolPadding调节图例左边长方形和右边文字的间距
symbolPadding: 30
},
// 地图放大功能
mapNavigation: {
enableMouseWheelZoom: true,
// 通过设置enabled可以使地图具有放大功能
enabled: true,
buttonOptions: {
//点击放大的按钮显示的位置
verticalAlign: 'bottom'
}
},
//数据范围显示，且显示相应的颜色
colorAxis: {
dataClasses: [{
to: 1,
color: '#d6d6d6',
}, {
from: 1,
to: 9,
color: '#f2ab9a',
}, {
from: 9,
to: 99,
color: '#f96c4e',
}, {
from: 99,
to: 999,
color: '#f13c10',
}, {
from: 999,
color: '#500b00',
}],
},
//滑过显示的数据
tooltip: {
// headerFormat是默认的有显示的格式，所以将它改为空字符串不显示
headerFormat: '',
pointFormat: '{point.name}<br/>确诊 {point.value} 例',
backgroundColor: 'rgba(0,0,0,.5)',
borderColor: 'null',
borderRadius: '10',
style: {
'color': '#fff',
'fontSize': '26px',
}
},
series: [{
data: data,
borderColor: '#fff',
borderWidth: 1.2,
cursor: 'pointer',
dataLabels: {
overflow: 'none',
crop: 'false',
align: 'center',
//enabled为true才能显示地图上你需要显示的数据
enabled: true,
//将字体颜色设置为黑色，我是想按数量显示不同的颜色，但是目前未找到方法
color: '#000',
//显示数据的格式
format: '{point.name}<br/>{point.value}',
style: {
'fontSize': '16px',
'text-align': 'center',
"textOutline": "0px 0px contrast"
}
},
//当鼠标划过时，设置相应区域的颜色
states: {
hover: {
color: '#fce2db'
}
},
mapData: mapdata,
joinBy: 'name',
name: '中国地图'
}]
});
});
- 我在页面上做了一个统计数据的表格，通过art-template模板引擎减少代码量
async function aa() {
let res = await bjax()
$('.table').append(template('tpl', res))
}
aa()
- 如下是所有的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入文件 -->
<script src="jquery-3.4.1.min.js"></script>
<script src="highmaps.js"></script>
<script src="exporting.js"></script>
<script src="drilldown.js"></script>
<script src="art-template.js"></script>
<style>
body {
background-color: #fdf9fc;
}
#container {
margin-top: 100px;
width: 50vw;
height: 90vh;
}
h1 {
font-weight: 700;
padding: .1rem;
font-size: 40px;
}
.table {
padding: 40px 20px;
width: 29vw;
font-size: 26px;
text-align: center;
background-color: #fff;
box-shadow: 0 0.08rem 0.45rem 0 rgba(221, 221, 238, .69);
}
.table .head {
color: #9b9b9b;
}
.table>.tbody:nth-child(2n+1) {
background-color: #f6f6f8;
}
.table .row {
padding: 15px 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
</style>
</head>
<body>
<div class="box" style="display: flex;justify-content: space-around">
<div id="container"></div>
<div class="right">
<h1 style="text-align: center;height: 50px;line-height: 50px;">国内病例</h1>
<div class="table">
<div class="head row">
<div>省区市</div>
<div>确诊(例)</div>
<div>疑似(例)</div>
<div>出院(例)</div>
<div>死亡(例)</div>
</div>
<script type="text/html" id="tpl">
//$data代表当前的数组，根据数组循环，此名字不能改变
{{each $data item index}}
<div class="tbody row">
<div style='font-weight:700'>{{item.na}}</div>
<div>{{item.tn.split(',')[0]}}</div>
<div>{{item.tn.split(',')[1]}}</div>
<div>{{item.tn.split(',')[2]}}</div>
<div>{{item.tn.split(',')[3]}}</div>
</div>
{{/each}}
</script>
</div>
</div>
</div>
</body>
<script>
//封装ajax为promise对象
function bjax() {
return new Promise((resolve, reject) => {
let ajax = new XMLHttpRequest()
ajax.open('GET', 'http://lovebridge.migu.cn:18188/api/map?url=http:%2F%2Fgarnetcdn.migu.cn%2Flovebridge.html', 'true')
ajax.send()
ajax.onreadystatechange = function (r) {
if (ajax.readyState === 4) {
if (ajax.status === 200) {
resolve(JSON.parse(ajax.response).data.country[0].province)
}
}
}
})
}
//右边table部分
async function aa() {
let res = await bjax()
$('.table').append(template('tpl', res))
}
aa()
//图表部分
var map = null;
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', async function (mapdata) {
let res = await bjax()
let data = []
res.forEach(item => {
data.push({ name: item.na, value: parseInt(item.tn.split(',')[0]) })
});
map = new Highcharts.Map('container', {
// 标题
title: {
text: '新型冠状病毒感染的肺炎疫情最新情况',
y: 45,
floating: true,
style: {
'fontWeight': 'bold',
'font-size': '46px',
}
},
// 图例
legend: {
itemStyle: {
'fontSize': '20px',
},
align: 'left',
verticalAlign: 'bottom',
layout: 'vertical',
floating:true,
valueDecimals: 0,//图例的小数点
// 图例默认是圆形的，通过设置如下参数改为长方形，相应文档可以查看legend目录
symbolRadius: 0,
symbolWidth: 45,
symbolHeight: 20,
itemMarginTop: 10,
squareSymbol: false,
y: -150,
// 通过设置symbolPadding调节图例左边长方形和右边文字的间距
symbolPadding: 30
},
// 地图放大功能
mapNavigation: {
enableMouseWheelZoom: true,
// 通过设置enabled可以使地图具有放大功能
enabled: true,
buttonOptions: {
//点击放大的按钮显示的位置
verticalAlign: 'bottom'
}
},
//数据范围显示，且显示相应的颜色
colorAxis: {
dataClasses: [{
to: 1,
color: '#d6d6d6',
}, {
from: 1,
to: 9,
color: '#f2ab9a',
}, {
from: 9,
to: 99,
color: '#f96c4e',
}, {
from: 99,
to: 999,
color: '#f13c10',
}, {
from: 999,
color: '#500b00',
}],
},
//滑过显示的数据
tooltip: {
// headerFormat是默认的有显示的格式，所以将它改为空字符串不显示
headerFormat: '',
pointFormat: '{point.name}<br/>确诊 {point.value} 例',
backgroundColor: 'rgba(0,0,0,.5)',
borderColor: 'null',
borderRadius: '10',
style: {
'color': '#fff',
'fontSize': '26px',
}
},
series: [{
data: data,
borderColor: '#fff',
borderWidth: 1.2,
cursor: 'pointer',
dataLabels: {
overflow: 'none',
crop: 'false',
align: 'center',
//enabled为true才能显示地图上你需要显示的数据
enabled: true,
//将字体颜色设置为黑色，我是想按数量显示不同的颜色，但是目前未找到方法
color: '#000',
//显示数据的格式
format: '{point.name}<br/>{point.value}',
style: {
'fontSize': '16px',
'text-align': 'center',
"textOutline": "0px 0px contrast"
}
},
//当鼠标划过时，设置相应区域的颜色
states: {
hover: {
color: '#fce2db'
}
},
mapData: mapdata,
joinBy: 'name',
name: '中国地图'
}]
});
});
</script>
</html>
效果：
image
