<div id="map1"></div>
<div id="map2"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.highcharts.com.cn/highmaps/highmaps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
$(function () {
方法1
var data = [
{ name: "北京", value: 199 },
{ name: "天津", value: 42 },
{ name: "河北", value: 102 },
{ name: "山西", value: 81 },
{ name: "内蒙古", value: 47 },
{ name: "辽宁", value: 67 },
{ name: "吉林", value: 82 },
{ name: "黑龙江", value: 123 },
]
// Initiate the chart
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function (mapData) {
mapData.features.forEach(function (v, i) {
// 地区名称
var name = v.properties.name;
// // 地区经纬度
var lon = v.properties.longitude;
var lat = v.properties.latitude;
// 将经纬对加入data
for (let key in data[i]) {
data[i].lon = lon;
data[i].lat = lat
}
});
$('#map1').highcharts('Map', {
title: {
text: '标点的方法1--用经纬度进行标点type:mappoint(缺点-给香港地图标点图会很小)'
},
mapNavigation: {
enabled: true
},
// 放大缩小
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom',
align: 'right'
}
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>value: {point.value}'
},
colorAxis: {
min: 0,
minColor: "rgb(255,255,255)",
maxColor: "#006cee"
},
series: [
{
// 引入的地图
mapData: mapData,
name: 'mapname',
showInLegend: false,
},
{
// Specify points using lat/lon (进行标点 数据要有经纬度)
type: 'mappoint',
mapData: mapData,
name: 'Cities',
data: data,
joinBy: 'name' //让data里的name 与数据里的name对应
}],
});
})
方法2
var data2 = [
{ name: "北京", value: 199 },
{ name: "天津", value: 42 },
{ name: "河北", value: 102 },
{ name: "山西", value: 81 },
{ name: "内蒙古", value: 47 },
{ name: "辽宁", value: 67 },
{ name: "吉林", value: 82 },
{ name: "黑龙江", value: 123 },
]
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function (mapData) {
$('#map2').highcharts('Map', {
title: {
text: '标点的方法2--用数据标签直接标点dataLabels---formatter'
},
mapNavigation: {
enabled: true
},
// 放大缩小
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom',
align: 'right'
}
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br>value: {point.value}'
},
colorAxis: {
min: 0,
minColor: "rgb(255,255,255)",
maxColor: "#006cee"
},
series: [
{
// 引入的地图
mapData: mapData,
name: 'mapname',
showInLegend: false,
data: data2,
dataLabels: {
enabled: true,
useHTML: true,//使formatter中可以使用标签
formatter: function () {
if (this.point.value != null) {
return '<div style="display:inline-block; width:10px;height:10px;border-radius: 50%;background-color:blue"></div>' + this.point.name + ":" + this.point.value;
} else {
return this.point.name
}
},
color: "#000",
fontSize: 16
},
joinBy: "name" // 根据 name 属性进行关联
},
],
});
})
});