vue3封装echarts图表数据无法渲染到页面问题
vue3封装echarts图表数据无法渲染到页面
问题是后端的数据已经成功返回到前端了,但是Echarts图表一直不能被渲染,卡了一个多小时,最后问gpt才解决(gptyyds!!!)
methods: { loadGet() { this.$axios.get(this.$httpUrl + '/goods/count').then(res => res.data).then(res => { console.log(res) // this.cntdata = res.data if (res.code == 200) { // this.yData = res.data // this.cntData.length=0; for (let i = 0; i < res.data.length; i++) { this.cntData.push(res.data[i]); } console.log("data = =" + this.cntData + res.data.length) this.$message({ message: '操作成功!', type: 'success' }); } else { this.$message({ message: '操作失败!', type: 'error' }); } }) }, init() { //调用session中的用户数据 this.user = JSON.parse(sessionStorage.getItem('CurUser')) }, initEcharts() { let option = { title: { text: "现存物资量" }, tooltip: {}, legend: { data: [""] }, xAxis: { data: ["鼠标", "帐篷", "键盘", "口罩", "矿泉水", "棉被"] }, yAxis: {}, series: [ { name: "发放量", type: "bar", //类型为柱状图 // data: [5, 20, 36, 10, 10, 20] data: this.cntData //问题出在这 data一直不能被后端返回的this.cntData渲染! } ] }; const myChart = echarts.init(this.$refs.mychart);// 图标初始化 myChart.setOption(option);// 渲染页面 //随着屏幕大小调节图表 window.addEventListener("resize", () => { myChart.resize(); }); }, }, created() { this.init() } } </script>
原文
- 我:这份代码中ECharts图标中的 series 中的data无法被后端传来的数据渲染怎么办
- gpt:在你提供的代码中,ECharts 图表的数据被初始化为 this.cntData,但 this.cntData 在组件创建时是一个空数组。要使图表能够根据后端传来的数据进行渲染,你需要确保在数据加载完成后再初始化图表。
- 为了实现这一点,你可以在 loadGet 方法成功获取数据后调用 initEcharts 方法来初始化图表。这确保了数据已经准备好并且可以在图表中使用。
下面是修改后的代码片段:
methods: { loadGet() { this.$axios.get(this.$httpUrl + '/goods/count').then(res => res.data).then(res => { console.log(res); if (res.code === 200) { this.cntData = res.data; // 将数据赋值给 cntData this.initEcharts(); // 初始化图表 !!!!!!这里! this.$message({ message: '操作成功!', type: 'success' }); } else { this.$message({ message: '操作失败!', type: 'error' }); } }); }, initEcharts() { let option = { // ... 其余图表配置 ... series: [ { name: "发放量", type: "bar", //类型为柱状图 data: this.cntData // 使用从后端获取的数据 } ] }; const myChart = echarts.init(this.$refs.mychart); myChart.setOption(option); window.addEventListener("resize", () => { myChart.resize(); }); }, // ... 其他方法 ... },
我:其中的mounted方法是先于beforeMount运行的吗
gpt:不对,beforeMount 方法在 mounted 方法之前执行。
Vue.js 生命周期中的顺序是如下的:
beforeCreate
:在实例初始化之后,数据观测 (data observation) 和事件配置 (event/watcher setup) 之前被调用。这时实例还没有初始化完成,数据和事件方法尚不可用。created
:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data observation),属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,DOM 元素也还没有被创建。beforeMount
:在挂载开始之前被调用:相关的 render 函数首次被调用。mounted
:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
所以,beforeMount 在 mounted 之前执行,它们分别位于 Vue 实例生命周期的不同阶段。
–没看懂。。。。
我:那为什么this.cntData不能去填充图标的data
gpt:问题可能是由于异步操作的原因。在你的代码中,loadGet 方法通过异步请求从后端获取数据,并在获取数据后调用initEcharts 方法。然而,由于异步请求的性质,initEcharts 方法可能在数据还没有获取到时就被调用了,导致 this.cntData 仍然是空数组。
要解决这个问题,你可以确保在数据成功获取后再调用 initEcharts 方法。你已经在 loadGet
方法中进行了这个调用,但是需要注意确保数据获取成功后才执行这个调用。
看懂了好像…
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论