for循环 绘制Echarts图表之后,点击 添加图表向前插入图表遇到实例未更新

一、问题及预期

for循环 绘制图表之后,点击 添加图表, 应该展示空表的初始状态,但是展示的是上一个图表正常有数据的图表

二、复盘

  1. 采用index 作为下标去渲染图表实例
  2. 导致点击【添加图表】按钮的时候向前添加的下标为0 ,和原来存在为0的下标实例重复,从而导致会展示【上一个图表正常有数据的图表】
  3. 不使用index作为图表实例渲染,采用随机数或者是时间戳去做绘制图表
  4. 新增的数据会初始展示空表 【正确】
  5. 新增的数据点击查询正常出现图表 【正确】

三、案例代码

为了确保点击“添加新图表”后,新图表展示为空白的初始状态,同时之前的图表展示正常有数据的状态,你需要在addNewChart方法中正确初始化新图表,并保证不影响已有图表的状态。以下是修改后的addNewChart方法,以及相关的初始化图表的逻辑:

  1. 修改addNewChart方法:确保添加新图表时,不会影响到已有图表的显示。
private addNewChart() {const timestamp = new Date().getTime(); // 使用时间戳生成唯一标识const obj = {formCustom: {groupField: '',calculateField: 'requestId',granularity: 60,},name: '',chartType: 1,isCollect: false,isInitChart: false,cardItemId: `${timestamp}`, // 为每个图表卡片分配一个唯一IDtableData: [], // 确保新图表的数据为空chartTableData: [], // 确保新图表的数据为空numberTotal: 0, // 对于数字类型的图表,初始化总数为0};this.chartCardList.unshift(obj); // 将新图表添加到数组的开头this.$nextTick(() => {this.initChartInstances(); // 初始化图表实例});
}
  1. 初始化图表实例:在添加新图表后,你需要重新初始化所有图表的实例,以确保新添加的图表能够正确显示。这里我们添加一个initChartInstances方法来处理这个逻辑。
private initChartInstances() {this.chartCardList.forEach((cardItem, index) => {if (cardItem.chartType !== 1 && cardItem.chartType !== 2) { // 假设只有类型3, 4, 5, 6需要初始化图表const chartRef = this.$refs[`chart_${cardItem.cardItemId || cardItem.formCustom.id}`];const chartDom = Array.isArray(chartRef) ? chartRef[0] : chartRef;if (chartDom) {this.initChart(chartDom, cardItem.cardItemId, cardItem.chartType, cardItem.chartTableData);}}});
}
  1. 调整initChartHandle方法:确保initChartHandle方法能够正确处理新添加的图表卡片。
private initChartHandle(cardItem: any, resRows: any, cardItemId: number) {// 你的原始逻辑...this.$nextTick(() => {this.initChartInstances(); // 确保在DOM更新后重新初始化图表实例});
}

通过上述修改,每次添加新图表时,都会重新初始化所有图表的实例,确保新添加的图表展示为空白的初始状态,而不会影响到已有图表的显示。请注意,这里的initChartInstances方法假设只有特定类型的图表需要初始化ECharts实例,你可能需要根据实际情况调整这部分逻辑。

四、实例案例

  <mtd-cardclass="card-box"v-for="(cardItem, index) in chartCardList":key="cardItem.cardItemId"><div:ref="`chart_${cardItem.cardItemId || cardItem.formCustom.id}`"class="chart-box"></div>
</mtd-card>
 private chartInstances: any = [];private addNewChart() {const timestamp = new Date().getTime(); // 使用时间戳生成唯一标识const obj = {formCustom: {groupField: '',calculateField: 'requestId',granularity: 60,},name: '',chartType: 1,isCollect: false,cardItemId: `${timestamp}`, // 为每个图表卡片分配一个唯一ID};this.chartCardList.unshift(obj);this.$nextTick(() => {this.initChartInstances(); // 初始化图表实例});}// 初始化图表实例private initChartInstances() {this.chartCardList.forEach((cardItem: any) => {if (cardItem.chartType !== 1 && cardItem.chartType !== 2) {// 类型3, 4, 5, 6需要初始化图表const chartRef =this.$refs[`chart_${cardItem.cardItemId || cardItem.formCustom.id}`];const chartDom = Array.isArray(chartRef) ? chartRef[0] : chartRef;if (chartDom) {this.initChart(chartDom,cardItem.cardItemId,cardItem.chartType,cardItem.chartTableData,);}}});}private initChartHandle(cardItem: any, resRows: any) {// 获取新添加的DOM元素并初始化图表this.$nextTick(() => {const chartRef =this.$refs[`chart_${cardItem.cardItemId || cardItem.formCustom.id}`];const chartDom = Array.isArray(chartRef)? (chartRef[0] as Element): null;if (chartDom) {this.initChart(chartDom,cardItem.cardItemId,cardItem.chartType,resRows,);}});}private initChart(dom: any,index: number,chartType: number,resRows: SearchPicTableType[],) {const myChart = echarts.init(dom);const option = switchChart(chartType, resRows);myChart.setOption(option, true);// 存储ECharts实例以便后续更新this.chartInstances[index] = myChart;}

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

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

相关文章

【Gin框架基础使用附带各种小案例和简易登录模块的实现】

Gin框架基础使用附带各种小案例和整个登录模块的实现 前言&#xff1a; Gin框架介绍使用示例安装Gin框架使用代码接收参数的方法 简易登录模块Gin的边角料 前言&#xff1a; Gin框架介绍 Gin框架功能&#xff1a; 在介绍Gin框架之前我们要先明白Gin框架要完成那些功能&#x…

css记录:三维变换之transform

CSS 的 transform 属性用于对元素进行 2D 或 3D 转换。这些转换包括旋转、缩放、倾斜和移动等。在 3D 变换中&#xff0c;我们可以创建更为复杂和动态的效果&#xff0c;让用户体验更为丰富。 transform 属性 transform 是一个简写属性&#xff0c;用于设置以下 2D 和 3D 转换…

【Android】构建 Android Automotive OS:适合初学者的指南

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

vue脚手架 vuex模块化和四大辅助函数的结合使用

目录 01 四大辅助函数结合vuex模块化的使用 02 event-bus事件总线的使用 01 四大辅助函数结合vuex模块化的使用 mapState 在映射模块化带有命名空间的使用步骤: 方式一:(重要) ...mapState(模块名1,[该模块的变量1,该模块的变量2....]) ...mapState(模块名2,[该模块的变量1,该…

深入探究RTOS的IPC机制----邮箱

阅读引言&#xff1a; 因为将来工作需要&#xff0c; 最近在深入学习OS的内部机制&#xff0c;我把我觉得重要的、核心的东西分享出来&#xff0c; 希望对有需要的人有所帮助&#xff0c; 阅读此文需要读友有RTOS基础&#xff0c; 以及一些操作系统的基础知识&#xff0c; 学习…

行列式和矩阵的区别

目录 一、行列式 1. 行列式的定义 2. (全)排列 3. 逆序数 二、矩阵 1. 矩阵的定义 三、行列式和矩阵的区别 四、参考书目 一、行列式 1. 行列式的定义 2. (全)排列 3. 逆序数 二、矩阵 1. 矩阵的定义 三、行列式和矩阵的区别 四、参考书目 同济大学数学系. 工程数学…

【LeetCode面试经典150题】105. 从前序与中序遍历构造二叉树

一、题目 105. 从前序与中序遍历序列构造二叉树 - 力扣&#xff08;LeetCode&#xff09;给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 二、思路 …

Dynamics 365 on-premise 隐藏高级查找导出按钮

提示 着急可以直接看结果代码部分 背景 Dynamics 365 on-premise中有个高级查找的功能,查询的结果支持导出,如下图 业务反馈这个有数据安全风险,要修改显示规则。 一开始想着能用RibbonWorkbench改,就很爽快得答应了业务。结果用RibbonWorkbench改不了。 反复尝试 既…

Linux远程管理日志

实验介绍 本实验旨在实现主机将日志远程发送到堡垒机或远程服务器上&#xff0c;实现通过一台机器管理整个网络内的主机的效果。 准备两台虚拟机作为生产主机和管理机&#xff0c;保证网络通畅&#xff0c;展示如下&#xff1a; 关闭firewalld&#xff0c;通过配置rsyslog&a…

Sklearn之朴素贝叶斯应用

目录 sklearn中的贝叶斯分类器 前言 1 分类器介绍 2 高斯朴素贝叶斯GaussianNB 2.1 认识高斯朴素贝叶斯 2.2 高斯朴素贝叶斯建模案例 2.3 高斯朴素贝叶斯擅长的数据集 2.3.1 三种数据集介绍 2.3.2 构建三种数据 2.3.3 数据标准化 2.3.4 朴素贝叶斯处理数据 2.4 高斯…

Treeselect是介绍及使用(梳理了我使用这个组件遇到的大部分问题)

介绍&#xff1a; Treeselect是一款基于Vue.js的树形选择器组件&#xff0c;可以快速地实现树形结构的选择功能。 这里梳理了我使用这个组件遇到的大部分问题 安装依赖&#xff1a; 首先&#xff0c;你需要在你的项目中安装Treeselect的依赖。这通常可以通过npm或yarn等来完…

基于STM32和人工智能的智能农业监测系统

目录 引言环境准备智能农业监测系统基础代码实现&#xff1a;实现智能农业监测系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统4.4 用户界面与数据可视化应用场景&#xff1a;智能农业管理与优化问题解决方案与优化收尾与总结 1. 引言 智能农业监测系统通过结合STM32嵌…

Linux - 输入输出

一、输出格式 echo //末尾自带换行 -n //取消自带换行 -e //支持转移符 常见转义符 \n换行 \t制表符 printf // 格式化输出字符串 %-10s // %s代表字符串 -10 左对齐容纳10个字符 二、输入输出重定向 file descriptors &#x…

Java集合底层源码剖析-Vector和Stack

文章目录 概述Vector成员变量关键方法添加元素 (add, addElement)删除元素 (remove)注意事项 Stack类定义与继承压栈 (push)弹栈 (pop)查看栈顶元素 (peek)源码解析总结 概述 在Java中&#xff0c;Stack 类是一个基于 Vector 实现的经典栈数据结构。由于 Vector 类本身是线程安…

Python | Leetcode Python题解之第155题最小栈

题目&#xff1a; 题解&#xff1a; class MinStack:def __init__(self):self.stack []self.min_stack [math.inf]def push(self, x: int) -> None:self.stack.append(x)self.min_stack.append(min(x, self.min_stack[-1]))def pop(self) -> None:self.stack.pop()sel…

AD域离线破解新思路:Trustroasting和TimeRoasting

简介 近期Tom Tervoort发表了白皮书《TIMEROASTING, TRUSTROASTING AND COMPUTER SPRAYING》并在Github发布了名为Timeroast的工具包&#xff0c;其中介绍了几种新的攻击思路TimeRoasting、Trustroasting和计算机账户密码喷洒&#xff0c;本篇文章主要对TimeRoasting和Trustro…

从零开始:使用ChatGPT快速创作引人入胜的博客内容

随着科技的飞速发展&#xff0c;人工智能逐渐渗透到我们生活的各个领域。无论是商业、教育还是娱乐&#xff0c;AI技术都在以惊人的速度改变着我们。特别是在内容创作领域&#xff0c;人工智能正发挥着越来越重要的作用。今天&#xff0c;我将和大家分享如何从零开始&#xff0…

无约束动态矩阵控制(DMC)

0、前言 动态矩阵控制&#xff08;Dynamic Matrix Control&#xff0c;DMC&#xff09;是一种典型的模型预测控制方法&#xff0c;其不需要被控对象的数学模型&#xff0c;只需要获取被控对象的阶跃响应序列即可实现控制效果&#xff0c;但其需要被控对象是渐近稳定的。 1、稳…

SVN学习(002 svn冲突解决)

尚硅谷SVN高级教程(svn操作详解) 总时长 4:53:00 共72P 此文章包含第20p-第p29的内容 冲突 产生冲突的操作 &#xff08;第一种 相互不影响的操作&#xff09; 用户1修改第二行 用户2修改第四行 用户1提交 用户2提交&#xff0c;提交的时候会提示版本已过时 这时将用…

常见漏洞扫描工具

Fortify Fortify是Micro Focus旗下AST &#xff08;应用程序安全测试&#xff09;产品&#xff0c;其产品组合包括&#xff1a;Fortify Static Code Analyzer提供静态代码分析器&#xff08;SAST&#xff09;&#xff0c;Fortify WebInspect是动态应用安全测试软件&#xff08…