vue2+echarts:echarts在dialog弹框中不显示的解决方案

news2025/1/13 17:42:13

重点是@open方法里使用$nextTick拿到最新的dom,在里面加载echarts 

//html
<el-button @click.stop="getIfStorage"></el-button>

<el-dialog title="图表数据" :visible.sync="ifStorageShowOpen" @open="open()" width="1400px" append-to-body>
  <div id="chart" style="height: 600px" ref="chart"></div>
</el-dialog>


//data
 ifStorageShowOpen: false,
 chart: null,// echarts图表实例


//js
 getIfStorage () {
    this.ifStorageShowOpen = true
 },
 open () {
    this.$nextTick(() => {
      this.initChart();
    })
 },
  // 初始化echarts
 initChart () {
    this.chart = this.$echarts.init(this.$refs.chart)
      // 设置图表option(配置项)绘制图表
      // 绘制图表
      this.chart.setOption({
        title: {
          text: '商品销售数据'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
          type: 'value'
        },
        backgroundColor: '#dddddd',
        color: ['#72ccff', '#d4a4eb'],
        series: [
          {
            name: '销量',
            type: 'bar', // 柱状图
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '利润',
            smooth: true,
            type: 'line', // 折线图
            data: [2, 23, 5, 54, 9, 33]
          }
        ]
      })
  },

 


 上一篇文章,

uniapp踩坑之项目:uni-app实现下拉框多选_uniapp 多选-CSDN博客文章浏览阅读881次,点赞5次,收藏5次。uniapp踩坑之项目:uni-app实现下拉框多选。一、首先创建组件,二、将组件引入单页面使用_uniapp 多选https://blog.csdn.net/weixin_43928112/article/details/138559471?spm=1001.2014.3001.5501

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

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

相关文章

嵌入式系统中判断大小端的方法与实现

第一&#xff1a;大小端基本分析 程序判断计算机是大端的还是小端的&#xff0c;判断的思路是确定一个多字节的值(下面使用的是4字节的整数)&#xff0c;将其写入内存(即赋值给一个变量)&#xff0c;然后用指针取其首地址所对应的字节(即低地址的一个字节)&#xff0c;判断该字…

Photoshop中颜色与色调的调整

Photoshop中颜色与色调的调整 Photoshop中的颜色模式RGB模式灰度模式位图模式索引模式CMYK模式Lab模式 Photoshop中的颜色/色调调整命令颜色/色调调整命令的分类亮度/对比度调整命令色阶命令曲线命令曝光度命令自然饱和度命令色相/饱和度命令色彩平衡命令照片滤镜调整命令通道混…

[leetcode]swap-nodes-in-pairs

. - 力扣&#xff08;LeetCode&#xff09; class Solution { public:ListNode* swapPairs(ListNode* head) {ListNode* dummyHead new ListNode(0);dummyHead->next head;ListNode* temp dummyHead;while (temp->next ! nullptr && temp->next->next !…

单链表实现:从理论到代码

✨✨欢迎&#x1f44d;&#x1f44d;点赞☕️☕️收藏✍✍评论 个人主页&#xff1a;秋邱博客 所属栏目&#xff1a;C语言&#xff0c;数据结构 ​ 前言 前面学习了顺序表&#xff0c;顺序表优点&#xff1a; 可以随机访问元素&#xff0c;通过索引能快速定位到元素。存储密…

Python界面编辑器Tkinter布局助手 使用体验

一、发现 我今天在网上搜关于Python Tkinter方面的信息时&#xff0c;发现了Python界面编辑器 Tkinter布局助手 的使用说明。 https://blog.csdn.net/weixin_52777652/article/details/135291731?spm1001.2014.3001.5506 这个编辑器是个开源的项目&#xff0c;个人用户可以…

Python学习笔记7:入门知识(七)

前言 之前说过我更换了新的学习路线&#xff0c;现在是根据官方文档和书籍Python crash course来进行学习的&#xff0c;在目前的学习中&#xff0c;对于之前的知识有一些遗漏&#xff0c;这里进行补充。 学习资料有两个&#xff0c;书籍中文版PDF&#xff0c;关注我私信发送…

Lua实现自定义函数面向对象编程

本文目录 1、引言2、原理3、实例4、层析验证 文章对应视频教程&#xff1a; 暂无&#xff0c;可以关注我的B站账号等待更新。 点击图片或链接访问我的B站主页~~~ 1、引言 在现代软件开发中&#xff0c;面向对象编程&#xff08;OOP&#xff09;已经成为一种广泛使用的编程范式…

nodejs 某音douyin网页端搜索接口及x_bogus、a_bogus(包含完整源码)(2024-06-13)

前言 x_bogus或a_bogus算法大概是对数据、ua、时间戳、浏览器的几个指纹进行计算&#xff0c;拿到一个110位大数组&#xff0c;然后转字符&#xff0c;在头部再添加十二位随机字符&#xff0c;再进行魔改的base64加密。 问&#xff1a;抖音的x_bogus、a_bogus值有什么用&#x…

幸狐RV1106开发板烧录Ubuntu系统与配置SDK,RV1106 LuckFox Pico Max——最新的操作

资料&#xff1a;上手教程 | LUCKFOX WIKI 以及SDK内的文档资料 开发板型号&#xff1a;RV1106 LuckFox Pico Max 烧录系统&#xff1a; Ubuntu 虚拟机系统&#xff1a;Ubuntu 20.04&&Ubuntu22.04 PC系统&#xff1a;win11 占用空间&#xff1a;大概15G 本文主要记…

idea有这个类却报红,无法用快捷键找到

idea有这个类却报红&#xff0c;无法用快捷键找到&#xff0c;但是项目启动却没有任何问题&#xff0c;严重影响到了开发效率&#xff0c;关idea 重新打开没有用。 找了一圈&#xff0c;办法如下&#xff1a; 1、点击左上角的 File—>Invalidate Caches/Restar 2、点击 In…

【Linux】进程控制3——进程程序替换

一&#xff0c;前言 创建子进程的目的之一就是为了代劳父进程执行父进程的部分代码&#xff0c;也就是说本质上来说父子进程都是执行的同一个代码段的数据&#xff0c;在子进程修改数据的时候进行写时拷贝修改数据段的部分数据。 但是还有一个目的——将子进程在运行时指向一个…

Python私教张大鹏 Vue3整合AntDesignVue之DatePicker 日期选择框

案例&#xff1a;选择日期 <script setup> import {ref} from "vue";const date ref(null) </script> <template><div class"p-8 bg-indigo-50 text-center"><a-date-picker v-model:value"date"/><a-divide…

visio绘制直线

1、右键打开绘图工具 2、选择线条 3、画直线、画横线

【推荐算法的评估与调试】离线评估+在线A/B Test

文章目录 1、离线评估1.1、评估排序算法1.1.1、AUC和GAUC1.1.2、NDCG 1.2、评估召回算法1.2.1、Precision&Recall1.2.2、MAP1.2.3、Hit Rate1.2.4、持续评估 2、在线评估2.1、线上&#xff1a;流量划分2.1.1、根据User ID划分流量2.1.2、分层重叠划分流量2.1.3、A/A实验的重…

最新下载:Paragon NTFS for Mac 15【软件附加安装教程】

NTFS For Mac 15是首个支持Mac上读写NTFS外置存储设备解决方案 &#xff0c;解决mac不能读写外置让您更加简单直观的在Mac机上随意对NTFS文件修改、删除等操作。 安 装 包 获 取 地 址&#xff1a; Paragon Ntfs For Mac 15版&#xff1a;​​https://souurl.cn/mqM9C6​​ 软…

python:faces swap

# encoding: utf-8 # 版权所有 2024 ©涂聚文有限公司 # 许可信息查看&#xff1a; 两个头像图片之间换脸 # 描述&#xff1a; https://stackoverflow.com/questions/902761/saving-a-numpy-array-as-an-image?answertabvotes # Author : geovindu,Geovin Du 涂聚文. #…

(几何:六边形面积)编写程序,提示用户输入六边形的边长,然后显示它的面积。

(几何:六边形面积)编写程序&#xff0c;提示用户输入六边形的边长&#xff0c;然后显示它的面积。计 算六边形面积的公式是: 这里的s就是边长。下面是一个运行示例 package myjava; import java.math.*; import java.util.Scanner; public class cy {public static void main(S…

数据结构笔记-2、线性表

2.1、线性表的定义和基本操作 如有侵权请联系删除。 2.1.1、线性表的定义&#xff1a; ​ 线性表是具有相同数据类型的 n (n>0) 个数据元素的有限序列&#xff0c;其中 n 为表长&#xff0c;当 n 0 时线性表是一个空表。若用 L 命名线性表&#xff0c;则其一般表示为&am…

STM32理论 —— μCOS-Ⅲ(2/2):时间管理、消息队列、信号量、任务内嵌信号量/队列、事件标志、软件定时器

文章目录 9. 时间管理9.1 OSTimeDly()9.2 OSTimeDlyHMSM()9.3 OSTimeDlyResume()9.4 延时函数实验 10. 消息队列10.1 创建消息队列函数OSQCreate()10.2 发送消息到消息队列函数(写入队列)OSQPost()10.3 获取消息队列中的消息函数(读出队列)OSQPend()10.4 消息队列操作实验 11. …

【因果推断python】32_合成控制2

目录 合成控制作为线性回归的一种实现​编辑 合成控制作为线性回归的一种实现 为了估计综合控制的治疗效果&#xff0c;我们将尝试构建一个类似于干预期之前的治疗单元的“假单元”。然后&#xff0c;我们将看到这个“假单位”在干预后的表现。合成控制和它所模仿的单位之间的…