当前位置: 首页 > article >正文

Vue2:v-for创建echart图表时不能使用动态ref,要使用动态id

项目中需要创建一组图表+表格的组合,一共15组,为了便于维护,希望使用v-for来创建,而不是写出15组<div>,但是动态指定echart的ref时,频繁遭遇init失败,提示“TypeError: this.dom.getContext is not a function”。过程记录如下。

实现效果

要实现的效果如下图,左侧是一个echart,右侧是一个table,共用data

data

data中定义一组options数据

checkReportOptions:[
        {key:'perVersion', label:"版本Bug数量",defaultReportType:"pie"},
        {key:'perModule', label:"模块Bug数量",defaultReportType:"pie"},
        {key:'dailyNew',label:"每天新增Bug数",defaultReportType:"bar"}

http://www.kler.cn/a/453620.html

相关文章:

  • 实现点击表格中的邀请码并复制到剪贴板的功能
  • 振动分析-47-振动信号处理能力提升需要理解和掌握的算法知识体系
  • 牛客周赛73B:JAVA
  • 参数名在不同的SpringBoot版本中,处理方案不同
  • Linux的启动流程
  • 企业数字化转型中的“烟囱效应”:从小烟囱到大烟囱的折中之道
  • python EEGPT报错:Cannot cast ufunc ‘clip‘ output from dtype(‘float64‘)
  • Go语言的defer原理
  • 【c语言】字符串与字符数组
  • spring cloud gateway 3
  • Elasticsearch-索引的批量操作
  • CentOS上安装和卸载Docker
  • UE5.3接入电脑USB摄像头实时预览画面
  • sentinel学习笔记7-熔断降级
  • 基于 Python 考研历年国家分数线大数据分析设计与实现
  • 利用Python实现排序算法与Web交互的实验项目
  • 【ARM】PK51关于内存模式的解析与区别
  • Python 端口访问邮件提醒工具
  • AndroidKMP跨平台开发基础1-编译发布
  • AWS、Google Cloud Platform (GCP)、Microsoft Azure、Linode和 桔子数据 的 价格对比
  • 解决 Node.js 单线程限制的有效方法
  • ssh免密登录服务器
  • C# Winfrom chart图 实例练习
  • 「Mysql优化大师一」mysql服务性能剖析工具
  • 大模型推理性能优化之KV Cache解读
  • Qt使用QZipWriter和QZipReader来解压、压缩文件