vue中监听div大小解决echarts 的resize问题

这个方法可以解决所有vue中的echarts图例的resize(在需要的vue页面import js,并在需要的div中添加事件即可),连tab的影响也能解决,同时window大小发生变化时也会resize
再也不用到处写resize了
1、安装element-resize-detector依赖
2.新建chart.resize.js文件,添加下面代码

import echarts from 'echarts';
import Vue from 'vue';
import elementResizeDetectorMaker from "element-resize-detector"

export var version = '0.0.1';
var compatible = (/^2\./).test(Vue.version);
if (!compatible) {
    Vue.util.warn('vue echarts resize directive ' + version + ' only supports Vue 2.x, and does not support Vue ' + Vue.version);
}
let HANDLER = "_vue_echarts_resize_handler"

function bind(el) {
    unbind(el);
    el[HANDLER] = function () {
        let chart = echarts.getInstanceByDom(el);
        if (!chart) {
            return;
        }
        chart.resize();
    }
    //监听window窗体变化,更新echarts大小
    //window.addEventListener("resize", el[HANDLER])
    //监听绑定的div大小变化,更新echarts大小
    elementResizeDetectorMaker().listenTo(el,el[HANDLER])
    
}
function unbind(el) {
    //window.removeEventListener("resize", el[HANDLER]);
    elementResizeDetectorMaker().removeListener(el,el[HANDLER])
    delete el[HANDLER];
}
var directive = {
    bind: bind,
    unbind: unbind
};
Vue.directive("on-echart-resize", directive)

3.vue代码

<template>
<div id="chart1" v-on-echart-resize></div>
</template>
<script>
import "@/chart.resize";
export default {
name: "resize_test",
  data() {
    return {
      chart1: null
    };
  },
  mounted: function() {
     if (this.chart1 === null) {
        this.$set(
          this,
          "chart1",
          this.$echarts.init(
            document.getElementById("chart1")
          )
        );
     this.setChart1({});
  }
};
</script>

这是通过学习并结合这两个网址实现的功能
https://juejin.im/post/5aa3b2046fb9a028ce7b36c7
https://blog.csdn.net/csl125/article/details/89245267

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: 可以通过监听div大小变化,然后重新设置echarts大小来实现自适应。具体实现可以参考以下步骤: 1. 在mounted钩子函数初始化echarts,并获取div元素的宽高。 2. 监听div元素的resize事件,当div大小发生变化时,重新设置echarts大小。 3. 在beforeDestroy钩子函数销毁echarts实例。 示例代码如下: ``` <template> <div ref="chart" class="chart"></div> </template> <script> import echarts from 'echarts' export default { mounted() { // 初始化echarts this.chart = echarts.init(this.$refs.chart) // 获取div元素的宽高 this.width = this.$refs.chart.clientWidth this.height = this.$refs.chart.clientHeight // 设置echarts的初始大小 this.chart.resize({ width: this.width, height: this.height }) // 监听div元素的resize事件 window.addEventListener('resize', this.handleResize) }, beforeDestroy() { // 销毁echarts实例 this.chart.dispose() // 移除resize事件监听 window.removeEventListener('resize', this.handleResize) }, methods: { handleResize() { // 获取div元素的新宽高 const newWidth = this.$refs.chart.clientWidth const newHeight = this.$refs.chart.clientHeight // 设置echarts的新大小 this.chart.resize({ width: newWidth, height: newHeight }) } } } </script> <style> .chart { width: 100%; height: 100%; } </style> ``` ### 回答2: Vue Echarts是一款基于Vue.js的开源图表库,它能够将数据转化为直观、清晰的图表,展示数据之间的关系和趋势。但是,在实际开发,我们往往会遇到图表所在的div大小会随着浏览器窗口大小的改变而改变的情况,这时我们需要对Vue Echarts进行自适应。 实现Vue Echarts自适应div大小,首先需要在mounted钩子函数获取div元素的宽度和高度,可以使用Vue的$refs属性来获取元素: ``` mounted() { let echartsDiv = this.$refs.echartsDiv; let echartsW = echartsDiv.offsetWidth; let echartsH = echartsDiv.offsetHeight; } ``` 接着,需要在窗口大小改变时动态修改div的宽度和高度。可以通过window对象的resize事件来监听窗口大小的变化: ``` mounted() { window.addEventListener('resize', this.resizeEcharts); }, methods: { resizeEcharts() { let echartsDiv = this.$refs.echartsDiv; let echartsW = echartsDiv.offsetWidth; let echartsH = echartsDiv.offsetHeight; // 修改图表大小 this.chart.resize({ width: echartsW, height: echartsH }); } } ``` 上述代码resizeEcharts方法会在窗口大小改变时被调用,获取到div的宽度和高度后,再通过this.chart.resize()方法来修改图表的大小。我们需要在创建Echarts实例时,将其赋值给this.chart: ``` created() { this.chart = echarts.init(this.$refs.echartsDiv); } ``` 通过以上的代码实现,就能实现Vue Echarts自适应div大小的功能了。需要注意的是,在获取div宽度和高度时,由于组件渲染需要时间,因此需要判断echartsDiv是否已经加载完成。如果echartsDiv对象未定义,我们可以使用Vue的$nextTick方法来等待前一次渲染完成: ``` mounted() { this.$nextTick(() => { let echartsDiv = this.$refs.echartsDiv; let echartsW = echartsDiv.offsetWidth; let echartsH = echartsDiv.offsetHeight; // 创建图表实例 this.chart = echarts.init(this.$refs.echartsDiv); // 修改图表大小 this.chart.resize({ width: echartsW, height: echartsH }); // 监听窗口大小 window.addEventListener('resize', this.resizeEcharts); }); }, ``` ### 回答3: Vue是一款非常流行的前端框架,而Echarts则是其一个非常强大的数据可视化工具。在Vue使用Echarts时,可能会遇到一个问题,即如何实现Echarts图表的自适应div大小。下面我将详细介绍如何解决这个问题。 在Vue,我们可以使用v-if指令来判断Echarts是否已经被渲染,从而动态设置div大小。具体做法如下: 首先,我们需要在Vue的mounted生命周期函数渲染Echarts图表: ``` mounted() { // 初始化Echarts this.chart = echarts.init(this.$refs.chart) // 绘制Echarts图表 this.drawChart() } ``` 其,this.$refs.chart表示Echarts所在的div容器。 接下来,我们可以在window的resize事件重新设置div大小,从而实现Echarts图表的自适应: ``` mounted() { // 初始化Echarts this.chart = echarts.init(this.$refs.chart) // 绘制Echarts图表 this.drawChart() // 监听屏幕大小变化 window.addEventListener('resize', this.resize) }, methods: { resize() { // 销毁当前图表实例 this.chart.dispose() // 重新创建图表实例 this.chart = echarts.init(this.$refs.chart) // 重新绘制图表 this.drawChart() }, drawChart() { // 绘制Echarts图表 ... } } ``` 其resize方法用于销毁当前图表实例并重新创建一个新的实例,并调用drawChart方法重新绘制图表。 最后,我们还需要在div上添加样式,让它具有一定的最小高度,避免Echarts图表过小时出现错位的情况。具体样式如下: ``` .chart-container { min-height: 300px; } ``` 通过以上的方法,我们就可以实现Echarts图表的自适应div大小。而且,这种方法通用性比较好,不仅适用于Vue,还适用于其他前端框架。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值