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.dataif (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; // 将数据赋值给 cntDatathis.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
方法中进行了这个调用,但是需要注意确保数据获取成功后才执行这个调用。


看懂了好像…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/64080.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web安全——穷举爆破上篇(仅供学习)

Web安全 一、概述二、常见的服务1、burpsuite 穷举后台密码2、burpsuite 对 webshell 穷举破解密码3、有 token 防御的网站后台穷举破解密码3.1 burpsuite 设置宏获取 token 对网站后台密码破解3.2 编写脚本获取token 对网站后台密码破解 4、针对有验证码后台的穷举方法4.1 coo…

stm32之IIC协议

主要通过两个层面来讲&#xff1a;物理层、协议层。 IIC是一个同步半双工串行总线协议。 一、物理层&#xff08;通信模型&#xff09; 1、最早是飞利浦公司开发的这个协议&#xff0c;最早应用到其产品上去。 2、两线制&#xff08;两根信号线&#xff09; 其中SCL为时钟…

双网卡/内外网同时使用2023.09.01

1.双网卡 电脑需要两个网卡&#xff1a;两个网口或者是一个有线网卡加一个无线网卡。 查看网关&#xff1a;如下网口接入网线后&#xff0c;电脑连接WIFI&#xff0c;电脑会显示存在两个网卡正在使用&#xff08;电脑存在两个IP地址&#xff09; 查看本地的路由设置 route p…

服务器数据恢复- RAID5出现故障后恢复数据和操作系统的案例

服务器数据恢复环境&#xff1a; 某品牌服务器中有4块SAS硬盘组建了一组RAID5阵列&#xff0c;另外1块磁盘作为热备盘使用。上层操作系统为redhat linux&#xff0c;部署了一个数据库是oracle的OA。 服务器故障&初检&#xff1a; RAID5中一块磁盘离线后热备盘未自动激活re…

Vue 组件中如何引入外部的js文件 的10种方法

在Vue组件的<script>标签中使用import语句引入外部的JavaScript文件&#xff0c;适用于单个组件需要使用外部JavaScript文件的情况。这种方法可以在编译时静态地引入外部文件&#xff0c;并且可以通过import语句的路径指定具体的文件位置。 在Vue组件的<script>标…

设计模式-适配器

文章目录 一、简介二、适配器模式基础1. 适配器模式定义与分类2. 适配器模式的作用与优势3.UML图 三、适配器模式实现方式1. 类适配器模式2. 对象适配器模式3.类适配器模式和对象适配器模式对比 四、适配器模式应用场景1. 继承与接口的适配2. 跨平台适配 五、适配器模式与其他设…

Spring工具类--Assert的使用

原文网址&#xff1a;Spring工具类--Assert的使用_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Spring的Assert工具类的用法。 Assert工具类的作用&#xff1a;判断某个字段&#xff0c;比如&#xff1a;断定它不是null&#xff0c;如果是null&#xff0c;则此工具类会报…

大数据课程K16——Spark的梯度下降法

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 了解Spark的梯度下降法&#xff1b; ⚪ 了解Spark的梯度下降法家族&#xff08;BGD&#xff0c;SGD&#xff0c;MBGD&#xff09;&#xff1b; ⚪ 掌握Spark的MLlib实现…

ChatGPT和文心一言的优缺点比较

ChatGPT和文心一言都是自然语言生成技术的代表&#xff0c;下面是它们的优缺点比较&#xff1a; ChatGPT的优点&#xff1a; 自由度高&#xff1a;ChatGPT生成的文本与给定的话题没有紧密的关联&#xff0c;可以灵活地生成多种不同的文本。多样性高&#xff1a;ChatGPT可以生…

Vue生命周期(详细)

生命周期 图&#xff1a; 可以理解vue生命周期就是指vue实例从创建到销毁的过程&#xff0c;在vue中分为8个阶段&#xff1a;创建前/后&#xff0c;载入前/后&#xff0c;更新前/后&#xff0c;销毁前/后。 一、创建&#xff08;实例&#xff09; 1、beforeCreate&#xff1a…

【单片机】单片机入门指南

一、概述 单片机&#xff08;Microcontroller&#xff0c;简称MCU&#xff09;是一种集成了微处理器、存储器、时钟、IO端口和外设接口等的集成电路芯片。它可以通过编程实现各种控制、运算等功能&#xff0c;常用于自动化控制、家电、智能仪表等领域。 二、单片机的种类和选…

C语言每日一练-------Day(9)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;字符个数统计 多数元素 投票法 &#x1f493;博主csdn个人主页&#xf…

Docker及常用数据库安装

Docker安装常用数据库 1、Docker安装2、Mysql安装3、Redis安装4、DM安装5、Oracle安装1、Docker安装 1、确保 yum 包更新到最新yum update2、卸载旧版本(如果安装过旧版本的话)yum remove docker docker-common docker-selinux docker-engine3、安装需要的软件包, yum-util 提…

基于Stable Diffusion的AIGC服饰穿搭实践

本文主要介绍了基于Stable Diffusion技术的虚拟穿搭试衣的研究探索工作。文章展示了使用LoRA、ControlNet、Inpainting、SAM等工具的方法和处理流程&#xff0c;并陈述了部分目前的实践结果。通过阅读这篇文章&#xff0c;读者可以了解到如何运用Stable Diffusion进行实际操作&…

图:有向无环图(DAG)

1.有向无环图的定义 有向无环图:若一个有向图中不存在环&#xff0c;则称为有向无环图。 简称DAG图(Directed Acyclic Graph) 顶点中不可能出现重复的操作数。 2.有向无环图的应用 1.描述算数表达式 用有向无环图描述算术表达式。 解题步骤&#xff1a; 把各个操作数不重…

【前端入门案例1】HTML + CSS

案例一 <!DOCTYPE html> <html lang"en-US"><head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width"><title>My test page</title> </head><body><…

word6 图文混排

目录 7-1 段落缩进排版7-2 搞定多级列表难题 7-1 段落缩进排版 段落对齐 缩进问题 悬挂缩进&#xff1a;缩进首行以外的段落 段落对齐&#xff1a; 7-2 搞定多级列表难题

【Python从入门到进阶】34、selenium基本概念及安装流程

接上篇《33、使用bs4获取星巴克产品信息》 上一篇我们介绍了如何使用bs4来解析星巴克网站&#xff0c;获取其产品信息。本篇我们来了解selenium技术的基础。 一、什么是selenium&#xff1f; Selenium是一种用于自动化Web浏览器操作的开源工具。它提供了一组API&#xff08;应…

Spring Cloud Foundry上使用通配符模式匹配进行的安全绕过漏洞 CVE-2023-20873

文章目录 0.前言1.参考文档2.基础介绍描述如果满足以下任一条件&#xff0c;应用程序就不会有太大风险&#xff1a;受影响的Spring产品和版本 3.解决方案3.1. 升级版本3.2. 替代方案 0.前言 背景&#xff1a;公司项目扫描到 Spring Cloud Foundry上使用通配符模式匹配进行的安全…