解决vue3+echarts关于无法获取dom宽度和高度的问题

这篇具有很好参考价值的文章主要介绍了解决vue3+echarts关于无法获取dom宽度和高度的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

解决vue3+echarts关于无法获取dom宽度和高度的问题

近期写vue3项目,很多地方都用到了echarts,刚开始写的时候,发现图一直出不来,报错/报警内容一般有两项:

  • Uncaught (in promise) Error: Initialize failed: invalid dom.
  • vue3 [ECharts] Can’t get DOM width or height.

分别解释一下这俩报错

第一个报错是在初始化echarts的时候,没有找到对应的dom元素,所以需要在dom元素渲染完成后再初始化echarts图

第二个报错是说不能获取到echarts对应dom的宽或高,这个问题一般出现在设置dom节点的宽和高时,用了百分比形式,ECharts的宽高默认是以像素为单位的,并不能直接使用百分比来设置

经过多次尝试,总算解决这个问题了,记录一下解决方案

先上代码:

<template>
  <div class="right">
    <div class="top">
      <div class="top-left" ref="topLeft"></div>
      <div class="top-right" ref="topRight"></div>
    </div>
    <div class="middle" ref="middle"></div>
    <div class="bottom">
      <div class="bottom-left" ref="bottomLeft"></div>
      <div class="bottom-right" ref="bottomRight"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from 'vue'
import { driverAgeLT, driverAgeRT, driverAgeMiddle, driverAgeBL, driverAgeBR } from './graphOptions.js'

const topLeft = ref(null)
const LTOptions = driverAgeLT()
const drawLTchart = () => {
  const topLeftChart = echarts.init(topLeft.value)
  topLeftChart.setOption(LTOptions)
  topLeftChart.resize()
  window.addEventListener('resize', () => {
    topLeftChart.resize()
  })
}

const topRight = ref(null)
const RTOptions = driverAgeRT()
const drawRTchart = () => {
  const topRightChart = echarts.init(topRight.value)
  topRightChart.setOption(RTOptions)
  topRightChart.resize()
  window.addEventListener('resize', () => {
    topRightChart.resize()
  })
}

const middle = ref(null)
const middleOptions = driverAgeMiddle()
const drawMiddleChart = () => {
  const midddleChart = echarts.init(middle.value)
  midddleChart.setOption(middleOptions)
  midddleChart.resize()
  window.addEventListener('resize', () => {
    midddleChart.resize()
  })
}

const bottomLeft = ref(null)
const BLOptions = driverAgeBL()
const drawBLchart = () => {
  const bottomLeftChart = echarts.init(bottomLeft.value)
  bottomLeftChart.setOption(BLOptions)
  bottomLeftChart.resize()
  window.addEventListener('resize', () => {
    bottomLeftChart.resize()
  })
}

const bottomRight = ref(null)
const BROptions = driverAgeBR()
const drawBRchart = () => {
  const bottomRightChart = echarts.init(bottomRight.value)
  bottomRightChart.setOption(BROptions)
  bottomRightChart.resize()
  window.addEventListener('resize', () => {
    bottomRightChart.resize()
  })
}

onMounted(() => {
  setTimeout(() => {
    drawLTchart()
    drawRTchart()
    drawMiddleChart()
    drawBLchart()
    drawBRchart()
  }, 200)
})
</script>

<style lang="scss" scoped>
.right {
  width: 49%;
  margin-left: 10px;
  height: 99%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

  .top {
    height: 33%;
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;

    .top-left {
      width: 50%;
      padding: 5px;
      height: 100%;
      border-right: 1px dashed #ccc;
    }

    .top-right {
      width: 50%;
      padding: 5px;
      height: 100%;
    }
  }

  .middle {
    margin-top: 5px;
    height: 33%;
    padding: 5px;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
  }

  .bottom {
    height: 33%;
    margin-top: 5px;
    display: flex;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;

    .bottom-left {
      width: 50%;
      padding: 5px;
      height: 100%;
      border-right: 1px dashed #ccc;
    }

    .bottom-right {
      width: 50%;
      padding: 5px;
      height: 100%;
    }
  }
}
</style>

效果
解决vue3+echarts关于无法获取dom宽度和高度的问题,web开发,echarts,javascript,前端

代码我只放了图的那一部分,代码的作用是在页面的右侧画5张图,从我写的样式可以看出,所有画图的dom我都用了百分比,这样有个好处,不管什么屏幕,都可以比较好的显示,但是echarts并不支持百分比的宽高,所以狂报警

接下来解释一下代码:

  • import { driverAgeLT, driverAgeRT, driverAgeMiddle, driverAgeBL, driverAgeBR } from './graphOptions.js'这行代码是我把5张图的options都放到一个js文件里了,也是组件式开发的一个体现,这个文件我就不放上了,想怎么画图自己去设置

  • 下面这几行代码是关键,我直接通过注释的形式来解释

    const topLeft = ref(null)  // 获取dom
    const LTOptions = driverAgeLT()  // 获取对应的options
    const drawLTchart = () => {  // 画图函数,为啥要写成函数,因为需要在页面加载完成后调用,要放在生命周期函数中
      const topLeftChart = echarts.init(topLeft.value)  // 初始化echarts图,注意,这里的topLeft是响应式的dom,必须要加value,这里我经常忘记
      topLeftChart.setOption(LTOptions)  // 设置option
      topLeftChart.resize()  // 这里也比较关键,在option后,最好是重绘一下图,可以解决百分比宽高的问题,也就是解决第2个问题
      window.addEventListener('resize', () => {  // 窗口大小变化后,重绘图
        topLeftChart.resize()
      })
    }
    
    onMounted(() => {  // vue3的生命周期函数,在页面加载完成后,再画图,其实就是解决第1个问题
      setTimeout(() => {  // 这里为啥要用定时器在0.2s后再画图呢,其实我也不能确定是不是这个问题,但是这么写后,确实解决了问题,
        drawLTchart()     // 续上:页面加载完成后,dom不一定渲染完成了,所以这里的定时器是为了让dom渲染后再绘图
        drawRTchart()
        drawMiddleChart()
        drawBLchart()
        drawBRchart()
      }, 200)
    })
    

这样就解决了上面两个问题了

不过还有个问题得说一下,很明显,我用了elementplus作为UI框架,我特别喜欢el-card这个组件,所以很多时候我都用它来做布局,但是我在用的时候,发现我很难掌握它的布局规律,尤其是在结合echarts画图的时候,各种dom相关的问题层出不穷,所以我不得不放弃使用el-card,二是自己用div来做布局。其实也就是个盒子阴影的问题,不会设计?当然不用自己造轮子,放一下各种花式的边框阴影~

完,希望所有bug退散~文章来源地址https://www.toymoban.com/news/detail-624134.html

到了这里,关于解决vue3+echarts关于无法获取dom宽度和高度的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化

    大家好,我是yma16,本文分享关于 vue3+echarts应用——深度遍历 html 的 dom结构并使用树图进行可视化。 💖vue3系列文章 vue3 + fastapi 实现选择目录所有文件自定义上传到服务器 前端vue2、vue3去掉url路由“ # ”号——nginx配置 csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+an

    2024年01月20日
    浏览(68)
  • vue3 - vue3中使用ref来获取dom节点

    vue3和vue2获取元素的不同:vue2是通过 this.$refs api获取dom节点的 ; vue3是 直接使用同名的 ref 响应式数据来获取的; 1,常规使用 注意: 节点上的 ref=“input” 需要和 const input = ref(null)相对应 才能获取到此dom节点 2,v-for中的ref获取 有时我们需要 获取循环中的dom节点 并根据状态

    2024年02月16日
    浏览(50)
  • vue3使用ref获取dom结果为‘null’

    在vue2中,我们使用ref获取dom元素时是这样子的: 在vue3中,我们使用ref获取dom元素时是这样子的: 下面来说说vue3中获取dom为空的原因: setup的return中应该抛出ref封装的字段,否则ref的值只是定义了并不能响应式使用,事实上,所有ref或者reactive定义的值都应在return中抛出。

    2024年02月12日
    浏览(71)
  • uniapp小程序vue3获取dom实例createSelectorQuery

    需求,在页面中,有时需要获取渲染组件的长宽信息,可以使用 select 选择器进行查询,直接上代码如下:

    2024年02月16日
    浏览(46)
  • JS--获取元素的高度与宽度

    原文网址:JS--获取元素的高度与宽度_IT利刃出鞘的博客-CSDN博客 说明 本文介绍如何使用JavaScript获取HTML标签的高度与宽度。 读取的方法 document.getElementById(\\\"id\\\").clientHeight 元素尺寸属性 说明 clientWidth 获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚

    2024年02月06日
    浏览(56)
  • Android获取文本的宽度和高度

    方法一:先绘制文本所在的矩形区域,再获取矩形区域的宽度 上述方法由于矩形边框紧贴文字,所有没有多余的空间。 方法二:通过Paint的 measureText 方法直接测量文本宽度 此方法计算出的宽度会加上开始和结尾的空间,这个空间就是文字和文字之间的空间,为了美观而存在

    2024年02月09日
    浏览(51)
  • JS获取各种屏幕的宽度和高度

    JS获取各种屏幕的宽度和高度 描述 用法 网页可见区域宽 document.body.clientWidth 网页可见区域高 document.body.clientHeight 网页可见区域宽 document.body.offsetWidth (包括边线的宽) 网页可见区域高 document.body.offsetHeight (包括边线的高) 网页正文全文宽 document.body.scrollWidth 网页正文全文高 d

    2023年04月27日
    浏览(48)
  • vue3关于Echarts的简单使用及配置

    前言: ECharts,一个使用 JavaScript 实现的开源 可视化库 ,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。 (1)安装echarts包 (2)安装

    2024年02月07日
    浏览(36)
  • vue3的setup 语法糖中获取slot 插槽的dom对象

    最近使用vue3开发项目,需要封装一个无限滚动的组件,使用scroll组件内置插槽接受模板的方式,所以需要在scroll组件内获取到模板渲染后dom元素的宽高。 但是setup语法糖是组件生命周期的beforeCreate和created中,而且经过测试,在mounted函数中的el属性也是null,所以得出结论模板

    2024年02月15日
    浏览(58)
  • JS中获取dom元素高度相关方法

    javascript中获取dom元素高度和宽度的属性如下: 网页可视区域宽: document.body.clientWidth 网页可视区域高: document.body.clientHeight 网页可视区域宽: document.body.offsetWidth (包括边距的宽) 网页可视区域高: document.body.offsetHeight (包括边距的高) 网页正文全文宽: document.body.scrollWidth

    2024年02月07日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包