使用highEcharts做出中国地图的效果图

直接上代码吧

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="container" style="height: 100%;width: 100%;"></div>//js需要自己去官网上面进行下载，直接进行引用即可，同时可以根据自己的需要进行地图的自我定制。<script src="./highmaps.js"></script><script src="./jquery.js"></script><script src="./drilldown.js"></script><script src="./exporting.js"></script><script>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: '中国地图'},mapNavigation: {enabled: true,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>',footerFormat: '</table>'},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'}}}]});});</script>
</body></html>

使用highEcharts做出中国地图的效果图相关推荐

VUE 中实现echarts中国地图人口迁徙
VUE 中实现echarts中国地图人口迁徙效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...
vue echerts 中国地图热力图
vue echerts 中国地图热力图效果图展示 <template> <div id="chinaEcharts" ref="chinaEchart ...
excel做地图热力图_如何简单快速的做出一个中国地图热力图 (数据随机虚构)
如何简单快速的做出一个中国地图热力图: 用 Echarts 即可以简单快速的写出: 除导入 echarts.js 外,还需要导入中国的 JSON 或是 js(现在官方不提供下载,需要自行下载,也可以 ...
python采用Basemap绘制完美中国地图（包括绘制边界框，随机点等）
python采用Basemap绘制完美中国地图(包括绘制边界框,随机点等) 1. 效果图 2. 原理 2.1 依赖模块及安装 2.2 工程目录 2.3 依赖文件latlng.txt 经纬度 3 源码 ...
基于VUE+TS中引用ECharts的中国地图和世界地图密度表
(第一次写掘金,嗯也不知道写啥好.想了想,先来一份简单可口的老菜谱.虽然以前在其他平台也上过,换个地方说不准口味刚好呢哈哈哈哈-) 首先先附上官网 http://echarts.baidu.com/o ...
R语言绘制中国地图：着色省份、标注省份名称
今天分享一个可以直接使用的中国地图,相较于其他R语言绘制的地图,有以下优点: 1.包含十段线 http://xzqh.mca.gov.cn/map 2.标注省份名称缺点:南海岛礁未绘制小地图重点 ...
Echarts实现中国地图线路图特效（一对多发射点）
1.效果图 2.完整配置代码可以把代码直接贴到官网测试效果: https://www.echartsjs.com/examples/zh/editor.html?c=map-polygon // 中 ...
echarts实现中国地图，山西地图，图表面积图配置项
文章目录 1.vue引入echars 2.建立echars基本框架 3.中国地图 4.山西地图为例,展示点击获取城市名称并保存在data中,方便使用 6.图表面积图(大小,线条颜色,面积颜色,百分比显 ...
echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步: 生成中国地图第二步: 定义点击事件根据反参生成省级地图所需要的参数第三步: 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts ...
echarts的中国地图，点击进入省级地图，点击省级地图，返回中国地图
先上效果图, 鼠标放上去时的效果,如下图所示: 点击进入到的省级地图,如下图所示: 中国地图,鼠标放上去时的代码: myChart.on('mouseover', function (params) ...

使用highEcharts做出中国地图的效果图

使用highEcharts做出中国地图的效果图相关推荐

最新文章

热门文章