js|使用highEcharts做出中国地图的效果图
【js|使用highEcharts做出中国地图的效果图】直接上代码吧
Document - 锐客网
//js需要自己去官网上面进行下载，直接进行引用即可，同时可以根据自己的需要进行地图的自我定制。
="./highmaps.js">
="./jquery.js">
="./drilldown.js">
="./exporting.js">
>
var map = null,
geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
$.getJSON(geochina + 'china.json&callback=?', function (mapdata) {
var data = https://www.it610.com/article/[];
// 随机数据
Highcharts.each(mapdata.features, function (md, index) {
var tmp = {
name: md.properties.name,
value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值
};
if (md.properties.drilldown) {
tmp.drilldown = md.properties.drilldown;
}
data.push(tmp);
});
map = new Highcharts.Map('container', {
chart: {
events: {
// drilldown: function (e) {
//this.tooltip.hide();
//console.log(e);
//// 异步下钻
//if (e.point.drilldown) {
//var pointName = e.point.properties.fullname;
//map.showLoading('下钻中，请稍后...');
//// 获取二级行政地区数据并更新图表
//$.getJSON(geochina + e.point.drilldown + '.json&callback=?', function (data) {
//data = Highcharts.geojson(data);
//Highcharts.each(data, function (d) {
//if (d.properties.drilldown) {
//d.drilldown = d.properties.drilldown;
//}
//d.value = Math.floor((Math.random() * 100) + 1);
// 生成 1 ~ 100 随机值
//});
//map.hideLoading();
//map.addSeriesAsDrilldown(e.point, {
//name: e.point.name,
//data: data,
//dataLabels: {
//enabled: true,
//format: '{point.name}'
//}
//});
//map.setTitle({
//text: pointName
//});
//});
//}
// },
// drillup: function () {
//map.setTitle({
//text: '中国'
//});
// }
}
},
title: {
text: '中国地图'
},mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
tooltip: {
useHTML: true,
headerFormat: '{point.name} 全称 {point.properties.fullname} 行政编号 {point.properties.areacode} 父级 {point.properties.parent} 经纬度 {point.properties.longitude},{point.properties.latitude}
'
},
colorAxis: {
min: 0,
minColor: '#fff',
maxColor: '#006cee',
labels: {
style: {
"color": "red", "fontWeight": "bold"
}
}
},
series: [{
data: data,
dataLabels: {
enabled: true,
color: '#238F7E',
format: '{point.name}',
},
mapData: mapdata,
joinBy: 'name',
name: '中国地图',
states: {
hover: {
color: '#a4edba'
}
}
}]
});
});
推荐阅读
- 由浅入深理解AOP
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用
- 使用协程爬取网页，计算网页数据大小