vue项目中使用ECharts,避免浏览器卡死完整版

在vue项目中常遇到echarts图表使用过多页面卡死的情况，以下只展示了一个折线图，可通过同样方式增加多个，通过以下方法每执行一次清除一次即可。

1、从npm获取

npm install echarts --save

2、在 main.js引入echarts

import * as echarts from 'echarts';

Vue.prototype.$echarts = echarts;

3、完整代码（图表中加了其他样式，可根据自己喜欢更改）

<template>
  <div>
    <div class="container">
      <div id="linePicture"></div>
    </div>
  </div>
</template>
<script>
//全局定义chart，离开页面时直接清除chart；
let chart = null;
export default {
  data() {
    return {};
  },
  // 页面初始化挂载dom
  mounted() {
    window.addEventListener("beforeunload", this.clearChart);
    this.linePictures("linePicture");
  },
  methods: {
    clearChart() {
      // 手动触发 destroy 相关的生命周期
      this.$destroy();
    },
    linePictures(id) {
      //心率/呼吸率
	  // 时间轴
      var xdata = [
        "00:38",
        "00:39",
        "00:40",
        "00:41",
        "00:42",
        "00:43",
        "00:44",
        "00:45",
        "00:46",
        "00:47",
        "00:48",
        "00:49",
        "00:50",
        "00:51",
        "00:52",
        "00:53",
        "00:54",
        "00:55",
        "00:56",
        "00:57",
        "00:58",
        "00:59",
        "01:00",
      ];
	  //线条一数据
      var adata = [
        0, 17, 17, 17, 18, 20, 22, 23, 0, 18, 19, 19, 19, 19, 19, 18, 18, 18, 0,
        0, 21, 19, 0,
      ];
	  //线条二数据
      var bdata = [
        0, 0, 54, 54, 54, 54, 54, 54, 53, 53, 53, 54, 54, 54, 54, 54, 53, 53, 0,
        0, 59, 59, 57,
      ];
	  //判断为0不展示，页面展示为0的线不渲染，如想将0也展示可删除；
      for (var i = 0; i < adata.length; i++) {
        if (adata[i] == 0) {
          adata[i] = "-";
        }
      }
	  //第二条线判断同上；
      for (var i = 0; i < bdata.length; i++) {
        if (bdata[i] == 0) {
          bdata[i] = "-";
        }
      }
	  //判断chart，清除上次数据，防止消耗内存；
      if (chart !== null) {
        chart.dispose();
        chart = null;
      }
      if (!chart) {
        chart = this.$echarts.init(document.getElementById(id), "classic", {
          renderer: "svg",
        });
        chart.setOption({
          title: {
            top: -5,
            left: 0,
            text: "{a|}" + " " + "心率与呼吸率动态",//展示的标题
            textStyle: {
              fontSize: 17,
              color: "#000",
              fontWeight: 500,
              rich: {
                a: {
                  color: "#FFF", //设置 动态数据字体的颜色
                  fontSize: "12", //设置 动态数据字体的大小
                  height: 23,
                  width: 23,
                  backgroundColor: {
                    image: require(`../../../assets/heart.png`),//头部标题图片
                  },
                },
              },
            },
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            top: 4, //图例距离左的距离
            right: 7,
            y: "center", //图例上下居中
            orient: "vertical",
            itemGap: 32,
            height: "20",
            selectedMode: false, // 图例选择的模式，
            data: ["呼吸率", "心率"],
            textStyle: {
              fontSize: 13,
              color: "#989ca7",
            },
            // data:types
          },
          grid: {
            top: "29%",
            right: "2%",
            left: "1%",
            bottom: "5%",
            containLabel: true,
          },
          xAxis: {
            //横坐标
            name: "",
            scale: true,
            type: "category",
            boundaryGap: true,
            data: xdata,
            nameGap: 25, //坐标轴名称与轴线之间的距离        (用数字表示)
            nameRotate: 0, //坐标轴名字旋转的角度值
            inverse: false, //是否为反向坐标轴
            axisLine: {
              //坐标轴轴线设置
              show: true, //是否显示坐标轴轴线
            },
            axisLabel: {
              //坐标轴刻度文字的设置
              show: true, //是否显示
              fontSize: 11, //坐标轴刻度文字的大小         (用数字表示)
            },
          },
          yAxis: {
            name: "",
            type: "value",
            show: true, //是否显示 y 轴
            position: "bottom", //y轴的位置        (可选位置top  bottom)
            offset: 0, //y轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
            nameGap: 25, //坐标轴名称与轴线之间的距离        (用数字表示)
            axisLine: {
              //坐标轴轴线设置
              show: true, //是否显示坐标轴轴线
              lineStyle: {
                //坐标轴的线
                width: 1.2, //线的粗细程度    (用数字表示)
                type: "solid", //线的类型        (可选solid  dotted  dashed)
                opacity: 1, //线的透明度        (用0~1的小数表示)
              },
            },
            axisTick: {
              //坐标轴刻度设置
              show: true, //是否显示坐标轴刻度
              alignWithLabel: true, //刻度线是否和标签对齐
              length: 5, //坐标轴刻度长度
              lineStyle: {
                //坐标轴刻度的样式
                width: 1.2, //坐标轴刻度的粗细程度    (用数字表示)
                type: "solid", //坐标轴刻度的类型        (可选solid  dotted  dashed)
              },
            },
            axisLabel: {
              //坐标轴刻度文字的设置
              show: true, //是否显示
              inside: false, //坐标轴刻度文字指向        (true表示向上   false表示向下)
              margin: 10, //坐标轴刻度文字与轴线之间的距离
              fontSize: 10, //坐标轴刻度文字的大小         (用数字表示)
              padding: [8, 0, 2, -5], //坐标轴刻度文字的边距        (上右下左)
            },
            splitLine: {
              //网格线
              show: true, //是否显示
              lineStyle: {
                //网格线样式
                color: "#b7b5b5", //网格线颜色
                width: 1.3, //网格线的加粗程度
                type: "dashed", //网格线类型
              },
            },
          },
          series: [
            {
              name: "呼吸率",
              type: "line",
              smooth: true,
              symbol: "none",
              data: adata,
            },
            {
              name: "心率",
              type: "line",
              smooth: true,
              symbol: "none",
              data: bdata,
            },
          ],
        });
      }
    },
  },
  //离开页面时需清除图表，避免占用内存，导致页面卡死；
  beforeDestroy() {
    if (!chart) {
      return;
    }
    chart.dispose();
    chart = null;
    // 清空 beforeunload 事件处理函数
    window.removeEventListener("beforeunload", this.clearChart);
  },
};
</script>
<style scoped>
.container {
  width: 50%;
  height: 400px;
  padding: 15px 30px;
  background: #fff;
  margin-bottom: 20px;
}

#linePicture {
  width: 100%;
  height: 380px;
}
</style>

效果展示：