Echarts异步获取数据不显示问题

最新推荐文章于 2024-05-21 14:59:48 发布
最新推荐文章于 2024-05-21 14:59:48 发布
阅读量6.4k 收藏 21
点赞数 6
分类专栏： Echarts 文章标签： big data sqoop echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48959845/article/details/121640176
版权

问题描述：

做Echarts可视化图表，前后端分离项目，前端异步获取后端接口数据时 echarts图表不显示问题
在这里插入图片描述

left_center_char() {
				
				var datesli = [];
				var confirmedsli = [];
				var confirmedli = [];

				this.$axios.get("/hive2/getPre").then((res) => {
					
					// var datesli=[]
					// var confirmedli=[]  //预测值
					var recoveredli=[]
					// var confirmedsli=[]  //真实值
					var recoveredsli=[]
					var getPreli=[datesli,confirmedli,recoveredli,confirmedsli,recoveredsli]
					
					var getpre=res.data.data.pre
//					console.log(getpre)
					for(let i=0;i<getpre.length;i++){
						datesli.push(getpre[i]['dates'])
						confirmedli.push(getpre[i]['confirmed'])
						recoveredli.push(getpre[i]['recovered'])
						confirmedsli.push(getpre[i]['confirmeds'])
						recoveredsli.push(getpre[i]['recovereds'])
					}
				}).catch((error) => {
					console.warn(error)
				})

				console.log("----------------------------------")
				console.log(datesli)

				//直接引用进来使用
				var echarts = require('echarts');
				// 基于准备好的dom，获取main节点init初始化echarts实例
				var myChart = echarts.init(document.getElementById('left_center_in'));

				var fontColor = '#30eee9';

				// 指定图表的配置项和数据
				var option = {

					//只需要在此加入所需内容
					grid: {
						left: '2%',
						//						right: '1%',
						top: '4%',
						bottom: '3%',
						containLabel: true
					},
					tooltip: {
						show: true,
						trigger: 'item'
					},
					legend: {
						show: true,
						x: 'center',
						y: '10',
						icon: 'stack',
						itemWidth: 8,
						itemHeight: 8,
						textStyle: {
							color: '#1bb4f6'
						},
						data: ['确诊数', '预测值']
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							color: fontColor
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#397cbc'
							}
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#195384'
							}
						},
						data: datesli
  //data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					}],
					yAxis: [{
							type: 'value',
							name: '',
							min: 84000,
							max: 89000,
							axisLabel: {
								formatter: '{value}',
								textStyle: {
									color: '#2ad1d2'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#27b4c2'
								}
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: '#11366e'
								}
							}
						},

					],
					series: [{
							name: '确诊数',
							type: 'line',
							showAllSymbol: true,
							smooth: true,
							stack: '总量',
							symbol: 'circle',
							symbolSize: 2,
							itemStyle: {
								normal: {
									color: '#0092f6',
									lineStyle: {
										color: "#0092f6",
										width: 1
									},
								}
							},
							markPoint: {
								itemStyle: {
									normal: {
										color: 'red'
									}
								}
							},
							data: confirmedsli
							          //  data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
						},
						{
							name: '预测值',
							type: 'line',
							stack: '总量1',
							symbol: 'circle',
							symbolSize: 2,
							showAllSymbol: true,
							smooth: true,
							itemStyle: {
								normal: {
									color: '#00d4c7',
									lineStyle: {
										color: "#00d4c7",
										width: 1
									},
								}
							},
							data: confirmedli
							
						},

					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
				console.log(option.xAxis);
				
			},

调试代码的时候数据已经请求成功，而且打印option对象里面的属性，奇葩的是数据也有的

在这里插入图片描述

在这里插入图片描述

原因分析：

想要解决这个问题就要彻底了解什么是异步请求和什么是同步请求

同步请求，客户端向服务端发送请求，服务端响应以后客户端才渲染页面
异步请求，客户端向服务端发送请求，客户端不等服务端响应就行行页面渲染，一般做页面的局部刷新。

那么造成上面原因就是我的页面向服务端发送请求，页面不等服务端响应就已经渲染图表，尽管后面数据请求成功但此时页面已经渲染成功，页面此时只知道他所渲染图表时数据为空，所以不会显示数据

解决方案：

解决方法有两种：一，将渲染图表的代码移交到请求的代码块中 如下 
left_center_char() {
				
				var datesli = [];
				var confirmedsli = [];
				var confirmedli = [];

				this.$axios.get("/hive2/getPre").then((res) => {

					// var datesli=[]
					// var confirmedli=[]  //预测值
					var recoveredli=[]
					// var confirmedsli=[]  //真实值
					var recoveredsli=[]
					var getPreli=[datesli,confirmedli,recoveredli,confirmedsli,recoveredsli]
					
					var getpre=res.data.data.pre
//					console.log(getpre)
					for(let i=0;i<getpre.length;i++){
						datesli.push(getpre[i]['dates'])
						confirmedli.push(getpre[i]['confirmed'])
						recoveredli.push(getpre[i]['recovered'])
						confirmedsli.push(getpre[i]['confirmeds'])
						recoveredsli.push(getpre[i]['recovereds'])
					}


					var echarts = require('echarts');
				// 基于准备好的dom，获取main节点init初始化echarts实例
				var myChart = echarts.init(document.getElementById('left_center_in'));

				var fontColor = '#30eee9';

				// 指定图表的配置项和数据
				var option = {

					//只需要在此加入所需内容
					grid: {
						left: '2%',
						//						right: '1%',
						top: '4%',
						bottom: '3%',
						containLabel: true
					},
					tooltip: {
						show: true,
						trigger: 'item'
					},
					legend: {
						show: true,
						x: 'center',
						y: '10',
						icon: 'stack',
						itemWidth: 8,
						itemHeight: 8,
						textStyle: {
							color: '#1bb4f6'
						},
						data: ['确诊数', '预测值']
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							color: fontColor
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#397cbc'
							}
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#195384'
							}
						},
						data: datesli
  //data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					}],
					yAxis: [{
							type: 'value',
							name: '',
							min: 84000,
							max: 89000,
							axisLabel: {
								formatter: '{value}',
								textStyle: {
									color: '#2ad1d2'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#27b4c2'
								}
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: '#11366e'
								}
							}
						},

					],
					series: [{
							name: '确诊数',
							type: 'line',
							showAllSymbol: true,
							smooth: true,
							stack: '总量',
							symbol: 'circle',
							symbolSize: 2,
							itemStyle: {
								normal: {
									color: '#0092f6',
									lineStyle: {
										color: "#0092f6",
										width: 1
									},
								}
							},
							markPoint: {
								itemStyle: {
									normal: {
										color: 'red'
									}
								}
							},
							data: confirmedsli
							          //  data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
						},
						{
							name: '预测值',
							type: 'line',
							stack: '总量1',
							symbol: 'circle',
							symbolSize: 2,
							showAllSymbol: true,
							smooth: true,
							itemStyle: {
								normal: {
									color: '#00d4c7',
									lineStyle: {
										color: "#00d4c7",
										width: 1
									},
								}
							},
							data: confirmedli
							
						},

					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				}).catch((error) => {
					console.warn(error)
				})
			},

二，在渲染图标时重新加载数据

left_center_char() {


				//直接引用进来使用
				var echarts = require('echarts');
				// 基于准备好的dom，获取main节点init初始化echarts实例
				var myChart = echarts.init(document.getElementById('left_center_in'));

				var fontColor = '#30eee9';

				// 指定图表的配置项和数据
				var option = {

					//只需要在此加入所需内容
					grid: {
						left: '2%',
						//						right: '1%',
						top: '4%',
						bottom: '3%',
						containLabel: true
					},
					tooltip: {
						show: true,
						trigger: 'item'
					},
					legend: {
						show: true,
						x: 'center',
						y: '10',
						icon: 'stack',
						itemWidth: 8,
						itemHeight: 8,
						textStyle: {
							color: '#1bb4f6'
						},
						data: ['确诊数', '预测值']
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						axisLabel: {
							color: fontColor
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#397cbc'
							}
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#195384'
							}
						},
						data: []
  //data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					}],
					yAxis: [{
							type: 'value',
							name: '',
							min: 84000,
							max: 89000,
							axisLabel: {
								formatter: '{value}',
								textStyle: {
									color: '#2ad1d2'
								}
							},
							axisLine: {
								lineStyle: {
									color: '#27b4c2'
								}
							},
							axisTick: {
								show: false,
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: '#11366e'
								}
							}
						},

					],
					series: [{
							name: '确诊数',
							type: 'line',
							showAllSymbol: true,
							smooth: true,
							stack: '总量',
							symbol: 'circle',
							symbolSize: 2,
							itemStyle: {
								normal: {
									color: '#0092f6',
									lineStyle: {
										color: "#0092f6",
										width: 1
									},
								}
							},
							markPoint: {
								itemStyle: {
									normal: {
										color: 'red'
									}
								}
							},
							data: []
							          //  data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
						},
						{
							name: '预测值',
							type: 'line',
							stack: '总量1',
							symbol: 'circle',
							symbolSize: 2,
							showAllSymbol: true,
							smooth: true,
							itemStyle: {
								normal: {
									color: '#00d4c7',
									lineStyle: {
										color: "#00d4c7",
										width: 1
									},
								}
							},
							data: []
							
						},

					]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);

				console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
				console.log(option.xAxis);

				//获取预测数据,目标格式:[0, 50, 100, 150, 200, 250, 300, 350]
				this.$axios.get("/hive2/getPre").then((res) => {
					console.log(res)
					
					var datesli=[]
					var confirmedli=[]  //预测值
					var recoveredli=[]
					var confirmedsli=[]  //真实值
					var recoveredsli=[]
					var getPreli=[datesli,confirmedli,recoveredli,confirmedsli,recoveredsli]
					
					var getpre=res.data.data.pre
//					console.log(getpre)
					for(let i=0;i<getpre.length;i++){
						datesli.push(getpre[i]['dates'])
						confirmedli.push(getpre[i]['confirmed'])
						recoveredli.push(getpre[i]['recovered'])
						confirmedsli.push(getpre[i]['confirmeds'])
						recoveredsli.push(getpre[i]['recovereds'])
					}
					// this.dates=datesli
					// this.confirmed=confirmedli
					// this.recovered=recoveredli
					// this.confirmeds=confirmedsli
					// this.recovereds=recoveredsli
//					console.log(this.recovered)
					myChart.setOption({
						xAxis: {
                            data: datesli
                        },
                        series: [{
                            // 根据名字对应到相应的系列
//                          name: '销量',
                            data:confirmedsli
                        },{
                        	data:confirmedli
                        }]
					})
//					that.right_center_char(this.dates, this.recovereds,this.recovered)
				}).catch((error) => {
					console.warn(error)
				})
			},

在这里插入图片描述
成功

如果有不对的地方希望大家给出宝贵建议

炸鸡叔老白
关注
  • 6
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts图属性以及ajax异步加载echarts不显示问题
qq_36430463的博客
03-14 3361
饼状图 &amp;lt;div id=&quot;yewuyuan&quot;&amp;gt;&amp;lt;/div&amp;gt; dataPic('yewuyuan'); function dataPic(x){ var my=$(&quot;#my&quot;).val(); var you=$(&quot;#you&quot;).val(); va
echarts异步获取mysql数据_ECharts异步请求数据
weixin_42629815的博客
02-23 680
ECharts是百度的一个用于数据可视化图表展示的一个开源工具。ECharts官网：ECharts一、异步请求官网实例11、引入jQuery.js、echarts.js(多种方式)2、绘制图表①为ECharts准备一个具备大小(宽高)的Dom②基于准备好的dom，初始化echarts实例③异步请求数据方法A：// 基于准备好的dom，初始化echarts实例var myChart = echart...
用异步执行解决echarts不显示数据
Madman528的博客
06-14 1325
代码如下 echarts画图，DOM渲染的时候，echarts实现先从后端获取数据再渲染 ,但是执行顺序是先执行 再执行 也就是数据都没而渲染需要的事数据先有再执行,所以得用同步的方法执行,用async await...
echarts 地图正常显示，但是 tooltip数据 不显示问题
最新发布
qq_46112218的博客
05-21 371
【代码】echarts 地图正常显示，但是 tooltip数据 不显示问题。
vue使用echarts时，初始化数据到eacharts时，数据显示不出来，将异步请求改成同步，获取promise中数据
weixin_46371752的博客
03-07 2606
应用背景 mounted(){ get_data(){}， set_echarts(){ //在这里面需要用到get_data()中获取的后端数据 }, } 问题是axios请求时异步请求，在请求响应回来前，echarts就已经完成了创建了。此时请求还没有回来，所以图表就没有数据了。解决的方法就是让获取数据请求变成同步的，拿到数据后在创建echarts图表对象。 例子 1、图表指定标签 <div id="first-lin
ECharts图表首次加载不显示问题
weixin_72018800的博客
06-19 1284
你进页面他是不会显示的所有图表的，你会发现你请求的接口返回的是200。原本页面是一进去就加载所有显示图表，然而现实是这样的。这个时候你就得在你的组件使用v-if判断他是不是有值。
vue3echarts图表渲染不出来
qq_44961720的博客
03-13 2338
vue3echarts图表渲染不出来
Echarts使用本地JSON文件加载不出图表的解决方法以及Jquery访问本地JSON文件跨域的解决方法
爱吃雪糕的小布丁的博客
05-11 3812
最近需要做一个大屏展示，需要用原生html5+css+js来写，所以去学了一下echarts的使用。在使用的过程中难免碰到许多BUG，百度那是必不可少的，可是这些人写的牛头不对马嘴，简直是标题党一大堆，令我作呕，现将我认为比较重要的两个问题记录如下。
Echarts图表使用后台数据不显示问题解决
yrrjiayou的博客
05-13 8739
Echarts图表使用后台数据不显示问题解决
Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用
Nick.Peng's Blogs
02-25 3654
文章目录一、前言二、分析&解决方案三、Http-Server简介&安装方法四、启动http本地服务方法五、附：Http-Server可选配置 一、前言 最近学习eharts制作图表，异步请求获取本地*.json数据，html文件都写好了，右击文件用浏览器直接打开时， 制作的图表并没有渲染出来，这是因为使用异步请求加载数据时，由于cors跨域资源共享问题导致的不能读取json数据；...
echart异步加载数据（加载本地文件）
qq_51434774的博客
08-21 998
echarts异步加载官网案例
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
【Vue + Echarts 实现动态绘制图表及异步加载数据】 在 Vue 框架中，结合 Echarts 图表库可以方便地实现动态绘制图表，包括折线图、柱状图等。Echarts 是一个基于 JavaScript 的开源可视化库，提供了丰富的图表类型...
Echarts动态获取数据(C#)
08-09
在C#环境中，我们可以利用Echarts与后端服务器进行交互，动态地从数据库或其他数据源获取数据，并在前端展示。下面将详细解释如何在C#中实现Echarts动态获取数据。 1. **Echarts基本配置**： 首先，你需要在HTML...
Echarts：基础折线图（含异步加载数据）
12-04
总结来说，ECharts的基础折线图是通过定义配置项和数据来创建的，而异步加载数据则可以通过HTTP请求从服务器获取，然后动态更新配置项以反映新的数据。这种灵活性使得ECharts能够适应各种复杂的数据可视化需求。在...
asp.net_echarts后台动态获取数据.rar
06-22
通过以上步骤，我们可以在ASP.NET项目中实现后台动态获取数据，并利用ECharts进行数据可视化展示。这不仅提高了用户体验，也使得数据分析和决策更为直观和高效。在实际项目中，还可以结合其他技术，如Bootstrap或...
echarts+Servlet+mysql从数据库获取数据实现简单图表展示
03-17
用Servlet实现的echarts展示两种不同形式图表的小demo，使用的开发工具是eclipse，数据库是mysql。文件中包含项目源码，对应的数据库，以及项目运行后实现的图表截图（含url）。项目本人亲测，可完美展示图表，若有...
Echarts异步渲染动态数据不显示
m0_47733490的博客
11-09 1194
发现获取处理完数据，页面不显示，找了半天原因，最后发现是处理数据的时候，函数调用顺序出了问题，粗心大意 函数调用写早了，数据处理还没执行完，就先执行图标渲染了，肯定没数据，傻逼了 处理完后： ...
echats异步数据加载失败
qq_41820986的博客
03-15 273
echats异步数据加载 在做echats异步数据的时候遇到一个坑，特此记录。echats加载数据默认是静态的，这个老年人的数据怎么可能满足我们呢？此处采用ajax数据，（遇坑）。 网页初始加载的时候js默认全部加载，但是，ajax并没有把数据加载进去，ajax加载慢着一点。所以解决的问题办法就是在ajax成功的时候再进行对echats数据进行绑定。 //封装函数 function zxt(name,da){ var myChart = echarts.init(docume
echarts异步加载
08-06
在ECharts中，可以使用异步加载来动态加载数据和图表。这样可以提高页面加载速度并减少初始数据的传输量。以下是一种常见的异步加载数据和图表的方法： 1. 创建一个空的容器来放置图表，例如一个div元素： ```html <div id="chartContainer" style="width: 600px; height: 400px;"></div> ``` 2. 使用JavaScript代码初始化一个空的图表实例，并设置好基本的配置： ```javascript var chart = echarts.init(document.getElementById('chartContainer')); chart.setOption({ // 设置初始的配置项 }); ``` 3. 使用异步请求获取数据，并在数据返回后更新图表的配置项： ```javascript // 异步请求数据 axios.get('your_api_url') .then(function (response) { // 数据返回后更新图表的配置项 chart.setOption({ // 使用返回的数据更新配置项 series: response.data.series, xAxis: response.data.xAxis, // ... }); }) .catch(function (error) { console.log(error); }); ``` 以上代码示例使用了axios库来进行异步请求，你也可以根据自己的需求选择其他适合的库或方法来进行异步请求。在数据返回后，使用`chart.setOption()`方法来更新图表的配置项，从而实现动态加载和更新图表。 注意：在使用异步加载时，确保在数据返回后再进行图表的初始化和渲染，以避免出现空白或错误的图表显示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

炸鸡叔老白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值