vue自定义指令实现echarts图宽宽高变化自适应

最新推荐文章于 2024-08-01 10:00:37 发布

原创

最新推荐文章于 2024-08-01 10:00:37 发布 · 817 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中创建一个自定义指令，以实现ECharts图表在窗口尺寸变化时自动调整宽度和高度。通过在全局注册自定义指令v-resize并在ECharts组件中应用，可以确保图表始终适应其容器元素的尺寸。

1、在全局添加一个自定义指令,src/directive/redraw.js

// 获取盒子宽高变化
const vueRedraw = {
   
   };
vueRedraw.install = Vue => {
   
   
  Vue.directive("resize",{
   
   
    //被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
    inserted