Echarts实战案例代码(12):Highcharts与Echarts地图geoJSON的比较及使用方法

简介: Echarts实战案例代码(12):Highcharts与Echarts地图geoJSON的比较及使用方法

在数据可视化中,需要做地图信息可视化时,必须用到geoJSON。目前支持地图数据可视化的JS库比较丰富,现以Highcharts与Echarts两个图表库为例,对比下geoJSON的区别!


geoJSON是什么?

geojson是用json的语法表达和存储地理数据,可以说是json的子集,其格式如下:

{
  "type": "FeatureCollection",
  "features": [
        {"type":"Feature",
        "properties":{},
        "geometry":{
            "type":"Point",
            "coordinates":[105.380859375,31.57853542647338]
            }
        }
    ]
}

Highcharts与Echarts地图geoJSON区别


image.png


在实际的使用过程中,


1.Echarts地图geoJSON代码结构如下格式,没有更多的属性和字段,不能直接应用于Highcharts的Highmaps中;

2.Highmaps的geoJSON代码结构更复杂,内容信息更丰富,但是可以直接应用于Echarts中。


Highcharts地图数据属性

  • 国内地图格式:
 "features": [
    {
      "type": "Feature",
      "properties": {
        "adcode": 440100,
        "name": "广州",
        "center": [
          113.280637,
          23.125178
        ],
        "childrenNum": 11,
        "level": "city",
        "subFeatureIndex": 0,
        "fullname": "广州市",
        "filename": "guangzhou",
        "parent": "广东省",
        "areacode": 440100,
        "longitude": 113.280637,
        "latitude": 23.125178,
        "cp": [
          6177,
          2558
        ],
        "drilldown": "guangdong/guangzhou"
      },


image.png


  • 国外地图格式:
    Echarts格式基本与国内相同,Highcharts的geoJSON更复杂。
"features": [
    {
      "type": "Feature",
      "id": "AU.NT",
      "properties": {
        "hc-group": "admin1",
        "hc-middle-x": 0.48,
        "hc-middle-y": 0.58,
        "hc-key": "au-nt",
        "hc-a2": "NT",
        "labelrank": "2",
        "hasc": "AU.NT",
        "alt-name": null,
        "woe-id": "2344701",
        "subregion": null,
        "fips": "AS03",
        "postal-code": "NT",
        "name": "Northern Territory",
        "country": "Australia",
        "type-en": "Territory",
        "region": null,
        "longitude": "133.78",
        "woe-name": "Northern Territory",
        "latitude": "-20.1026",
        "woe-label": "Northern Territory, AU, Australia",
        "type": "Territory"
      },


image.png


geojson.io的支持

Highcharts 导入后,不能正常显示区域;

Echarts 可正常显示。


如何获取geoJSON

Echarts的国、省、市、区县,网络资源丰富,CSDN下载中心也有;乡镇边界基本是需要付费购买的,直接手绘的精确度不够,也费时费力。

Highcharts国内geojson,省市文件可以直接调用,县级数据需要购买。


Done!

相关文章
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
954 1
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
|
XML 前端开发 数据格式
echarts柱图前后端代码SpringCloud+Vue3
echarts柱图前后端代码SpringCloud+Vue3
312 1
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts进行一周跑步数据分析,通过雷达图展示多维度指标(如距离、速度、时间),颜色对比体现个人与平均表现。折线图则清晰显示每日里程趋势,代码示例展示了自定义的`radar`和`line`图表配置。图表交互性强,支持点击高亮,动画流畅,提供完整代码资源。#ECharts #跑步数据 #数据可视化
515 3
ECharts综合案例一:近七天跑步数据
|
数据可视化 数据挖掘
ECharts综合案例一:近七天跑步数据
使用ECharts展示近七天跑步数据,结合雷达图和折线图揭示运动表现。雷达图多维度呈现全程距离、速度和时间,对比平均指标;折线图清晰展示里程趋势。图表具有交互性和动画效果,通过[代码地址](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454698)可获取详情。#ECharts #跑步数据 #数据可视化 #雷达图 #折线图
634 3
ECharts综合案例一:近七天跑步数据
|
数据采集 自然语言处理 数据可视化
ECharts 词云案例四—电影《千与千寻》部分短评
**使用ECharts和电影《千与千寻》短评创建的词云案例展示了数据可视化的力量。通过Python处理评论,提取关键词并计算频率,利用jieba和WordCloud生成词云,ECharts进一步增强了视觉效果。词云突出了角色如“千寻”、“无脸男”及关键词“勇气”、“成长”,揭示了观众的情感共鸣。示例代码和资源可在链接中获取。**
361 0
 ECharts 词云案例四—电影《千与千寻》部分短评
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
1347 0
 ECharts 雷达图案例001-自定义节点动画
|
前端开发 数据可视化 JavaScript
【揭秘神器】如何用Pyecharts轻松召唤出Echarts?只需几行Python代码,让你的数据瞬间生动起来!
【8月更文挑战第21天】Pyecharts是一款基于Python的图表生成库,利用Echarts强大的JavaScript可视化能力,让开发者无需编写前端代码即可在Python环境中创建美观图表。本文通过实例演示如何安装Pyecharts并生成一个展示城市气温分布的柱状图,包括基本图表生成及自定义样式设置,如颜色调整、图例显示等,最终将图表嵌入HTML文件展示,适合各水平开发者快速掌握数据可视化技能。
568 0
|
定位技术 Apache
Echarts——Invalid geoJson format Cannot read property 'length' of undefined
Echarts——Invalid geoJson format Cannot read property 'length' of undefined
325 0
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
2549 1
微信小程序使用echarts图表(ec-canvas)
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
下一篇
开通oss服务