vue項目中使用ECharts,避免瀏覽器卡死的解決方案
更新時間：2025年07月30日 09:27:54 作者：一身溫柔氣
Vue中ECharts圖表過多易導致頁面卡死,建議全局引入并動態(tài)銷毀實例,避免資源堆積,代碼示例包含樣式配置,可根據需求調整
在vue項目中常遇到echarts圖表使用過多頁面卡死的情況，以下只展示了一個折線圖，可通過同樣方式增加多個，通過以下方法每執(zhí)行一次清除一次即可。
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() {
// 手動觸發(fā) 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|}" + " " + "心率與呼吸率動態(tài)",//展示的標題
textStyle: {
fontSize: 17,
color: "#000",
fontWeight: 500,
rich: {
a: {
color: "#FFF", //設置 動態(tài)數據字體的顏色
fontSize: "12", //設置 動態(tài)數據字體的大小
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>
效果展示：
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue.directive 自定義指令，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了使用vant-uploader上傳照片無法刪除的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
前端Vue3最常用的?20?道面試題總結(含詳細解釋和代碼示例)
Vue3作為當前前端主流框架,其核心特性、底層原理及生態(tài)工具是面試中的高頻考點,這篇文章主要介紹了前端Vue3最常用的20道面試題(含詳細解釋和代碼示例)的相關資料,需要的朋友可以參考下2026-05-05
組件（Component）是 Vue.js 最強大的功能之一，之前的文章都只是用到了基本的封裝功能，這次將介紹一些更強大的擴展。這篇文章主要介紹了Vue.js實戰(zhàn)之組件進階的相關資料，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-04-04
這篇文章給大家介紹了element表格數據模糊的實現代碼,文中有詳細的效果展示和實現代碼供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了JavaScript之實現一個簡單的Vue示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vue中的事件處理詳情，文章通過給按鈕綁定一個?click?事件展開詳細內容介紹，需要的小伙伴可以參考一下2022-05-05
在Vue2項目中,使用dart-sass替代node-sass可以解決安裝困難和環(huán)境兼容問題,VueCLI3+用戶可直接使用,而VueCLI2用戶需升級VueCLI和項目,具體方法包括修改package.json依賴并使用.scss文件編寫樣式,此更改有助于提升項目的開發(fā)效率和跨平臺兼容性2024-09-09
vue3中如何通過ref和$parent結合defineExpose實現父子組件之間的通信
這篇文章主要介紹了vue3中通過ref和$parent結合defineExpose實現父子組件之間的通信,Vue3中通過ref和$parent的結合使用，及defineExpose的方法，可以非常便捷地實現父子組件之間的通信，需要的朋友可以參考下2023-07-07
vue中使用echarts繪制雙Y軸圖表時刻度沒有對齊的兩種解決方法(最新方案)
這篇文章主要介紹了vue中使用echarts繪制雙Y軸圖表時，刻度沒有對齊的兩種解決方法,主要原因是因為刻度在顯示時，分割段數不一樣，導致左右的刻度線不一致，不能重合在一起，下面給大家分享解決方法，需要的朋友可以參考下2024-03-03