js中echarts如何使用geojson

喜欢ヅ旅行 2022-12-13 14:11 351阅读 0赞

echarts导入geojson最小demo，毫无花里胡哨参数，简单易懂  
直接上代码

<!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>China</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        <style> html, body, div { padding: 0;margin: 0;height: 100%;overflow: hidden;} </style>
    </head>
    <body>
        <div id="xxx"></div>
        <script type="text/javascript"> //拿地图json //axios请用axios.get $.get('https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json',(json)=>{ //注册地图 echarts.registerMap("china", json); //拿标签 echarts.init(document.getElementById('xxx')).setOption({ series: [{ //使用上面注册的地图 map: "china", //初始化类型写地图 type: "map", }] }); }) </script>
    </body>
    </html>

可导入本地json，把下载好的的json文件放入项目内用get导入即可

如何找地图json  
[地图选择器][Link 1]

其他参数请参考手册根据项目添加  
[echarts.series.map 文档][echarts.series.map]

[Link 1]: http://datav.aliyun.com/tools/atlas/#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
[echarts.series.map]: https://echarts.apache.org/zh/option.html#series-map

发表评论取消回复

表情：

评论列表（有 0 条评论，351人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript-js中echart的使用技巧

javascript中echart的使用技巧一. javascript中echart简介： 1.1 丰富的可视化类型

亦凉/ 2023年10月14日 09:01/ 0 赞/ 27 阅读

相关使用echart.js和echarts-gl.js实现旋转地球

今天，无意中看见一个同学写的旋转地球的页面，非常漂亮。因此自己动手也学习编写，现在把代码放在CSDN，和大家一起分享！ ECharts是一款基于[JavaScript][]的

曾经终败给现在/ 2023年10月08日 17:53/ 0 赞/ 32 阅读

相关如何在vue中使用echart图表

人狠话不多，先上效果图！ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

川长思鸟来/ 2023年03月13日 05:14/ 0 赞/ 48 阅读

相关初识echarts（1）：如何在 react 中使用echarts

在写这篇博客之前，我看到网上模板中的图表总觉得“好大上啊，代码一定很复杂吧”，现在网上搜搜找找，一通摸索，突然觉得好像没那么难搞。这篇博客我先简单总结总结 “如何

古城微笑少年丶/ 2023年03月03日 08:57/ 0 赞/ 52 阅读

相关 vue项目中如何引用echarts的geojson文件

1. json文件放到static文件夹下； 2. axios请求的地址写为： this.$axios({ methods:'GET',

刺骨的言语ヽ痛彻心扉/ 2023年02月25日 07:30/ 0 赞/ 9 阅读

相关 Echarts地图registerMap使用的GeoJson数据获取（精确到区）

数据是在[DATAV.GeoAtlas][]中获取的，根据自己的需求随意选择省、市、区，页面中给的json链接地址就是想要的geo数据，特方便，记录备用。 [https://

以你之姓@/ 2023年02月23日 08:46/ 0 赞/ 20 阅读

相关 js中echarts如何使用geojson

echarts导入geojson最小demo，毫无花里胡哨参数，简单易懂直接上代码 <!DOCTYPE html> <html lang="zh">

喜欢ヅ旅行/ 2022年12月13日 14:11/ 0 赞/ 352 阅读

相关 echarts系列——在vue工程化项目中如何使用echarts

安装echarts依赖 npm install echarts --save 点击查看 [echarts官网安装教程][echarts] 创建图表

灰太狼/ 2022年04月08日 08:45/ 0 赞/ 353 阅读

相关将 Shp 文件转换为 geojson 加载到 echarts 使用

一般情况下，我们的功能需求并不是要整个地图来展示，也许只是需要某一个市或地区的一个形状来制作出一个地图效果，这个时候其实使用 Echarts 地图是一个不错的选择。

Bertha 。/ 2021年11月22日 08:42/ 0 赞/ 620 阅读

相关自制echarts 地区geojson

1.打开在线工具 [http://geojson.io/\map=7/37.335/103.700][http_geojson.io_map_7_37.335_103.700

迈不过友情╰/ 2021年05月16日 20:36/ 0 赞/ 615 阅读