web前端之若依项目窗口大小改变或侧边栏伸缩时echarts图表自适应、封装执行文件和模板文件、展开、折叠、ApacheECharts、KeepAlive、RouterView、deactivated_npm publish --force

---

前言

如需完整代码请WX私聊: MJ682517
没有任何套路，直接发代码
在vue项目中，窗口大小不变(排除window的resize监听)，侧边菜单栏折叠展开，导致右边内容区域宽度变化，echarts图表不会自适应。常规解决办法的是使用window.addEventListener(“resize”)来监听窗口变化，但当前窗口大小并没有变，内部元素的宽度变化不会触发resize。
这个功能在网上也找到一些解决方案，但是都不全，缺胳膊少腿的都有，又不想使用插件，于是就自己动手实现，希望本文能帮到你。
有兴趣的朋友可以把此功能封装到混入(mixin)中。

---

效果图

---

自适应公共方法

handleResize() {
  this.idStackedColumnChart.resize();
},
1
2
3

resize监听需要使用函数作为参数，专门封装handleResize函数来执行echarts实例中的resize方法。

---

窗口缩小或放大时echarts图表大小自适应

// 窗口缩小或放大时echarts图表大小自适应(开始监听)
window.addEventListener("resize", that.handleResize, true);
1
2

---

侧边栏伸缩时echarts图表大小自适应

// 侧边栏伸缩时echarts图表大小自适应(开始监听)
that.unWatch = that.$watch(
	// 获取全局变量，此变量控制菜单的展开与折叠
	// 当点击菜单栏按钮实现伸缩时此变量会发生变化
  () => that.$store.state.app.sidebar.opened,
  // 执行echarts自适应函数
  // 设置定时器是因为element-ui的菜单组件有300毫秒的动画
  // 需要等到动画加载完毕再执行echarts自适应，否则不起作用
  () => setTimeout(() => that.handleResize(), 300)
);
1
2
3
4
5
6
7
8
9
10

---

deactivated

deactivated是keep-alive组件页面卸载时被触发的生命周期函数。
若依框架使用keep-alive组件包裹router-view路由组件，导致页面卸载时的生命周期函数无法触发。
使用keep-alive组件自带的deactivated生命周期函数来解决页面卸载时的触发问题。

---

完整代码

html

<template>
  <div class="app_container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <div id="idStackedColumnChart" class="w_100_ h_268"></div>
      </el-col>
    </el-row>
  </div>
</template>
1
2
3
4
5
6
7
8
9

---

JavaScript

export default {
  name: "Index",
  data() {
    return {
      // 保存echarts实例，自适应时需要执行自身的resize方法
      idStackedColumnChart: undefined,
      // 保存监听实例，销毁时需要执行
      unWatch: undefined
    };
  },
  // 第一次进入页面时触发
  // 二次进入页面后不会触发
  // 这与keep-alive组件有关
  mounted() {
    this.handleNextTick();
  },
  // 重新进入页面时触发
  // 首次进入页面时不会触发
  activated() {
    this.handleNextTick();
  },
  deactivated() {
  	// 解决窗口缩小或放大时echarts图表大小自适应(卸载监听)
    window.removeEventListener("resize", this.handleResize, true);
    // 侧边栏伸缩时echarts图表大小自适应(卸载监听)
    this.unWatch();
  },

  methods: {
  	handleNextTick() {
      let that = this;
	  
	  // 需要等页面加载完才能获取到DOM元素
	  // 有了DOM元素才能渲染echarts
      that.$nextTick(() => {
      	// 初始化时保存echarts实例
        if (!that.idStackedColumnChart) that.idStackedColumnChart = that.handleInit();
		
		// 窗口缩小或放大时echarts图表大小自适应(开始监听)
        window.addEventListener("resize", that.handleResize, true);
        // 侧边栏伸缩时echarts图表大小自适应(开始监听)
        that.unWatch = that.$watch(
          () => that.$store.state.app.sidebar.opened,
          () => setTimeout(() => that.handleResize(), 300)
        );
		
		// 重新进入页面自适应
        that.handleResize();
      });
    },
    handleResize() {
      this.idStackedColumnChart.resize();
    },
    handleInit() {
      return this.$echartsInit("idStackedColumnChart", "stackedColumnChart", {
        title: {
          text: "堆叠柱形图",
        },
        xAxis: [
          {
            data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"],
          },
        ],
        series: [
          {
            name: "红色",
            itemStyle: {
              color: "#ff0000",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "绿色",
            itemStyle: {
              color: "#00ff00",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "蓝色",
            itemStyle: {
              color: "#0000ff",
            },
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      });
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

---

echarts模板封装

准备工作

在utils文件夹中新建名为echartsInit.js文件用来执行echarts模板。

---

echartsInit.js文件内容

// 在2023-03-31号引入报错
// import echarts from 'echarts';
import * as echarts from 'echarts';

import { stackedColumnChart } from '@/assets/echarts/stackedColumnChart.js';

let formwork = {
    stackedColumnChart
};

// id：元素id或ref
// key：配置参数/数据模板
// option：选项/数据
export const echartsInit = (id, key, option) => {
    // 有的话就获取已有echarts实例的DOM节点
    let dom = echarts.getInstanceByDom(document.getElementById(id));

    // 初始化echarts
    if (!dom) dom = echarts.init(document.getElementById(id));

    dom.setOption(formwork[key]);
    dom.showLoading();
    dom.setOption(option);
    dom.hideLoading();

    return dom;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

---

stackedColumnChart.js文件内容

stackedColumnChart.js文件便是echarts的一个模板文件，本案列实现的是堆叠柱状图模板文件。
如需其他echarts类型文件可自行创建，模板文件创建好后，按照echartsInit.js文件中继续添加即可。
引入文件，解构变量，把解构好的变量放到formwork对象中即可。

export const stackedColumnChart = {
    title: {
        text: '默认标题'
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
        },
    },
    legend: {},
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
    },
    xAxis: [
        {
            type: "category",
        }
    ],
    yAxis: [
        {
            type: "value",
        },
    ],
    series: [
        {
            name: "",
            type: "bar",
            stack: "Ad",
            emphasis: {
                focus: "series",
            },
            data: [],
        },
        {
            name: "",
            type: "bar",
            stack: "Ad",
            emphasis: {
                focus: "series",
            },
            data: [],
        },
        {
            name: "",
            type: "bar",
            stack: "Ad",
            emphasis: {
                focus: "series",
            },
            data: [],
        }
    ],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

---

在main.js文件中全局注册echartsInit.js文件

// 初始化echarts
import { echartsInit } from '@/utils/echartsInit.js'

// 全局方法挂载
Vue.prototype.$echartsInit = echartsInit
1
2
3
4
5

---

在页面中使用$echartsInit变量

this.$echartsInit("id", "模板文件变量", {数据});
1