干货！Vue3 echarts自适应解决方案

最新推荐文章于 2024-09-22 12:19:34 发布
最新推荐文章于 2024-09-22 12:19:34 发布
阅读量3.5k 收藏 13
点赞数 2
分类专栏： Vue3 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32436781/article/details/120551235
版权
本文介绍了如何在Vue3中实现Echarts图表的自适应，包括使用`element-resize-detector`库监听侧边栏变化和防抖函数`debounce`优化resize事件。通过创建组件并暴露初始化和销毁方法，确保多个Echarts图表在页面中可以正确响应窗口和侧边栏尺寸变化。此外，还详细解释了`throttle`和`debounce`的区别，并提供了实战代码示例。
摘要由CSDN通过智能技术生成

Vue3 echarts自适应解决方案

实战

resize.js

import {nextTick, ref} from "vue";
import {debounce} from 'throttle-debounce';

/*chart 是echarts图的实例*/
export const chart = ref();
/*检测侧边栏是否缩放*/
let sidebarElm;
/*使用element-resize-detector 来监听侧边栏是否产生变化*/
const elementResizeDetectorMaker = require("element-resize-detector");
const erd = elementResizeDetectorMaker();

/*使用防抖debounce函数，减少resize的次数*/
const chartResizeHandler = debounce(100, false, () => {
    if (chart.value) {
        chart.value.resize()
    }
})
/*在侧边栏宽度变化后，执行该函数*/
const sidebarResizeHandler = (e) => {
    nextTick(() => {
        chartResizeHandler()
    })
}
/*添加窗口大小变化监听*/
const initResizeEvent = () => {
    window.addEventListener('resize', chartResizeHandler)
}
/*移除窗口大小变化监听*/
const destroyResizeEvent = () => {
    window.removeEventListener('resize', chartResizeHandler)
}
/*初始化 sider监听*/
const initSidebarResizeEvent = () => {
    /*获取侧边栏的document*/
    sidebarElm = document.getElementsByClassName('sider-content')[0];
    if (sidebarElm) {
        erd.listenTo(sidebarElm, sidebarResizeHandler)
    }

}
/*移除 sider监听*/
const destroySidebarResizeEvent = () => {
    if (sidebarElm) {
        erd.removeListener(sidebarElm)
    }
}

export const mounted = () => {
    initResizeEvent();
    initSidebarResizeEvent();
}
export const beforeDestroy = () => {
    destroyResizeEvent();
    destroySidebarResizeEvent();
}

实际使用：

<template>
  <div style="height: 264px">
    <div id="object-line" style="height: 264px;width: 100%"/>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {nextTick, onBeforeUnmount, onMounted} from "vue";
import {mounted, beforeDestroy, chart} from "../../../../util/resize/resize";

const initLineChart = () => {
  const lchart = echarts.init(document.getElementById('object-line'));
  lchart.setOption(option);
  chart.value = lchart;
}
onMounted(() => {
  mounted();
  nextTick(() => {
    initLineChart();
  });
})

onBeforeUnmount(() => {
  beforeDestroy();
})


//x轴
const tdata = [
  ['2019-11-1', 32],
  ['2019-11-2', 55],
  ['2019-11-3', 80],
  ['2019-11-4', 55],
  ['2019-11-5', 80],
  ['2019-11-6', 32],
  ['2019-11-7', 32],
  ['2019-11-8', 32],
  ['2019-11-9', 32],
  ['2019-11-10', 32],
  ['2019-11-11', 32],
]
const bdata = [
  ['2019-11-1', 12],
  ['2019-11-2', 45],
  ['2019-11-3', 90],
  ['2019-11-6', 42],
  ['2019-11-7', 52],
  ['2019-11-8', 42],
  ['2019-11-9', 32],
  ['2019-11-10', 22],
  ['2019-11-11', 12],
]

const option = {
  /*鼠标悬浮*/
  tooltip: {},
  /*tool*/
  toolbox: {
    feature: {
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {
        show: true,
        title: '',
      }
    }
  },
  backgroundColor: 'white',
  legend: {
    data: ['t2', 't1'],
    bottom: '2%'
  },
  xAxis: {
    type: 'time',
    /*不显示x轴*/
    axisTick: {show: false},
    axisLine: {
      lineStyle: {
        width: 0
      }
    },
    data: [],
    /*x轴标签样式*/
    axisLabel: {
      color: '#888888',
      fontSize: 12,
      show: true,
      showMaxLabel: false,
      showMinLabel: false,
      formatter: '{MM}-{dd}',
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        color: '#F5F5F5'
      },
    },
    axisLabel: {
      show: false
    },
  },
  /*图的位置*/
  grid: {
    x: 20,
    y: 40,
    x2: 20,
    y2: 40,
    containLabel: true
  },
  series: [
    {
      name: 't1',
      data: tdata,
      type: 'line',
      symbolSize: 8,
      lineStyle: {
        color: '#F62681', //改变折线颜色
        width: 3,
      },
      itemStyle: {
        borderWidth: 12,
        color: '#F62681', //改变拐点颜色
      }
    },
    {
      name: 't2',
      data: bdata,
      type: 'bar',
      barWidth: 30,
      itemStyle: {
        color: '#1CA9C9',
        borderRadius: [4, 4, 0, 0],
      }
    }
  ]
};


</script>

<style scoped>

</style>

导入包

  1. element-resize-detector

    安装 npm install element-resize-detector --save

  2. throttle-debounce

    安装 npm install throttle-debounce --save

Throttle-debounce 说明

介绍一下 throttle 和 debounce ，它们都可以用于 函数节流 从而提升性能，但它们还是存在一些不同：

  • debounce：将短时间内多次触发的事件合并成一次事件响应函数执行（往往是在第一次事件或者在最后一次事件触发时执行），即该段时间内仅一次真正执行事件响应函数。
  • throttle：假如在短时间内同一事件多次触发，那么每隔一段更小的时间间隔就会执行事件响应函数，即该段时间内可能多次执行事件响应函数。

虽然每天最烦等电梯要花上十几分钟，但还是可以用坐电梯来举例子：

  • debounce：假如我在电梯里面正准备关门，这时 A 想要坐电梯，那么出于礼貌我会按下开门键，然后等他走进电梯后再尝试关门；等 A 进电梯后，又发现 B 也想要坐电梯，那么同样出于礼貌我会按下开门键，然后等他走进电梯。那么假如一直有人想要坐电梯的话，我就会不断地延后按下关门键的时机，直至没有人想要坐电梯（现实生活中我这样做的话，估计每天除了坐电梯就可以什么都不做了）。
  • throttle：实际上我每天都有工作要完成，不可能在电梯里无限地等别人。那么这回我任性一点，规定我只等 30 秒，不管到时候有没有人想要坐电梯，我都会按下关门键走掉。

从上面两个例子中可以看出两者最大的区别在于只要有事件发生（有人想坐电梯），若使用了 throttle 方法，那么在一段时间内事件响应函数一定会执行（30秒内我按下关门键）；若使用了 debounce 方法，那么只有事件停止发生后（我发现没有人想坐电梯）才会执行。

throttle

限制回调函数的执行频率

/**
 * 节流(限制函数的执行频率)
 * @param delay 延迟的时间
 * @param noTrailing 在最后一次调用时是否执行 callback，true 不执行，false 执行
 * @param callback 目标回调函数
 * @param debounceMode
 */
throttle(delay, noTrailing, callback, debounceMode)

dobounceMode:

为 true 时，在被调用时，先执行 callback，在没有被调用时，在指定的延迟之后执行 clear，如果在clear 执行之前继续调用，会重置定时器；

为 false 时，在被调用时，不会执行 callback，在指定的延迟之后执行 callback，如果在 callback 执行之前继续调用，会重置定时器

debounce

限制回掉函数的执行频率，但是不同于 debounce 的是，debounce 能保证在一系列调用的时间内，回调函数只执行一次

/**
 * 去抖(限制函数的执行频率)
 * @param delay 延迟的时间
 * @param atBegin
 * @param callback 目标回调函数
 */
debounce(delay, atBegin, callback)

atBegin:

为 true 时，在被调用时，会马上执行 callback，如果在延迟时间之前继续调用，不会执行 callback；

为 false 时，在被调用时，不会执行 callback，在延迟时间之后会执行 callback，如果在延迟时间之前继续调用，会重置定时器

问题： 一个页面出现两个echarts图，会导致只有一个生效！

修改resize.js

import {nextTick, ref} from "vue";
import {debounce} from 'throttle-debounce';

export default function () {
    const chart = ref();
    let sidebarElm;
    const elementResizeDetectorMaker = require("element-resize-detector");
    const erd = elementResizeDetectorMaker();

    const chartResizeHandler = debounce(100, false, () => {
        if (chart.value) {
            chart.value.resize()
        }
    })

    const sidebarResizeHandler = (e) => {
        nextTick(() => {
            chartResizeHandler()
        })
    }

    const initResizeEvent = () => {
        window.addEventListener('resize', chartResizeHandler)
    }

    const destroyResizeEvent = () => {
        window.removeEventListener('resize', chartResizeHandler)
    }

    const initSidebarResizeEvent = () => {
        sidebarElm = document.getElementsByClassName('sider-content')[0];
        if (sidebarElm) {
            erd.listenTo(sidebarElm, sidebarResizeHandler)
        }
    }

    const destroySidebarResizeEvent = () => {
        if (sidebarElm) {
            erd.removeListener(sidebarElm)
        }
    }

    const mounted = () => {
        initResizeEvent();
        initSidebarResizeEvent();
    }
    const beforeDestroy = () => {
        destroyResizeEvent();
        destroySidebarResizeEvent();
    }

    return {
        chart,
        mounted,
        beforeDestroy,
    }
}

使用

<template>
  <div style="height: 264px">
    <div id="object-line" style="height: 264px;width: 100%"/>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import {nextTick, onBeforeUnmount, onMounted} from "vue";
import resize from "../../../../util/resize/resize";

const {chart, mounted, beforeDestroy} = resize();
const initLineChart = () => {
  const lchart = echarts.init(document.getElementById('object-line'));
  lchart.setOption(option);
  chart.value = lchart;
}
onMounted(() => {
  mounted();
  nextTick(() => {
    initLineChart();
  });
})

onBeforeUnmount(() => {
  beforeDestroy();
})


//x轴
const tdata = [
  ['2019-11-1', 32],
  ['2019-11-2', 55],
  ['2019-11-3', 80],
  ['2019-11-4', 55],
  ['2019-11-5', 80],
  ['2019-11-6', 32],
  ['2019-11-7', 32],
  ['2019-11-8', 32],
  ['2019-11-9', 32],
  ['2019-11-10', 32],
  ['2019-11-11', 32],
]
const bdata = [
  ['2019-11-1', 12],
  ['2019-11-2', 45],
  ['2019-11-3', 90],
  ['2019-11-6', 42],
  ['2019-11-7', 52],
  ['2019-11-8', 42],
  ['2019-11-9', 32],
  ['2019-11-10', 22],
  ['2019-11-11', 12],
]

const option = {
  /*鼠标悬浮*/
  tooltip: {},
  /*tool*/
  toolbox: {
    feature: {
      magicType: {show: true, type: ['line', 'bar']},
      restore: {show: true},
      saveAsImage: {
        show: true,
        title: '',
      }
    }
  },
  backgroundColor: 'white',
  legend: {
    data: ['t2', 't1'],
    bottom: '2%'
  },
  xAxis: {
    type: 'time',
    /*不显示x轴*/
    axisTick: {show: false},
    axisLine: {
      lineStyle: {
        width: 0
      }
    },
    data: [],
    /*x轴标签样式*/
    axisLabel: {
      color: '#888888',
      fontSize: 12,
      show: true,
      showMaxLabel: false,
      showMinLabel: false,
      formatter: '{MM}-{dd}',
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        color: '#F5F5F5'
      },
    },
    axisLabel: {
      show: false
    },
  },
  /*图的位置*/
  grid: {
    x: 20,
    y: 40,
    x2: 20,
    y2: 40,
    containLabel: true
  },
  series: [
    {
      name: 't1',
      data: tdata,
      type: 'line',
      symbolSize: 8,
      lineStyle: {
        color: '#F62681', //改变折线颜色
        width: 3,
      },
      itemStyle: {
        borderWidth: 12,
        color: '#F62681', //改变拐点颜色
      }
    },
    {
      name: 't2',
      data: bdata,
      type: 'bar',
      barWidth: 30,
      itemStyle: {
        color: '#1CA9C9',
        borderRadius: [4, 4, 0, 0],
      }
    }
  ]
};


</script>

<style scoped>

</style>
第七感 de秘密
关注
专栏目录
vue中echarts3.0自适应的方法
08-27
主要介绍了vue中echarts3.0自适应，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js防抖与节流
yun的博客
03-05 357
什么是防抖和节流 防抖：对于频繁的操作，只让最后一次操作生效 节流：对于频繁的的操作，限制在特定的时间里只触发一次 防抖 防抖的原理其实很简单，比如我们频繁点击一个按钮，点击按钮会触发一个事件，比如： <!--html--> <button id="but">点我</button> // js function doSomeThing() { console.log('做点什么'); } document.querySelector('#but').onclick =
vue3扩展echart封装为组件库-快速复用
最新发布
luck332的专栏
09-22 708
ECharts，全称Enterprise Charts，是一款由百度团队开发并开源，后捐赠给Apache基金会的纯JavaScript图表库。它提供了直观、生动、可交互、可个性化定制的数据可视化图表，广泛应用于数据分析、商业智能、网页开发等领域。首先，你需要创建一个ECharts组件，该组件接受必要的props（如选项、宽度、高度等。
vue3 echarts自适应
我总是词不达意的博客
08-07 1395
vue echarts自适应，vue3 echarts自适应，窗体变化echarts报表重新渲染，echarts重新渲染，echarts宽度随着页面变动而变动
echarts自适应（vue3+echarts）
m0_55794001的博客
08-01 941
记录一下自己项目中常用的echarts自适应的方法
vue3 中使用echarts和echarts自适应
qq_39733791的博客
11-22 429
引入依赖：npm install element-resize-detect。
vue3 Echarts自定义组件自适应
qq_40920553的博客
07-22 1606
在vue项目中实现echarts图表的自适应，F12控制台拖动页面，无需刷新，echarts图表自动适应适配屏幕，封装一个组件，通过props传递不同的数据实现不同样式的图表。
vue使用echarts图表自适应的几种解决方案
01-18
let myChart = echarts.init(document.getElementById(dom)) [removed] = function () { myChat.resize() } 优点：可以根据窗口大小实现自适应 缺点： 多个图表自适应写法比较麻烦（当一个页面的图表太多时，这样...
【JavaScript源代码】vue使用echarts图表自适应的几种解决方案.docx
12-29
以下是针对Vue中ECharts图表自适应的几种常见解决方案： 1. **使用`window.onresize`事件** 这是最基础的实现方式，通过监听窗口的resize事件，调用ECharts的`resize()`方法来更新图表的大小。代码示例如下： ```...
完美解决vue 中多个echarts图表自适应的问题
12-28
看代码吧~ <div class=echarts> 　<IEcharts option=bar ref=echarts>... //echarts自适应 selfAdaption () { const self = this； setTimeout(() => { [removed] = function () { self.$refs.echarts.resize()
Vue3项目中使用ECharts图表并实现自适应效果
m0_52043522的博客
05-06 8720
关于Vue3中使用ECharts的用法和自适应效果实现
vue3中使用echarts和echarts自适应
m0_58293192的博客
11-23 2703
vue3中使用echarts和echarts自适应
Vue3 echarts 图表跟随窗口自适应大小
m0_56153940的博客
02-23 4237
<template> <div class="box"> <Breadcrumb name="数据统计"/> <el-card> <div ref="echartsRef" id="main" :style="`height:${$attrs.height || 400}px;width:${$attrs.width + 'px' || '70%'} 800px; `"></div> &.
vue3.x中使用echarts屏幕自适应
choose_Mings的博客
02-16 1278
vue3.x中使用echarts屏幕自适应 需要使用markRaw属性，数据改变，视图不会发生变化 同时渲染之前先销毁当前echarts实例，再进项实时渲染以达到自适应的效果
vue3 echarts多图自适应封装
m0_46188775的博客
07-13 1009
vue3使用echarts。一个页面多个echarts。自适应
vue3中使用echart多个图表，并且可以随着屏幕大小自适应布局
m0_52761651的博客
09-14 4193
vue3中使用echart多个图表，并且可以随着屏幕大小自适应布局
vue3 实现echarts根据页面大小进行自适应
瑰的博客
11-18 1819
vue3实现echarts自适应
vue3+百度 echarts 高度和宽度自适应的优化
吴均的博客
09-12 962
echart在切换table签或者视窗放大和缩小的时候echart不能实时的变更尺寸,那么我们只需要在dom变化的时候调用echart.resize()就行了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

第七感 de秘密

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值