vue项目实战之用echarts实现疫情地图，jsonp跨域处理。

已于 2023-08-17 16:17:34 修改
阅读量1.5k 收藏 9
点赞数 3
分类专栏： vue2实战记录 文章标签： 数据可视化 前端 jsonp
于 2020-04-16 23:27:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/105569705
版权

今天我们来学习一下vue项目中用echarts实现疫情地图，jsonp做跨域处理。

搭建脚手架@vue/cli

1.node安装。
2.命令npm install -g @vue/cli
3.命令npm install webpack -g​
4.命令vue create echarts-demo
如若不会搭建脚手架，请移步这里查看搭建方法。
脚手架搭建好后，效果如下图：
在这里插入图片描述

封装自定义组件与配置路由

封装自定义组件

我们先在views文件夹下新建一个自定义的组件Echarts.vue,如下图所示：
在这里插入图片描述
然后打开APP.vue，配置如下图所示的路由跳转:

了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
Echarts异步更新中的跨域问题
yangyang的专栏
06-02 1675
之前转载了一篇文章《Flask+Echarts 实现动图图表》，后来自己想实现异步更新的时候，数据就是一直不加载。 下面就是百度官方的示例代码： $.get('data.json').done(function (data) { // 填入数据 myChart.setOption({ xAxis: { data: data.categor...
Java体系知识之Echarts&跨域访问&Vue脚手架
qq_45464872的博客
12-01 407
Java体系知识之Echarts&跨域访问&Vue脚手架 1 Echarts 1.1 技术简介 1.2 案例 2 跨域访问（重点） 2.1 错误信息 2.2 跨域访问 2.3 省市区案例-改造 2.3
ECharts实现异步数据加载时出现跨域问题
m0_70365829的博客
05-12 511
ECharts实现异步数据加载时出现跨域问题，直接换软件运行
echarts图表动态获取后台数据详解（三）--ajax跨域请求
zfb52572的博客
12-21 5128
前面两篇文章，分别介绍了静态数据的echarts展示和从后台数据库获取数据展示在图表上，但是这都是在同一个项目下。要是遇到这样一种情况：要求新建一个项目（或者网站、网页），与后台数据库的那个项目不在一个项目上。但是，所要展示的数据，却要从后台数据库中索取。此时，ajax请求就要跨域了。简单的说：有A、B两个不同的项目，A要展示B数据库中的数据，以前直接使用的ajax请求就不行了，网上百度了很多，我
Echarts使用本地JSON文件加载不出图表的解决方法以及Jquery访问本地JSON文件跨域的解决方法
爱吃雪糕的小布丁的博客
05-11 3832
最近需要做一个大屏展示，需要用原生html5+css+js来写，所以去学了一下echarts的使用。在使用的过程中难免碰到许多BUG，百度那是必不可少的，可是这些人写的牛头不对马嘴，简直是标题党一大堆，令我作呕，现将我认为比较重要的两个问题记录如下。
ECharts 请求本地地图json文件数据 跨域问题 解决方案
weixin_45011156的博客
01-29 2534
ECharts ajax请求本地地图json文件 出现跨域问题 var myCharts = echarts.init(document.querySelector("div")); $.get('./json/map/china.json',function(ret) { console.log(ret); }); var option = { }; myCharts.setOption(option);
vue.js中使用echarts实现数据动态刷新功能
10-17
以下是如何在Vue.js中使用ECharts实现这一功能的详细步骤和相关知识点： 首先，确保已经安装了ECharts库。如果还没有安装，可以通过npm或yarn进行安装： ```bash npm install echarts # 或 yarn add echarts ``` 接...
Vue Echarts实现可视化世界地图代码实例
11-28
Echarts实现可视化世界地图模拟迁徙，以我自己开发过程。 下载Echarts依赖： npm install echarts 成功以后引入依赖： import echarts from 'echarts' peopleInsertCharts为生成echarts容器。 let myChart = ...
Vue项目中使用jsonp抓取跨域数据的方法
10-16
总的来说，Vue项目中使用JSONP抓取跨域数据的步骤包括：安装JSONP库，封装一个返回Promise的`jsonp`函数，处理参数并将它们拼接到URL上，最后通过`originJsonp`发起请求并处理结果。这种方式使得在Vue项目中实现跨域...
vue项目中jsonp跨域获取qq音乐首页推荐问题
10-18
通过以上步骤，我们成功地在Vue项目中实现了使用JSONP跨域获取QQ音乐首页推荐数据。需要注意的是，JSONP只适用于GET请求，且目标服务器需要支持JSONP。如果目标服务器不支持，或者需要POST请求，可以考虑使用CORS...
vue项目实战 vue项目实战
最新发布
01-20
vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战vue项目实战...
SignalR2.2.1 MVC5 跨域访问 echarts 地图
03-14
SignalR2.2.1 MVC5 跨域访问 echarts 地图 将实时 Web 功能添加到应用程序的过程
vue+vite+宝塔 项目打包上线云服务器详细过程（含echarts数据请求跨域问题）
weixin_52084329的博客
11-26 1711
又是心情异常复杂的一篇文章，但是万事开头难，还是超级开心啊哈哈哈哈哈哈哈！这是自己写的一个小项目，基于vite创建，包含了echarts调用api请求数据，所以里面涉及到了跨域问题困扰了我很久！
jquery+echarts初体验 _跨域问题解决方案
qq_40974421的博客
06-01 1658
使用echarts 1、柱状图 2、折线图 ​3、饼状图 ​4、中国地图 1. 跨域请求：在不同源的页面/资源中进行请求。 2. 同源策略：如果两个页面的协议(http/https)，端口（如果有指定）和主机(IP地址)都相同，则两个页面具有相同的源，如果中间有一个不同，则源不同。 3. 如何解决跨域请求问题，需要在前后端一起处理。 a) 前端：使用jsonp解决跨域请求的问题。 ECharts是...
vue + echarts+ 离线json 实现地图效果 (精确的乡镇轮廓)
KoalaandVinci的博客
08-16 3339
实现的： ① 并没有使用到百度或者高德的api插件 ② 是利用json实现的离线地图，可以通过配置json来配置地图的轮廓 想请教： 想加入离线的json路线，就类似于导航路线那种，尝试过导入离线json地图一样去导入，但是没成功，也没报错。（如果有大佬会的，请务必指点一下，拜托了） 总结实现步骤: ① 利用软件绘制离线json地图文件（精确到县内城镇）。 如果不需要精确到县内城镇的话， 只是到省轮廓的话，echarts包内置就有json和js文件。 如果需要精确到县级，但不需要里面的城镇轮廓。可以到 转
Echarts异步加载url无法访问至后台，异步加载跨域问题。
在路上的小马达
01-06 2825
单纯的我 镇!    问题来源于Echarts开发时，本地测试已成功在与接口对接时出现异步加载时加载不成功，当时我就懵逼了...  这代码一样，我改了个ip就不行了？？  莫非Echarts不支持url使用 ip地址？   然后宝宝就方了。。。 问题描述 $.get('http://localhost:8080/Echarts/echarts').done(function (da
JSON数据处理及与echarts结合使用时所需要的问题
u010989191的博客
05-24 6211
data部分传入的数据要求是数组如果是json数据 需要做出解析后变成数据才可以使用 1. var str = “[‘研发部’,’研发部’,’研发部’,’研发部’]”; var strData = eval(“(“+str+”)”); //数组对象2. var data = new Array(); //数组对象 data.push(“研发部”); data.push(“客服部”);
html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷。
qq_365392777
08-09 3418
❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画，业务迁移热点显示动画，地图勾起动画，非常炫酷。ps：涉及跨域，本地上传服务器查看演示。 ❉ 文章目录 ❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 ❉ 效果演...
vue中使用echarts实现地图
07-28
在Vue中使用ECharts实现地图，首先需要引入ECharts图表库。可以通过以下代码将ECharts引入Vue项目中： ```javascript // 引入ECharts图表库 import echarts from 'echarts' Vue.prototype.$echarts = echarts ``` 接下来，需要在Vue组件中创建一个地图容器，可以使用`<div>`标签，并设置一个唯一的`id`属性，以及设置容器的高度。例如： ```html <div id="myChart" style="height: 600px;"></div> ``` 然后，在Vue组件的`mounted`生命周期钩子函数中，可以通过`this.$echarts.init()`方法初始化地图，并通过`setOption()`方法设置地图的配置项和数据。例如： ```javascript mounted() { // 初始化地图容器 const myChart = this.$echarts.init(document.getElementById('myChart')) // 设置地图的配置项和数据 const option = { // 地图的配置项 // ... // 地图的数据 // ... } // 渲染地图 myChart.setOption(option) } ``` 以上代码中，需要根据具体的需求设置地图的配置项和数据。可以参考ECharts官方文档中提供的示例和API进行配置和数据的设置。 请注意，以上代码只是一个简单的示例，具体的实现方式可能会根据项目的需求和使用的ECharts版本而有所不同。建议参考ECharts官方文档和相关教程进行更详细的学习和实践。 #### 引用[.reference_title] - *1* [vue中使用echarts,echarts-map:echarts画地图](https://blog.csdn.net/weixin_45302156/article/details/120545621)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue+ECharts实现可视化地图](https://blog.csdn.net/u011924274/article/details/124941788)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值