Error in v-on handler: “Error: Initialize failed: invalid dom.“

使用echarts时,出现了第一次打开弹框时图表未显示。之后打开是可以显示的。

<template>
    <el-dialog title="图表" :visible.sync="dialogVisible" width="80vw" :before-close="handleClose">
        <div class="ReferralRewardCharts" style="width: 100%">
            <div ref="barBoxRef" style="width: 80vw; height: 70vh" />
        </div>
    </el-dialog>
</template>
<script>
import * as echarts from 'echarts';
export default {
    name: 'BarChartBox',
    data() {
        return {
            dialogVisible: false,
            proviceData: []
        }
    },
    mounted() {
        this.addBusi()
    },
    methods: {
        handleClose() {
            this.dialogVisible = false
        },
        init(proviceData) {
            this.dialogVisible = true
            this.proviceData = proviceData
            this.addBusi()
        },
        addBusi() {
            const initAddBusi = echarts.init(this.$refs.barBoxRef)

            const option = {
                legend: {},
                tooltip: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                dataset: {
                    source: [
                        ['product', '拉新人数', '已工作人数'],
                        ['Matcha Latte', 43.3, 5.8],
                        ['Milk Tea', 83.1, 73.4],
                        ['Cheese Cocoa', 86.4, 65.2],
                        ['Walnut Brownie', 72.4, 53.9],
                        ['里斯', 23, 10],
                        ['王明', 83, 73],
                        ['张三三', 86, 5],
                        ['lucky', 72, 15],
                        ['丽丽', 120, 56],
                        ['lucy', 70, 15]
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [{ type: 'bar' }, { type: 'bar' }]
            }
            initAddBusi.setOption(option)
        }
    }
}
</script>
<style lang="scss" scoped>
.ReferralRewardCharts {
    width: 100%;
    height: 70vh;

    .bar-box {
        height: 70vh;
    }

}
</style>

解决办法:

init(proviceData) {
    this.dialogVisible = true
    this.proviceData = proviceData

    this.$nextTick(() => {
        this.addBusi()
      })
},

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

jmeter之连接MySQL数据库

jmeter连接mysql数据库 mysql官网下载地址&#xff1a;MySQL :: Download Connector/J 步骤如下&#xff1a; 1、下载mysql的jar包放入到jmeter的lib/ext下&#xff0c;然后重启jmeter 链接: https://pan.baidu.com/s/1rRrMQKnEuKz8zOUfMdMHFg?pwdawfc 提取码: awfc 2、配置…

构建NodeJS库--前端项目的打包发布

1. 前言 学习如何打包发布前端项目&#xff0c;需要学习以下相关知识&#xff1a; package.json 如何初始化配置&#xff0c;以及学习npm配置项&#xff1b; 模块类型type配置&#xff0c; 这是nodejs的package.json的配置main 入口文件的配置 webpack 是一个用于现代 JavaSc…

ElasticSearch总结二

正向索引和倒排索引&#xff1a; 正向索引&#xff1a; 比方说我这里有一张数据库表&#xff0c;那我们知道对于数据库它一般情况下都会基于i d去创建一个索引&#xff0c;然后形成一个b树。 那么你根据i d进行检索的速度&#xff0c;就会非常的快&#xff0c;那么这种方式的…

Cesium之加载GeoServer或geowebcache的WMTS服务

文章目录 Cesium加载GeoServer的WMTS关键代码WMTS服务地址获取核心参数获取 Cesium加载GeoServer的WMTS关键代码 Cesium之加载GeoServer或geowebcache的WMTS服务关键代码如下 var url2"http://localhost:8090/geowebcache/service/wmts/rest/arcgis_com/{style}/{TileMat…

在excel中,如何在一个表中删除和另一个表中相同的数据?

现在有A表&#xff0c;是活动全部人员的姓名和学号&#xff0c;B表是该活动中获得优秀人员的姓名和学号&#xff0c; 怎么提取没有获得优秀人员的名单&#xff1f; 这里提供两个使用excel基础功能的操作方法。 1.条件格式自动筛选 1.1按住Ctrl键&#xff0c;选中全表中的姓…

的记忆:pandas(实在会忘记,就看作是一个 Excel 表格,或者是 SQL 表,或者是字典的字典。)

pandas 是一个开源的 Python 数据分析库&#xff0c;它提供了快速、灵活和富有表现力的数据结构&#xff0c;旨在使“关系”或“标记”数据的“快速分析、清洗和转换”变得既简单又直观。pandas 非常适合于数据清洗和转换、数据分析和建模等任务。以下是 pandas 的基本概念和主…

用 LM Studio 1 分钟搭建可在本地运行大型语言模型平台替代 ChatGPT

&#x1f4cc; 简介 LM Studio是一个允许用户在本地离线运行大型语言模型&#xff08;LLMs&#xff09;的平台&#xff0c;它提供了一种便捷的方式来使用和测试这些先进的机器学习模型&#xff0c;而无需依赖于互联网连接。以下是LM Studio的一些关键特性&#xff1a; 脱机&am…

C++笔记:C++中的重载

重载的概念 一.函数重载 代码演示例子&#xff1a; #include<iostream> using namespace std;//函数名相同&#xff0c;在是每个函数的参数不相同 void output(int x) {printf("output int : %d\n", x);return ; }void output(long long x) {printf("outp…

RTU遥测终端为城市排水安全保驾护航!

近年来&#xff0c;全球气候变迁与城市化进程不断加速&#xff0c;导致强降雨事件频发&#xff0c;道路低洼地带、下穿式立交桥和隧道等区域在暴雨中常易积水&#xff0c;严重阻碍了人民的出行&#xff0c;甚至危及生命与财产安全。而传统的排水管网管理方式已难以适应现代城市…

mybatis的使用技巧8——联合查询union和union all的区别和用法

在实际项目开发中&#xff0c;会经常联合查询结构相似的多张数据表&#xff0c;使用union关键字就只需要一次sql操作&#xff0c;而无需执行多次查询并通过代码逻辑合并处理&#xff0c;减少了大量繁琐的操作&#xff0c;最重要的是还能通过可选的all关键字筛选重复的数据。 1…

数据结构基础:链表操作入门

数据结构基础&#xff1a;链表操作入门 数据结构基础&#xff1a;链表操作入门链表的基本概念链表的基本操作输出链表插入节点删除节点查找值 完整的链表操作示例结语 数据结构基础&#xff1a;链表操作入门 在计算机科学中&#xff0c;数据结构是组织和存储数据的方式&#x…

海康Visionmaster-常见问题排查方法-启动失数

问题2&#xff1a;VM无法启动&#xff0c;报错&#xff1a;参数错误&#xff1b;  问题原因&#xff1a;客户电脑环境异常导致代理启动失败。  解决方法&#xff1a;安装运行时库&#xff0c;并测试代理能否正常启动,步骤如下&#xff1a; ① 尝试双击代理进程&#xff…

WPF 6 命令

命令 创建一个按钮&#xff0c;新建一个事件&#xff0c;按住F12 就可以添加业务代码 运行代码 此时希望UI与后台代码分离&#xff0c;互不影响 此时新建一个MainViewModel类&#xff0c;来保存业务代码 Icommand 是所有command的父类接口 新建一个command来实现这个接口…

OceanBase诊断调优 】—— 如何快速定位SQL问题

作者简介&#xff1a; 花名&#xff1a;洪波&#xff0c;OceanBase 数据库解决方案架构师&#xff0c;目前负责 OceanBase 数据库在各大型互联网公司及企事业单位的落地与技术指导&#xff0c;曾就职于互联网大厂和金融科技公司&#xff0c;主导过多项数据库升级、迁移、国产化…

蓝桥杯:日期问题(我的绝望题)

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;每日一练 &#x1f337;追光的人&#xff0c;终会万丈光芒 目录 前言&#xff1a; &#x1f337;1.问题描述&#xff1a; 1.问题描述&#xff1a; 2.输入格式&#xff1a; 3.输出格式&#…

HarmonyOS开发案例:【相机开发】

基本概念 相机是OpenHarmony多媒体进程提供的服务之一&#xff0c;提供了相机的录像、预览、拍照功能&#xff0c;支持多用户并发取流。 在进行应用的开发前&#xff0c;开发者应了解以下基本概念&#xff1a; 视频帧 视频流指的是将一系列图片数据按照固定时间间隔排列形成的…

探索设计模式的魅力:主从模式与AI大模型的结合-开启机器学习新纪元

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 ✨欢迎加入探索主从模式与AI大模型之旅✨ &#x1f31f;Hey, tech enthusiasts! 你是否还在追…

AI论文速读 |2024[TPAMI]【综述】自监督学习在时间序列分析的分类、进展与展望

题目&#xff1a; Self-Supervised Learning for Time Series Analysis: Taxonomy, Progress, and Prospects 作者&#xff1a;Kexin Zhang, Qingsong Wen(文青松), Chaoli Zhang, Rongyao Cai, Ming Jin(金明), Yong Liu(刘勇), James Zhang, Yuxuan Liang(梁宇轩), Guansong…

运维 kubernetes(k8s)基础学习

一、容器相关 1、发展历程&#xff1a;主机–虚拟机–容器 主机类似别墅的概念&#xff0c;一个地基上盖的房子只属于一个人家&#xff0c;很多房子会空出来&#xff0c;资源比较空闲浪费。 虚拟机类似楼房&#xff0c;一个地基上盖的楼房住着很多人家&#xff0c;相对主机模式…

【python程序打包教程】PyInstaller一键打包Python程序为独立可执行exe文件

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…
最新文章