快捷導(dǎo)航

vue項(xiàng)目中使用ECharts,避免瀏覽器卡死的解決方案

更新時(shí)間：2025年07月30日 09:27:54 作者：一身溫柔氣

Vue中ECharts圖表過(guò)多易導(dǎo)致頁(yè)面卡死,建議全局引入并動(dòng)態(tài)銷毀實(shí)例,避免資源堆積,代碼示例包含樣式配置,可根據(jù)需求調(diào)整

1、從npm獲取

npm install echarts --save

2、在 main.js引入echarts

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

3、完整代碼

（圖表中加了其他樣式，可根據(jù)自己喜歡更改）

<template>
  <div>
    <div class="container">
      <div id="linePicture"></div>
    </div>
  </div>
</template>
<script>
//全局定義chart，離開(kāi)頁(yè)面時(shí)直接清除chart；
let chart = null;
export default {
  data() {
    return {};
  },
  // 頁(yè)面初始化掛載dom
  mounted() {
    window.addEventListener("beforeunload", this.clearChart);
    this.linePictures("linePicture");
  },
  methods: {
    clearChart() {
      // 手動(dòng)觸發(fā) destroy 相關(guān)的生命周期
      this.$destroy();
    },
    linePictures(id) {
      //心率/呼吸率
	  // 時(shí)間軸
      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",
      ];
	  //線條一數(shù)據(jù)
      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,
      ];
	  //線條二數(shù)據(jù)
      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不展示，頁(yè)面展示為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，清除上次數(shù)據(jù)，防止消耗內(nèi)存；
      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|}" + " " + "心率與呼吸率動(dòng)態(tài)",//展示的標(biāo)題
            textStyle: {
              fontSize: 17,
              color: "#000",
              fontWeight: 500,
              rich: {
                a: {
                  color: "#FFF", //設(shè)置 動(dòng)態(tài)數(shù)據(jù)字體的顏色
                  fontSize: "12", //設(shè)置 動(dòng)態(tài)數(shù)據(jù)字體的大小
                  height: 23,
                  width: 23,
                  backgroundColor: {
                    image: require(`../../../assets/heart.png`),//頭部標(biāo)題圖片
                  },
                },
              },
            },
          },
          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: {
            //橫坐標(biāo)
            name: "",
            scale: true,
            type: "category",
            boundaryGap: true,
            data: xdata,
            nameGap: 25, //坐標(biāo)軸名稱與軸線之間的距離        (用數(shù)字表示)
            nameRotate: 0, //坐標(biāo)軸名字旋轉(zhuǎn)的角度值
            inverse: false, //是否為反向坐標(biāo)軸
            axisLine: {
              //坐標(biāo)軸軸線設(shè)置
              show: true, //是否顯示坐標(biāo)軸軸線
            },
            axisLabel: {
              //坐標(biāo)軸刻度文字的設(shè)置
              show: true, //是否顯示
              fontSize: 11, //坐標(biāo)軸刻度文字的大小         (用數(shù)字表示)
            },
          },
          yAxis: {
            name: "",
            type: "value",
            show: true, //是否顯示 y 軸
            position: "bottom", //y軸的位置        (可選位置top  bottom)
            offset: 0, //y軸相對(duì)于默認(rèn)位置的偏移，在相同的 position 上有多個(gè) X 軸的時(shí)候有用
            nameGap: 25, //坐標(biāo)軸名稱與軸線之間的距離        (用數(shù)字表示)
            axisLine: {
              //坐標(biāo)軸軸線設(shè)置
              show: true, //是否顯示坐標(biāo)軸軸線
              lineStyle: {
                //坐標(biāo)軸的線
                width: 1.2, //線的粗細(xì)程度    (用數(shù)字表示)
                type: "solid", //線的類型        (可選solid  dotted  dashed)
                opacity: 1, //線的透明度        (用0~1的小數(shù)表示)
              },
            },
            axisTick: {
              //坐標(biāo)軸刻度設(shè)置
              show: true, //是否顯示坐標(biāo)軸刻度
              alignWithLabel: true, //刻度線是否和標(biāo)簽對(duì)齊
              length: 5, //坐標(biāo)軸刻度長(zhǎng)度
              lineStyle: {
                //坐標(biāo)軸刻度的樣式
                width: 1.2, //坐標(biāo)軸刻度的粗細(xì)程度    (用數(shù)字表示)
                type: "solid", //坐標(biāo)軸刻度的類型        (可選solid  dotted  dashed)
              },
            },
            axisLabel: {
              //坐標(biāo)軸刻度文字的設(shè)置
              show: true, //是否顯示
              inside: false, //坐標(biāo)軸刻度文字指向        (true表示向上   false表示向下)
              margin: 10, //坐標(biāo)軸刻度文字與軸線之間的距離
              fontSize: 10, //坐標(biāo)軸刻度文字的大小         (用數(shù)字表示)
              padding: [8, 0, 2, -5], //坐標(biāo)軸刻度文字的邊距        (上右下左)
            },
            splitLine: {
              //網(wǎng)格線
              show: true, //是否顯示
              lineStyle: {
                //網(wǎng)格線樣式
                color: "#b7b5b5", //網(wǎng)格線顏色
                width: 1.3, //網(wǎng)格線的加粗程度
                type: "dashed", //網(wǎng)格線類型
              },
            },
          },
          series: [
            {
              name: "呼吸率",
              type: "line",
              smooth: true,
              symbol: "none",
              data: adata,
            },
            {
              name: "心率",
              type: "line",
              smooth: true,
              symbol: "none",
              data: bdata,
            },
          ],
        });
      }
    },
  },
  //離開(kāi)頁(yè)面時(shí)需清除圖表，避免占用內(nèi)存，導(dǎo)致頁(yè)面卡死；
  beforeDestroy() {
    if (!chart) {
      return;
    }
    chart.dispose();
    chart = null;
    // 清空 beforeunload 事件處理函數(shù)
    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>

效果展示：