vue中echarts自适应

前言：

　　大神估计就没必要看了吧，新手淌水，大神勿喷，欢迎留言交流。

背景：

　　（如果着急，可以直接下拉看最后一个遂。）

　　vue项目1个，使用ruoyi-vue框架

　　前端小白1个，仅仅停留在能实现功能的层次，如果你问我vue是什么，我只能告诉你三个字 => "前端框架"。

在vue项目中，多个echarts在页面中显示，而每个echarts图标均为子组件。

1.需要支持全屏显示，顾名思义：F11 , F11后需要echarts 自适应。

2.左侧菜单栏需要收起，收起后需要echarts 自适应。

 

遂，度娘寻资源。

 

　　1.通过监听 window.resize 调用 echarts.resize()

let eCharts= echarts.init(document.getElementById(dom))
　　window.onresize = function () {
　　eCharts.resize()
}

Result：多个echarts图表全部设置完成后，只有一个可以自适应。

 

遂，继续度娘。

 

　　2.还是通过监听window.resize 调用 echarts.resize()

window.addEventListener('resize', () => {
   this.eCharts.resize();
})

　　Result：

　　　　Good News : 完美解决多个echarts图表只有一个自适应的问题，F11完美自适应。

　　　　Bad News : 未解决菜单隐藏自适应，继续解决左边菜单显示/隐藏后，echarts图表宽度自适应的问题，打算从按钮事件入手。

　　代码中查找收起按钮。

<div class="navbar">
    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> <!--toggleSideBar 为收起隐藏按钮事件 --> 

　　 <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" /> <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" /> 

　　 <div> 

　　　　　... 内容省略

　　 </div>

</div>

　　经查看代码，菜单栏收起状态是通过store管理。

toggleSideBar () {
   console.log('Navbar-state', this.$store.state.app.sidebar.opened)
   this.$store.dispatch('app/toggleSideBar')
},

　　console.log一番后，确定当前值即为收起/展开菜单栏的状态值。

　　

　　于是，心生歹念。

　　打算用每个子组件 watch -> this.$store.state.app.sidebar.opened 的值，只要存在变化，就能实现 this.echarts.resize()，不过话说这个确实浪费资源。

computed: {
   test () {
      return this.$store.state.app.sidebar.opened
   }
},
watch: {
  test: function (nl, ol) {
     console.log('this.ageCharts.resize()', this.eCharts.resize());
  }
},

 

　　此处，可正常监听app.sidebar.opened 的值变化，true，false，true，false，true，false ... 得劲啊~ 

　　但是，经过一系列诊断，此处 this.eCharts.resize() 未生效。

　　于是，打印上面windows.addEventListener 中 this.eCharts.resize() 的值。

　　结果，两个值打印结果一样，均undefined... 但在 windows.addEventListener 生效，watch中就不生效。 

 

遂，更换方案，继续度娘。

 

　　3. 使用element-resize-detector 解决。

　　先安装依赖 

npm i element-resize-detector --save  或  yarn add element-resize-detector

 

　　新建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);

　　在有echarts图表的vue组件中，引用resize.js 文件

import './../resize'

　　并在echarts 的 dom 上添加  v-on-echart-resize

<div class="center-echarts">
    <div id="myChart" class="echarts-body" v-on-echart-resize />
</div>

　　在组件mounted中添加以下代码：

mounted () {
  const elementResizeDetectorMaker = require("element-resize-detector");
  let erd = elementResizeDetectorMaker();
  erd.listenTo(this.$refs.myChart, () => {
  this.$nextTick(function () {
      const echarts= this.$echarts.init(this.$refs.myChart);
//使echarts尺寸重置
      echarts.resize();
    });
  });
},

　　呃，运行后，完美解决 F11 和菜单显示/隐藏时，echarts 自适应的问题。