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

最新推荐文章于 2024-02-22 15:01:25 发布
最新推荐文章于 2024-02-22 15:01:25 发布
阅读量6.4k 收藏 22
点赞数 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
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ECharts 异步加载数据
lsx202406的博客
06-08 735
ECharts 是一个使用 JavaScript 实现的开源可视化库，它能够在网页中展示丰富的图表类型。在实际应用中，数据往往需要从服务器异步加载，而不是直接嵌入到网页中。本文将详细介绍如何在 ECharts 中实现异步加载数据，并探讨相关的优化技巧。
echarts图属性以及ajax异步加载echarts不显示问题
qq_36430463的博客
03-14 3365
饼状图 &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
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
Echarts 异步请求不能加载本地JSON数据解决方案，以及Http-Server安装与使用
Nick.Peng's Blogs
02-25 3667
文章目录一、前言二、分析&解决方案三、Http-Server简介&安装方法四、启动http本地服务方法五、附：Http-Server可选配置 一、前言 最近学习eharts制作图表，异步请求获取本地*.json数据，html文件都写好了，右击文件用浏览器直接打开时， 制作的图表并没有渲染出来，这是因为使用异步请求加载数据时，由于cors跨域资源共享问题导致的不能读取json数据；...
echart异步加载数据（加载本地文件）
qq_51434774的博客
08-21 1001
echarts异步加载官网案例
echarts series中的data属性添加动态数据后不显示问题，一处儿异步细节问题
最新发布
weixin_57237676的博客
02-22 985
当从后端获取到数据后，发现饼图并没有顺利加载数据出来，使用console.log()测试先后执行顺序，会发现饼图的方法会比请求先执行。此时就可以把饼图的方法放入到请求执行结束后。一处儿异步的细节问题，注意一下就好了。
用异步执行解决echarts不显示数据
Madman528的博客
06-14 1333
代码如下 echarts画图，DOM渲染的时候，echarts实现先从后端获取数据再渲染 ,但是执行顺序是先执行 再执行 也就是数据都没而渲染需要的事数据先有再执行,所以得用同步的方法执行,用async await...
vue3echarts图表渲染不出来
qq_44961720的博客
03-13 2358
vue3echarts图表渲染不出来
Echarts使用本地JSON文件加载不出图表的解决方法以及Jquery访问本地JSON文件跨域的解决方法
爱吃雪糕的小布丁的博客
05-11 3863
最近需要做一个大屏展示，需要用原生html5+css+js来写，所以去学了一下echarts的使用。在使用的过程中难免碰到许多BUG，百度那是必不可少的，可是这些人写的牛头不对马嘴，简直是标题党一大堆，令我作呕，现将我认为比较重要的两个问题记录如下。
Echarts图表使用后台数据不显示问题解决
yrrjiayou的博客
05-13 8786
Echarts图表使用后台数据不显示问题解决
Echarts 异步数据加载遇到的问题
weixin_30576859的博客
04-23 519
看了Echarts官网异步加载数据的Demo var myChart = echarts.init(document.getElementById('main')); // 显示标题，图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, leg...
vue使用echarts时，初始化数据到eacharts时，数据显示不出来，将异步请求改成同步，获取promise中数据
weixin_46371752的博客
03-07 2624
应用背景 mounted(){ get_data(){}， set_echarts(){ //在这里面需要用到get_data()中获取的后端数据 }, } 问题是axios请求时异步请求，在请求响应回来前，echarts就已经完成了创建了。此时请求还没有回来，所以图表就没有数据了。解决的方法就是让获取数据请求变成同步的，拿到数据后在创建echarts图表对象。 例子 1、图表指定标签 <div id="first-lin
echarts异步获取mysql数据_ECharts异步请求数据
weixin_42629815的博客
02-23 686
ECharts是百度的一个用于数据可视化图表展示的一个开源工具。ECharts官网：ECharts一、异步请求官网实例11、引入jQuery.js、echarts.js(多种方式)2、绘制图表①为ECharts准备一个具备大小(宽高)的Dom②基于准备好的dom，初始化echarts实例③异步请求数据方法A：// 基于准备好的dom，初始化echarts实例var myChart = echart...
Echarts动态获取数据(C#)
08-09
在C#环境中，我们可以利用Echarts与后端服务器进行交互，动态地从数据库或其他数据源获取数据，并在前端展示。下面将详细解释如何在C#中实现Echarts动态获取数据。 1. **Echarts基本配置**： 首先，你需要在HTML...
Echarts：基础折线图（含异步加载数据）
12-04
总结来说，ECharts的基础折线图是通过定义配置项和数据来创建的，而异步加载数据则可以通过HTTP请求从服务器获取，然后动态更新配置项以反映新的数据。这种灵活性使得ECharts能够适应各种复杂的数据可视化需求。在...
微信小程序中使用ECharts 异步加载数据实现图表功能
10-18
在页面的生命周期方法中，我们可以设置一个延时调用`getData`函数，模拟异步获取数据： ```javascript onReady() { setTimeout(this.getData, 500); }, ``` `getData` 方法是关键，它负责发送异步请求获取数据，...
asp.net_echarts后台动态获取数据.rar
06-22
通过以上步骤，我们可以在ASP.NET项目中实现后台动态获取数据，并利用ECharts进行数据可视化展示。这不仅提高了用户体验，也使得数据分析和决策更为直观和高效。在实际项目中，还可以结合其他技术，如Bootstrap或...
echarts如何获取后端的值_Echarts 获取后台数据 使用后台数据展示 柱形图
weixin_39820437的博客
12-20 837
后台数据要以json格式返回页面:引用echarts.js , 然后data以ajax的数据请求并返回String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path +...
总结：Echarts 请求后台数据后不显示
CSSAJBQ_的博客
05-30 1403
解决办法一，在请求数据（发送Ajax）里面判断有数据返回才初始化图表（init）； 解决办法二，监听数据（深度watch）变化里面初始化图表（init）。
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、付费专栏及课程。

余额充值