Java体系知识之Echarts&跨域访问&Vue脚手架

最新推荐文章于 2024-06-19 00:41:07 发布
最新推荐文章于 2024-06-19 00:41:07 发布
阅读量420 收藏
点赞数
分类专栏： 前端 文章标签： echarts java vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45464872/article/details/128138150
版权
Java体系知识之Echarts&跨域访问&Vue脚手架 1 Echarts 1.1 技术简介 1.2 案例 2 跨域访问（重点） 2.1 错误信息 2.2 跨域访问 2.3 省市区案例-改造 2.3
摘要由CSDN通过智能技术生成

Java体系知识之Echarts&跨域访问&Vue脚手架

(1)Echarts图表工具
(2)跨域访问
(3)Vue 脚手架

1 Echarts

1.1 技术简介

(1)Apache ECharts
(2)一个基于 JavaScript 的开源可视化图表库
(3)使用步骤：
	A.引入echarts.js文件
	B.创建一个指定了宽高的容器
	C.根据图表的配置项和数据以图表的形式呈现数据
		C1.基于准备好的dom，初始化echarts实例
		C2.指定图表的配置项和数据
		C3.使用刚指定的配置项和数据显示图表

1.2 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入echarts文件 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.js"></script>

	</head>
	<body>
		<!-- 2.创建一个指定了宽高的容器 -->
		<div id="main" style="width: 600px;height:400px;"></div>
	</body>
	<script>
		/* 
			3.呈现图表
		 */
		// 3.1基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 3.2指定图表的配置项和数据
		var option = {
     
			xAxis: {
     
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
     
				type: 'value'
			},
			series: [{
     
				data: [150, 230, 224, 218, 135, 147, 260],
				type: 'line'
			}]
			/* title: {
				text: 'ECharts 入门示例'
			},
			tooltip: {},
			legend: {
				data: ['销量']
			},
			xAxis: {
		 	data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}] */
		};

		// 3.3使用刚指定的配置项和数据显示图表
		myChart.setOption(option);
	</script>

</html>

2 跨域访问（重点）

2.1 错误信息

Access to XMLHttpRequest at 'http://localhost:8080/area' from origin 'http://127.0.0.1:8848' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2 area.html:106 o

2.2 跨域访问

(1)Cookie：
	A.HTTP协议：无状态协议
	B.客户端和服务端，服务端只关心请求   
	C.如何让服务端知道该客户端已经不是第一次访问它了，可以使用Cookie
	D.数据安全考虑：
		浏览器基于Cookie同源限制
		D1.不涉及到跨域请求时，Cookie会随着请求自动发送到服务器端，用于验证自己身份
		D2.涉及到跨域请求时，默认不会在请求中携带Cookie数据
	同源：
		http://localhost:8080/具体资源
		对于协议|域名|端口，若两个页面有一个值不一样，就认为是不同源
		http://localhost:8080
		http://localhost:8081
(2)同源政策越来越严格：
	浏览器：使用Ajax技术时，只能向自己的服务器发请求
(3)CORS：
	Cross-Origin Resource Sharing  跨域资源共享
(4)解决：
	在服务器端设置允许哪个客户端来访问它
	跨域请求：
		// 允许跨域的主机地址，一般写具体的客户端的主机地址，比如http://127.0.0.1:8848
        resp.setHeader("Access-Control-Allow-Origin","http://127.0.0.1:8848");
        // 允许跨域的请求方法，GET|POST...，也可以直接写*
        resp.setHeader("Access-Control-Allow-Methods","*");
        // 重新域检验跨域的缓存时间(s)
        resp.setHeader("Access-Control-Max-Age","3600");
        // 允许跨域的请求头
        resp.setHeader("Access-Control-Allow-Headers","*");
        // 允许携带Cookie信息
        resp.
最低0.47元/天 解锁文章
katahill
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue利用echarts简单实现具有中心节点的知识图谱代码
08-02
vue利用echarts简单实现具有中心节点的知识图谱，其中边缘节点可拖动，其大小可以根据传入的值而变化
ECharts实现异步数据加载时出现跨域问题
m0_70365829的博客
05-12 521
ECharts实现异步数据加载时出现跨域问题，直接换软件运行
echarts如何接入数据
qq_40388552的博客
12-18 7855
这个例子写的尽量简洁，只保留了接入数据的一些关键地方 var myCharts = echarts.init(document.getElementById('DivID')); var yDate = []; //存放y轴的值的数组 var seriesDate = []; //存放y轴的值的数组 //加载数据到echarts图表中的方法 function loadDate() { yDate...
【续】echarts疫情地图的单跨域proxy代理方法获取外部url的json
最新发布
2401_84435192的博客
06-19 635
heal”:0,“dead”:0,})console.log(new Date(jsonData.timestamp).toLocaleString(),‘二月份的数据（数据不全已废弃）’)let num=[];let map=[];
asp+access+IIS开发
wqq654的博客
04-09 129
asp+access+IIS开发，连接数据库后网页打开空白或者显示错误信息如下 错误编号如：-2147467259错误等，原因可能是数据表过大。
Java 基于 Apache ECharts 实现：柱状图、折线图、环形图等案例
https://gitee.com/micai-code
06-13 4320
Java 基于 Apache ECharts 实现：柱状图、折线图、环形图等案例
解决：前端请求跨域问题
weixin_48033662的博客
07-01 1546
什么是同源协议？ 同源策略/SOP （Same origin policy）是一种约定，由 Netscape 公司1995年引入浏览器。 同源策略是指在 Web 浏览器中： 若某个网站的脚本（比如：js脚本）需要去访问另一个网站的相关资源；那这两个网站就必须同时满足下面三个条件才行，否则浏览器就会自动拦截脚本发起的相关请求: 1、协议相同； 2、域名相同； 3、端口相同；
Vue 安装 vue-cli 脚手架 & 创建 vue 项目
01-06
windows vue vue-cli 安装 macos 前往 node.js 官网下载 MacOS 版然后无脑下一步。安装完成后验证一下。 node -v # 验证 nodejs 版本 npm -v # 验证 npm 版本 切换 npm 为淘宝源。 // 切换到淘宝镜像 npm config ...
基于vue-cli脚手架整合echarts5创建的水球图案例
07-19
Vue CLI是一个强大的脚手架工具，用于快速搭建Vue.js项目，而ECharts5则是一款优秀的数据可视化库，它提供了丰富的图表类型，包括我们在此案例中使用的水球图（liquidFill）。 首先，让我们了解Vue CLI。Vue CLI是...
Vue开发环境跨域访问问题
10-15
本文将深入探讨Vue开发环境中的跨域访问问题，并提供解决方案。 首先，理解“跨域”（CORS，Cross-Origin Resource Sharing）的概念至关重要。同源策略是浏览器为了安全而实施的一项策略，它禁止了一个源（协议+...
vue+Java后端进行调试时解决跨域问题的方式
08-29
今天在开发中遇到有点小问题，vue+Java后端进行调试时如何解决跨域问题，下面小编给大家分享解决方法，感兴趣的朋友一起看看吧
eCharts使用总结：属性解释
coldriversnow的专栏
03-21 663
【代码】eCharts使用总结：属性解释。
echarts 饼图
weixin_53152356的博客
11-15 466
echarts 饼图加引导线末尾段加圆点
Java生成Echarts表图的两种方案
可乐的博客
05-15 6057
Java生成Echarts图表
java 利用echart统计折线图，柱状图
ljs62811123的博客
08-20 2209
统计
Echarts使用本地JSON文件加载不出图表的解决方法以及Jquery访问本地JSON文件跨域的解决方法
爱吃雪糕的小布丁的博客
05-11 3859
最近需要做一个大屏展示，需要用原生html5+css+js来写，所以去学了一下echarts的使用。在使用的过程中难免碰到许多BUG，百度那是必不可少的，可是这些人写的牛头不对马嘴，简直是标题党一大堆，令我作呕，现将我认为比较重要的两个问题记录如下。
java——插件echarts数据可视化图表库
weixin_42858422的博客
09-17 9259
插件echarts数据可视化图表库一、使用idea创建javaWeb工程二、下载echarts导入js文件三、使用echarts。————————创作不易，如觉不错，随手三连点赞，收藏，关注，谢谢~~ 一、使用idea创建javaWeb工程 创建工程，因为我这里已经配置好JDK跟Tomcat服务器了，就直接选择了。 下一步 下一步 项目创建完成了只后，我们创建两个文件夹，分别用来存放编译后的文件，跟jar包 接着，我们对着两个包进行配置，首先配置classes，选择classes的位置 下一步，接
vue项目实战之用echarts实现疫情地图，jsonp跨域处理。
qq_37635012的博客
04-16 1592
今天我们来学习一下vue项目中用echarts实现疫情地图，jsonp做跨域处理。 搭建脚手架@vue/cli 1.node安装。 2.命令npm install -g @vue/cli 3.命令npm install webpack -g​ 4.命令vue create echarts-demo 如若不会搭建脚手架，请移步这里查看搭建方法。 脚手架搭建好后，效果如下图： 封装自定义组件与配置路...
屏幕适配、剖析跨域、Echarts万能封装、Axios二次封装、常见GIT...
qq_57238596的博客
09-14 203
就之前学习的记录，屏幕适配的两种常见方法，剖析跨域、Echarts万能封装，Axios的二次封装、操作GIT操作。
vue使用echarts出现跨域
05-20
在 Vue 中使用 ECharts 时，如果数据源和 ECharts 所在的域名不同，则会出现跨域问题，需要进行跨域处理。 解决方法： 1. 在服务端设置响应头Access-Control-Allow-Origin，允许指定的域名跨域访问。 2. 使用 vue-cli 的 proxyTable 配置代理，将请求转发到后台服务器上，由后台服务器进行跨域处理。 3. 在 ECharts 的配置项中设置 dataURL，将数据请求发送到后台服务器，由后台服务器进行跨域处理。 示例代码： ```javascript // 1. 在服务端设置响应头 // 在后台服务器中添加以下代码： // 设置允许指定的域名跨域访问 header("Access-Control-Allow-Origin: http://localhost:8080"); // 2. 使用 vue-cli 的 proxyTable 配置代理 // 在 vue.config.js 文件中添加以下代码： module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } // 3. 在 ECharts 的配置项中设置 dataURL // 在 Vue 组件中添加以下代码： <template> <div id="chart"></div> </template> <script> export default { data () { return { chartData: [] } }, mounted () { this.getChartData() }, methods: { getChartData () { this.$http.get('/api/chart').then(res => { this.chartData = res.data this.drawChart() }) }, drawChart () { const option = { title: { text: 'ECharts 数据统计' }, xAxis: { type: 'category', data: this.chartData.map(item => item.name) }, yAxis: { type: 'value' }, series: [{ data: this.chartData.map(item => item.value), type: 'bar' }] } this.$echarts.init(document.getElementById('chart')).setOption(option) } } } </script> ``` 上述示例代码中，第一种和第二种方法都需要后台服务器的支持，在后台服务器中设置响应头或配置代理；第三种方法则是将数据请求发送到后台服务器进行跨域处理，需要在 Vue 组件中使用 $http 发送请求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值