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

刺骨的言语ヽ痛彻心扉 2023-02-25 07:30 7阅读 0赞

1.  json文件放到static文件夹下；
2.  axios请求的地址写为：

this.$axios({ 
        	methods:'GET',
               url:`${ this.jsonUrl}/static/map/${ this.chinaId}.json`
            }).then(res=>{ 
               this.geoJson=res.data;
               this.registerAndsetOption('中国', this.geoJson,this.EquipNum,false)   
            })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]  
3. jsonUrl为线上项目浏览器地址，注意不是请求接口的地址；  
![在这里插入图片描述][20200711120108132.jpg]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1]  
4. 线上地图效果；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: /images/20230209/1ac765e1ad524076a3a5104e416493a0.png
[20200711120108132.jpg]: https://img-blog.csdnimg.cn/20200711120108132.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 1]: /images/20230209/14259032598a4a08ad387ee2ec0e4f7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 2]: /images/20230209/5111270fc94a4bdf8052859684e64385.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue中安装与引用echarts示例

![在这里插入图片描述][198b80c65c724e61a9b1ac41f8ca946e.png_pic_center] 第002个 [点击查看专栏目录][Link 1]

秒速五厘米/ 2024年03月27日 11:09/ 0 赞/ 81 阅读

相关（12）vue引用echarts

一、引用步骤： 1、先引入echarts库：如果用的页面比较多，可以在main.js中全局引入echarts库；如果用的页面不多，可以单独引入。这里采用全局引入：

布满荆棘的人生/ 2023年07月20日 12:15/ 0 赞/ 68 阅读

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

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

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

相关 VUE项目学习（五）：引用echarts组件

VUE项目学习（五）：引用echarts组件演示效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

逃离我推掉我的手/ 2023年01月05日 03:55/ 0 赞/ 334 阅读

相关 js中echarts如何使用geojson

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

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

相关 vue项目中使用echarts

> 1. 安装 npm install echarts --save ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

偏执的太偏执、/ 2022年10月22日 02:55/ 0 赞/ 242 阅读

相关 vue项目中引入echarts

关于如何搭建vue项目，引入vue-router和vuex。请移步 [vue项目中引入vue-router][vue_vue-router] [vue项目中引入vu

àì夳堔傛蜴生んèń/ 2022年09月10日 02:14/ 0 赞/ 397 阅读

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

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

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

相关 vue项目中使用echarts

vue项目中使用echarts 一、使用场景在项目开发中，我们往往会遇到数据统计方面的需求，这时候为了直观的呈现数据，我们需要制作图表。此时，我们可以使用

朴灿烈づ我的快乐病毒、/ 2021年08月30日 11:51/ 0 赞/ 571 阅读

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