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）的更多相关文章

  1. 如何使用highmaps制作中国地图

    如何使用highmaps制作中国地图 文章目录 Highmaps 所需文件 地图初始化代码 highmaps 渲染讲解 highmaps 中国各城市坐标的json文件 highmaps 线上DEMO ...

  2. 使用highmaps制作中国地图

    Highmaps 所需文件 http://code.highcharts.com/maps/highmaps.js(地图渲染的核心文件 必须引用)http://code.highcharts.com/ ...

  3. Highcharts中国地图热力图

    最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...

  4. 一个让echarts中国地图包含省市轮廓的技巧

    背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...

  5. Datazen 自定义地图--中国地图

    背景: 关于Datazen可以google一下,因为目前Datazen还没有中文版,所以google出来的资料会多一点,由于公司想用Datazen来做报表展示,所以有了下文. 参考文章: 中文---h ...

  6. ehcharts中国地图四级级下钻

    echarts 官网关于中国地图,只有全国-省:省-市,没有中国-省-市-县四级下钻相关文献,echarts地图最重要一点是模块化相对于其他各个图形,一下为三级下钻部分代码包括各级别交互,望指点: 中 ...

  7. jvectormap 中国地图 (包括香港、台湾、澳门)

    一个完整的中国地图(各个省,市.还有国两制),谢谢大家. 忘了网上哪位的范例,我加了些修改. <html xmlns="http://www.w3.org/1999/xhtml&quo ...

  8. echarts.制作中国地图,点击对应的省市链接到该省份的详细介绍

    今天花了一天的时间,用echart弄了一个效果,是从中国地图点进去身份并把改省份的数据渲染出来的效果,刚开始完全没有头绪,只能硬着头皮去看百度echart的api,和博客,看了半天,好家伙,终于给我找 ...

  9. 利用d3.js绘制中国地图

    d3.js是一个比較强的数据可视化js工具. 利用它画了一幅中国地图,例如以下图所看到的: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3ZhcDE=/ ...

随机推荐

  1. Android 实现连续两次点击或连续多次点击退出应用

    前言:  日常开发过程中,经常会遇到“连续点击两次退出应用”的需求(和“连续点击多次”的需求(如:手机从设置中进入开发者选项). 直接上代码:双击退出: private long exitTime = ...

  2. Nginx配置项优

    1.nginx运行工作进程个数,一般设置cpu的核数或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件. [root@localhost~] ...

  3. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. python基础——字符串、编码、格式化

    1.三种编码:ascii Unicode utf8 2.字符串和编码数字的两个函数:ord(字符转数字ord(‘A’)=65)和 chr(数字转字符chr(65)=A) 3.bytes存储编码,记住两 ...

  5. 将input或textarea设置为disabled的样式问题

    input:disabled{ -webkit-text-fill-color: #333;//是用来做填充色使用的 -webkit-opacity: 1; color: #333; } textar ...

  6. python---读取/写入excel用例数据

    使用excel管理用例 ①.读取excel的用例数据,每一类参数保存在list中返回:②.那么接下来使用unitest编写用例时,可以去调用这个函数.使用里面的数据: 个人认为好处是,大部分人还是习惯 ...

  7. 数据库构架设计中的Shared Everthting、Shared Nothing、和Shared Disk

    Shared Everthting:一般是针对单个主机,完全透明共享CPU/MEMORY/IO,并行处理能力是最差的,典型的代表SQLServer Shared Disk:各个处理单元使用自己的私有 ...

  8. P1233 木棍加工 dp LIS

    题目描述 一堆木头棍子共有n根,每根棍子的长度和宽度都是已知的.棍子可以被一台机器一个接一个地加工.机器处理一根棍子之前需要准备时间.准备时间是这样定义的: 第一根棍子的准备时间为1分钟: 如果刚处理 ...

  9. LoadRunner的函数

     一.基础函数 在VU左边导航栏中,有三个LR框架函数,分别是vuser_init(),Action(),vuser_end(). 这三个函数存在于任何Vuser类型的脚本中: ●vuser_init ...

  10. 一张图解析FastAdmin中的表格列表的功能

    大图: 1.默认生成的CRUD是没有菜单名称和描述显示的,如果需要显示则可以在后台修改,权限管理->菜单规则,给对应菜单的添加上备注信息后即可显示,支持HTML 2.TAB过滤选项卡 在一键生成 ...