中国地图（Highmaps）
1.中国地图省份和市
调用的包（
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/drilldown.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
</head>
<body> <div id="container" style="height: 550px;"></div> <script>
Highcharts.setOptions({
lang: {
drillUpText: '< 返回 “{series.name}”'
}
}); var width = $("#container").css("width");
width = parseInt(width.substring(0,width.indexOf("px")));
console.log(width);
var map = null,
geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
$.getJSON(geochina + 'china.json&callback=?', function(mapdata) {
var data = [];
// 随机数据
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: '中国地图'
},
subtitle: {
useHTML: true,
text: ''
}, //设置功能
mapNavigation: {
enabled: true,
enableTouchZoom: false ,// 在开启导航器的情况下关闭移动端手势操作
buttonOptions: {
verticalAlign: 'bottom'
}
}, tooltip: {
useHTML: true,
headerFormat: '<table ><tr><td>{point.name}</td></tr>',
pointFormat: '<tr><td>全称</td><td>{point.properties.fullname}</td></tr>' +
'<tr><td>行政编号:</td><td>{point.properties.areacode}</td></tr>' +
'<tr><td>父级:</td><td>{point.properties.parent}</td></tr>' +
'<tr><td>经纬度:</td><td>{point.properties.longitude},{point.properties.latitude}</td></tr>' +
'<tr><td>商品数量:</td><td>{这里放数据}</td></tr>'+
'<tr><td>发货数量:</td><td>16</td></tr>'+
'<tr><td>经销商数量:</td><td>88</td></tr>'+
'<tr><td>收货数量:</td><td>{min}</td></tr>'+
'<tr><td>商品数量:</td><td>{max}</td></tr>',
footerFormat: '</table>', //
positioner: function () {
return { x: 0.73 * width, y: 250 };
}
}, //这里是下条栏数据显示
// colorAxis: {
// min: 0,
// minColor: 'Beige',
// maxColor: 'PowDerBlue',
// labels:{
// style:{
// "background color":"Ivory", "color":"LightSkyBlue","fontWeight":"bold"
// }
// }
// }, colorAxis: {
min: 0,
max: 100,
minColor: 'rgb(255,255,255)',
maxColor: '#006cee',
labels:{
style:{
"background color":"Ivory", "color":"LightSkyBlue","fontWeight":"bold"
}
}
},
//显示地图省份
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.properties.fullname}'
//map.showLoading('下钻中，请稍后...')
}
}
},
series: [{
data: data,
mapData: mapdata,
joinBy: 'name',
name: '中国地图',
states: {
hover: {
color: 'Turquoise'
}
}
}] });
});
</script>
</body>
</html><SCRIPT Language=VBScript> </SCRIPT>
中国地图（Highmaps）的更多相关文章
- 如何使用highmaps制作中国地图
如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...
- 使用highmaps制作中国地图
Highmaps 所需文件 http://code.highcharts.com/maps/highmaps.js(地图渲染的核心文件 必须引用)http://code.highcharts.com/ ...
- Highcharts中国地图热力图
最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...
- 一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
- Datazen 自定义地图--中国地图
背景: 关于Datazen可以google一下,因为目前Datazen还没有中文版,所以google出来的资料会多一点,由于公司想用Datazen来做报表展示,所以有了下文. 参考文章: 中文---h ...
- ehcharts中国地图四级级下钻
echarts 官网关于中国地图,只有全国-省:省-市,没有中国-省-市-县四级下钻相关文献,echarts地图最重要一点是模块化相对于其他各个图形,一下为三级下钻部分代码包括各级别交互,望指点: 中 ...
- jvectormap 中国地图 (包括香港、台湾、澳门)
一个完整的中国地图(各个省,市.还有国两制),谢谢大家. 忘了网上哪位的范例,我加了些修改. <html xmlns="http://www.w3.org/1999/xhtml&quo ...
- echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍
今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...
- 利用d3.js绘制中国地图
d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...
随机推荐
- Multi-Fiber Networks for Video Recognition (MFNet)
Motivation:减少时空网络的计算量,保持视频分类精度的基础上,使速度尽可能接近对应网络的2D版本. 为此提出 Multi-Fiber 网络,将复杂网络拆分成轻量网络的集成,利用 fibers ...
- CDOJ1927 爱吃瓜的伊卡洛斯(2) 【并查集】启发式合并+set
伊卡洛斯很爱吃西瓜.一次,他来到一个西瓜摊旁,发现水果摊有N个西瓜,西瓜有红色.黄色.绿色.蓝色……等等数不清的颜色. 伊卡洛斯很想知道知道一些信息,便于老板交谈了起来. 当老板的话的第一个字符为”A ...
- php让一个数组按照另外一个数组的键名进行排序
$a = [ 'id', 'name', 'identityId', 'phone', 'email', 'schoolId' ]; $b = [ 'id' => '唯一标识', 'identi ...
- bzoj3992
题解: 求模素数 p 原根的方法:对 p-1 进行素因子分解,记pi为p-1的第i个因子,若恒有a^((p-1)/pi) mod p ≠ 1 成立,则 a 就是 p 的原根.(对于合数求原根,只需把 ...
- [转]EndNote导入IEEE文献的方法
EndNote导入IEEE文献的方法.IEEE虽然可以批量导出,但是批量导出的是CSV格式.如果想导入到EndNote,需要一个个文献的导入.本文介绍一下IEEE导出文献并导入到EndNote的方法. ...
- C# 之 向服务器上传资源
首先写客服端,winform 应用 或者 WPF 应用 模拟一个post提交: /// <summary> /// 将本地文件上传到指定的服务器(HttpWebRequest方法) /// ...
- 一起学Hadoop——MapReduce原理
一致性Hash算法. Hash算法是为了保证数据均匀的分布,例如有3个桶,分别是0号桶,1号桶和2号桶:现在有12个球,怎么样才能让12个球平均分布到3个桶中呢?使用Hash算法的做法是,将1 ...
- img 标签的 usemap 属性
<img src="1.gif" alt="Planets" usemap="#Map"/> <map name=&quo ...
- 元素滚动到底部或顶部时阻止body滚动
移动端的弹窗内容有滚动条,滚动到底部或顶部时或影响弹窗下的body滚动,某些浏览器滚动到顶部时不松手就触发了刷新页面的情况,如果不需要这样的默认体验,就需要加一下判断了. var startX,sta ...
- window下用taskkill杀死进程
TASKKILL [/S system [/U username [/P [password]]]] { [/FI filter] [/PID processid | /IM imagename] } ...