js中echarts如何使用geojson

喜欢ヅ旅行 2022-12-13 14:11 336阅读 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 条评论，336人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 js中echarts如何使用geojson

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

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

相关 leaflet ajax geojson,使用leaflet绘制geoJson中国边界

functiondrawChina() \{//设置样式 var myStyle =\{"color": "\00f","weight": 2,"opacity": 0.5

╰+哭是因爲堅強的太久メ/ 2022年09月03日 15:22/ 0 赞/ 337 阅读

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

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

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

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

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

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

相关 Echarts-地图扩展-标准geoJson格式扩展地图-例子

本人菜鸟一枚，最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子，瞬间就蒙逼了。不怪人官网的例子不好，实在是我看不懂它是怎么弄得。最后

一时失言乱红尘/ 2021年11月11日 05:12/ 0 赞/ 392 阅读

相关 Echarts3 map类型生成地图文件GeoJson方法

前言使用Echarts加载Map地图，最重要的事获取Map的`GeoJson`数据，只有存在GeoJson的情况下，才是进行工作的基础。官方矢量地图下载数

布满荆棘的人生/ 2021年09月17日 09:20/ 0 赞/ 667 阅读

相关自制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 赞/ 594 阅读