关于使用原生Ajax+ECharts图片无法显示的问题-解决方案

关于使用原生Ajax+ECharts图片无法显示的问题-解决方案

• 问题重现

   function ons(){var names = [];var values = [];var xmlhttprequest = new XMLHttpRequest();xmlhttprequest.open("GET","/untitled2_war_exploded/bar?table=bar",true);xmlhttprequest.onreadystatechange = function(){if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {//alert("1");var json = JSON.parse(xmlhttprequest.responseText);console.log(json);for (var o in json) {names.push(json[o].name);values.push(json[o].value);}}}xmlhttprequest.send();one(names,values);}function one(names,values){//1、获取图表容器，封装为对象//alert("!");console.log(names);console.log(values);const lc = document.getElementById('main');lc.removeAttribute('_echarts_instance_');let myChart = echarts.init(lc);myChart.showLoading({text:'正在加载数据'});var option = {xAxis: {type: 'category',//传入特定的参数，通过参数传入data: names},yAxis: {type: 'value'},series: [{//传入特定的参数，通过参数传入data: values,type: 'bar'/* showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}*/}]};myChart.setOption(option);myChart.hideLoading();//将提示关闭}

  我在调试jsp页面的代码的时候，发现浏览器中的console中有数据但是，echrts图表没有显示。百思不得其解啊，而且我花了1个小时在网络上寻找原因，得到的都不是问题的解决方案,然后我在一篇文章获得了解决思路,我们需要在浏览器中的debug断点查看，是否真的有值传进来,结果就是，有一个数据在控制太显示为空，我想这这不应该呀,为什么和执行时不一样呢。

  之后我仔细看代码发现，xmlhttprequest对象在执行请求之后就直接去调用绘图的方法了，绘图函数并不会等待xmlhttprequest执行完毕，但是这段的时间里我们并不知道有没有获取到数据，xmlhttprequest执行的时候是占用主线程执行还是使用新线程执行？是否线程安全呢？

• 解决办法

  • 我们必须保证ajax请求到数据后在执行,从XMLHttpRequest对象的状态,添加xmlhttprequest.onloadend 的状态函数，在函数中调用绘图函数，这样就能保证数据的传输。

xmlhttprequest.onloadend = function (){one(names,values);}

 function ons(){var names = [];var values = [];var xmlhttprequest = new XMLHttpRequest();xmlhttprequest.open("GET","/untitled2_war_exploded/bar?table=bar",true);xmlhttprequest.onreadystatechange = function(){if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {//alert("1");var json = JSON.parse(xmlhttprequest.responseText);console.log(json);for (var o in json) {names.push(json[o].name);values.push(json[o].value);}}}//需要设置一个请求完的执行函数xmlhttprequest.onloadend = function (){one(names,values);}xmlhttprequest.send();}//数据还未加载，就已经渲染,导致图表为空function one(names,values){//1、获取图表容器，封装为对象//alert("!");console.log(names);console.log(values);const lc = document.getElementById('main');lc.removeAttribute('_echarts_instance_');let myChart = echarts.init(lc);myChart.showLoading({text:'正在加载数据'});var option = {xAxis: {type: 'category',//传入特定的参数，通过参数传入data: names},yAxis: {type: 'value'},series: [{//传入特定的参数，通过参数传入data: values,type: 'bar'/* showBackground: true,backgroundStyle: {color: 'rgba(180, 180, 180, 0.2)'}*/}]};myChart.setOption(option);myChart.hideLoading();//将提示关闭}

至于上述的XMLHttpRequest对象有没有是如何执行的，本人js代码阅读能力有限，也就需要读者自己去探究。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！