# 中国地图数据分步显示 * 载入组件 ~~~ <script type="text/javascript" src="{relative_root}jquery/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="{relative_root}highcharts/highmaps.js"></script> ~~~ * 承载容器 ~~~ <div id="container" style="height:600px;"></div> ~~~ * 调起js ~~~ var para = {}; para.lang = {drillUpText: '< 返回 “{series.name}”'}; Highcharts.setOptions(para); var map = null; var url = 'https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?'; $.getJSON(url, function(mapdata) { var data = []; data.push({name:'北京',value:5000}); data.push({name:'西藏',value:2001}); data.push({name:'上海',value:2000}); data.push({name:'广东',value:2200}); data.push({name:'浙江',value:1800}); data.push({name:'福建',value:1000}); var para = {}; para.title = {'text':'中国地图'}; para.mapNavigation = {enabled: true,buttonOptions: {verticalAlign: 'bottom'}}; para.colorAxis = {min: 0,minColor: '#fff',maxColor: '#006cee',labels:{style:{"color":"red","fontWeight":"bold"}}}; para.series = [{data: data,mapData: mapdata,joinBy: 'name',name: '中国地图'}]; para.credits = {'enabled':false}; map = new Highcharts.Map('container',para); }); ~~~