vue3 echarts自适应

这篇具有很好参考价值的文章主要介绍了vue3 echarts自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

监听窗体变化

当浏览器窗体发生变化的时候会触发。

主要用在布局计算,比如说分辨率不一样,高度宽度需要重新计算渲染。

 例如echarts报表,当我们的浏览器缩放发生变化或者是电脑分辨率发生变化之后,已渲染的echarts报表大小位置是不会发生变化的,所以可以使用这个方法监听浏览器窗体变化,来重新渲染echarts报表,解决错版。

窗体变化echarts报表重新渲染

addEventListener()添加事件监听

addEventListener(event, function, useCapture)

(1)参数event必填,表示监听的事件,例如 click, resize等,不加前缀on的事件。

(2)参数 function必填,表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数。不带参数。

(3)参数 useCapture选填,填true或者false,用于描述事件是冒泡还是捕获触发,true表示捕获,默认false表示冒泡。

//方式一
<template>
  <div ref="mainEcharts" id="" style="height: 420px;width:100%"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const mainEcharts = ref();
let echartsInit: echarts.ECharts | null = null
const init = () => {
  if (!echartsInit) {
    console.log('触发了+++++++++++++++++++++++++');
    echartsInit = echarts.init(mainEcharts.value);
    echartsInit.setOption({
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }
      ]
    })
  }
  echartsInit?.resize()
}

onUnmounted(() => {
  window.removeEventListener("resize", init);
  console.log('卸载了+++++++++++++++++++++');
})

onMounted(() => {
  init()
  window.addEventListener("resize", init);
  console.log("组件挂载到页面之后执行-------onMounted");
});
</script> 

window.onresize = function(){}

window.onresize只能在一个组件中使用,如果多个组件调用则会出现覆盖情况

//方式二
<template>
  <div ref="mainEcharts" id="" style="height: 420px;width:100%"></div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const mainEcharts = ref();
const init = () => {
  console.log('触发了+++++++++++++++++++++++++');
  const echartsInit = echarts.init(mainEcharts.value);
  echartsInit.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  })
  window.onresize = (event) => {
    return (() => {
      console.log(event, "event");
      echartsInit?.resize()
    })()
  };
}

onUnmounted(() => {
  window.onresize = null //注销window.onresize事件
  console.log('卸载了+++++++++++++++++++++');
})

onMounted(() => {
  init()
  console.log("组件挂载到页面之后执行-------onMounted");
});
</script>  

上两种方法自然是有用的,但有些场景不适用。

例如有个可以收缩的侧边栏,当收缩侧边栏时浏览器窗口大小是没有发生改变的,但由于页面是响应式的,内容区域容器宽高是变化的,这时候我们要监控容器的变化来实现echarts图表的重新渲染

Web API提供了一个方法ResizeObserver来实现文章来源地址https://www.toymoban.com/news/detail-632317.html

//方式三
<template>
  <div ref="mainEcharts" id="" style="height: 420px;width:100%"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, ResizeObserver } from 'vue'
import * as echarts from 'echarts';
const mainEcharts = ref();
let resizeObserver: ResizeObserver | null = null,
  canResize = true
const init = () => {
  const echartsInit = echarts.init(mainEcharts.value);
  echartsInit.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  })
  const targetElement = document.getElementsByClassName('hasTagsView')[0];
  resizeObserver = new ResizeObserver(entries => {
    if (!canResize) {
      return
    }
    canResize = false
    setTimeout(() => {
      canResize = true
      console.log('监听到宽高的变化++++++++++++');
      echartsInit.resize()
    }, 500)

    /*     console.log(entries[0].contentRect.width)
        console.log(entries[0].contentRect.height) */
  })
  resizeObserver.observe(targetElement)
}

onUnmounted(() => {
  // 停止监听给定的元素
  // resizeObserver?.unobserve(targetElement);
  // 停止监听所有元素
  resizeObserver?.disconnect();
  console.log('卸载了+++++++++++++++++++++');
})

onMounted(() => {
  init()
  console.log("组件挂载到页面之后执行-------onMounted");
});
</script>

到了这里,关于vue3 echarts自适应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky

    今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范,需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复,需要使用husky来做commit拦截,需要使用commitlint来统一提交规范,需要使用preinstall来统一包管理工具。 下面我们就用这一套规范

    2024年02月22日
    浏览(81)
  • 前端系列19集-vue3引入高德地图,响应式,自适应

    npm i @amap/amap-jsapi-loader --save 要在Vue 3中引入高德地图,你可以按照以下步骤进行操作: 在项目目录中使用npm或yarn安装高德地图的JavaScript API库。你可以使用以下命令之一: npm install @amap/amap-jsapi-loader yarn add @amap/amap-jsapi-loader 在Vue组件中引入并使用高德地图。 在你的Vue组件中

    2024年02月07日
    浏览(45)
  • 搭建vue3,TypeScript,pinia,scss,element-plus,axios,echarts,vue-router,babylon,eslint,babel,拖拽,rem自适应大屏

    1.1、使用vite初始化项目 1.1.1、创建项目文件夹 1.1.2、进入项目文件夹 1.1.3、初始化项目 1.1.4、输入项目名称 1.1.5、选择vue 1.1.6、选择TypeScript 1.1.7、查看当前源(非必要) 1.1.8、更换为国内镜像(非必要) 1.1.9、进入项目 1.1.10、安装依赖 1.1.11、运行项目 1.1.12、修改部分报错信息

    2024年04月23日
    浏览(52)
  • vane 一个适用于前端打工人的全栈框架,nodejs+vue3+typescript

    写这个的初衷是因为每次用node写接口的时候总是需要一些写大一堆的东西, 也有些人把很多接口都放在一个js文件内, 看起来很是杂乱, 后来用到nuxt写的时候, 感觉用文件名来命名接口路径很是方便, 无论是query参数还是params参数,都可以通过文件名来命名, 也可以通过文件夹层级

    2024年02月11日
    浏览(47)
  • 前端技术Html,Css,JavaScript,Vue3

    1.基本标签 2.文本格式化 3.链接 4.图片 5.无序列表 6.有序列表 7.表格 8.表单 1.选择器 2.文本和字体 3.链接 4.隐藏 5.定位position 6.浮动 7.对齐 8.图像 1.输出 2.函数 3.常用事件 4.DOM 5.改变Html 6.DOM 元素 (节点) 尾部创建新的 HTML 元素 (节点) - appendChild() 头部创建新的 HTML 元素 (节点)

    2024年02月13日
    浏览(51)
  • 【前端技术】Vue3 01:初识 Vue.js

    Vue 可以说是非常流行了,至少在国内是这样,他是个轻量级的 JavaScript 框架,非常适合构建大型和中小型的 Web 应用程序,如果想和前端打交道,应该绕不过这个框架吧。 目录 1 Vue.js 介绍 2  IDE 选择 2.1 vscode 2.2 WebStorm 2.3 Eclipse 3  创建 Vue 应用 3.1 本地脚手架创建 ① 安装

    2024年02月02日
    浏览(61)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(75)
  • 前端HTML、CSS、JS、VUE3 汇总

    学习https://developer.mozilla.org/zh-CN/docs/Learn/CSS 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 使用VS Code运行前端代码 在VS Code上安装前端插件 正在更新中~ ✨ 提示:这里可以添加本文要记录的大概内容: 学习路线 知识定位 HTML基础 标签、表格、表单、

    2024年02月13日
    浏览(49)
  • Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端(qiankun) 后台管理系统模板(已开源---显示项目页面截图)

    Wocwin-Admin,是基于 Vue3.2、TypeScript、Vite、Pinia、Element-Plus、Qiankun(微前端) 开源的一套后台管理模板;同时集成了微前端 qiankun也可以当做一个子应用。项目中组件页面使用了Element-plus 二次封装 t-ui-plus 组件,目前已新增fastmock接口。 Link:https://wocwin.github.io/wocwin-admin/ 账号:

    2024年02月08日
    浏览(80)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(51)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包