在前端開發中，數據可視化是非常重要的一部分。ECharts 作為一個功能強大且易于使用的開源數據可視化庫，被廣泛應用于各種圖表展示需求中。而 Vue.js 是當下流行的前端框架之一，它的數據驅動和組件化開發模式讓我們能輕松地將 ECharts 集成到 Vue 組件中。本篇博客將通過一個實際的代碼示例，逐步解析如何將 ECharts 與 Vue 結合使用，構建可復用的數據可視化組件。
1. Vue 模板部分
<template><div ref="chart" id="chart-container" style="width: 100%; height: 400px;"></div>
</template>
在 Vue 組件的模板部分，我們定義了一個 div，它將作為 ECharts 的容器。ref="chart" 是 Vue 中的一個引用，用于在 JavaScript 中獲取這個 DOM 元素，style 用于設置圖表的寬高。
2. 腳本部分 - Props 定義
props: {source: {type: [Array, Object],required: true},tooltip: {type: Array,default: () => []},xName: {type: String,default: ''},yName: {type: String,default: ''},singleSelect: {type: Boolean,default: false},type: {type: String,required: true},RequestParameters: {type: Object,default: () => ({})}
},
props 是 Vue 組件用于接收父組件傳遞數據的屬性。在這里我們定義了多個屬性：
source: 必填，表示圖表的數據源，可以是數組或對象。tooltip: 用于顯示自定義的提示信息，默認為空數組。xName和yName: 分別為 X 軸和 Y 軸的名稱。singleSelect: 布爾值，控制圖例是否為單選。type: 圖表的類型，如線圖、柱狀圖等。RequestParameters: 請求參數，用于一些特定的業務需求，默認為空對象。
3. data 和 mounted 鉤子
data() {return {chartInstance: null,};
},
mounted() {this.initChart(); // 初始化圖表window.addEventListener('resize', this.handleResize); // 監聽窗口大小變化
},
beforeDestroy() {window.removeEventListener('resize', this.handleResize);if (this.chartInstance) {this.chartInstance.dispose(); // 銷毀圖表實例}
}
data: Vue 組件的局部數據。在這里，我們定義了chartInstance，用于存儲 ECharts 實例。mounted: Vue 的生命周期鉤子函數，當組件掛載到 DOM 后會觸發。我們在這里初始化圖表并監聽窗口大小變化，以便圖表在窗口尺寸變化時能夠自適應。beforeDestroy: 在組件銷毀前，我們移除窗口的 resize 事件監聽器，并銷毀 ECharts 實例，避免內存泄漏。
4. 圖表的初始化和更新
methods: {handleResize() {if (this.chartInstance) {this.chartInstance.resize(); // 調用圖表實例的 resize 方法}},initChart() {const chartDom = this.$refs.chart; // 通過 ref 獲取 DOMif (chartDom) {this.chartInstance = echarts.init(chartDom); // 初始化 ECharts 實例this.updateChart(); // 更新圖表} else {console.error("圖表容器未找到");}},updateChart() {let option = {};switch (this.type) {case 'timeLine':option = this.getTimeLineDataTicks();break;// 省略其他 casedefault:console.warn(`不支持的圖表類型: ${this.type}`);}if (option && this.chartInstance) {this.chartInstance.setOption(option); // 設置圖表配置項}},
}
handleResize: 當窗口大小變化時，調用圖表實例的resize方法讓圖表自適應。initChart: 使用this.$refs.chart獲取 DOM 元素，調用echarts.init方法來初始化 ECharts 實例。updateChart: 根據type判斷要渲染的圖表類型，并調用對應的生成圖表配置的方法，如getTimeLineDataTicks。然后將生成的配置傳入chartInstance.setOption方法，完成圖表的渲染。
5. 圖表配置的生成
接下來，我們來看一個具體的圖表配置生成函數：
getTimeLineDataTicks() {const { source, xName, yName, singleSelect } = this;const xAxis = [];const legend = [];const series = [];this.source.forEach(item => {const date = new Date(item.name);item.name = date.toLocaleString(); if (!xAxis.includes(item.name)) xAxis.push(item.name);if (!legend.includes(item.group)) legend.push(item.group);});legend.forEach(group => {const seriesData = source.filter(item => item.group === group).map(item => item.value);series.push({name: group,type: 'line',data: seriesData,connectNulls: true,showSymbol: true,label: {show: true,position: 'top',formatter: '{c}',},});});return {tooltip: {trigger: 'axis',formatter(params) {let tooltip = `${xName} : ${params[0].name}<br/>`;params.forEach(param => {tooltip += `<span style="background-color:${param.color};"></span>`;tooltip += `${param.seriesName} : ${param.value}<br/>`;});return tooltip;}},legend: {data: legend,selectedMode: singleSelect ? 'single' : 'multiple',},xAxis: {type: 'category',name: xName,data: xAxis,boundaryGap: false,},yAxis: {type: 'value',name: yName,},series: series,};
}
-
getTimeLineDataTicks: 這個方法生成時間軸折線圖的配置項。- 首先從
source中提取 X 軸數據（xAxis）、圖例數據（legend）和每個系列（series）的數據點。 - 使用 ECharts 的配置格式，定義圖表的
tooltip、legend、xAxis和yAxis，最后返回整個圖表的配置對象。
- 首先從
-
tooltip: 鼠標懸停時顯示的提示框，通過formatter方法自定義提示信息。 -
legend: 圖例部分，用戶可以根據圖例顯示或隱藏某些系列的數據。 -
xAxis和yAxis: 定義 X 軸和 Y 軸的樣式與數據。 -
series: 定義圖表中的每個系列數據，這里是折線圖。
6. 樣式部分
<style scoped>
.chart {width: 100%;height: 400px;
}
</style>
- 樣式部分很簡單，我們為
chart容器設置了寬度和高度。
7. 完整的工作流程
- 組件被掛載到 DOM 上后，
mounted鉤子被觸發，調用initChart方法。 - 在
initChart方法中，通過this.$refs.chart獲取圖表的 DOM 容器，并使用echarts.init初始化 ECharts 實例。 - 根據傳入的
type，在updateChart方法中調用不同的圖表配置生成方法（如getTimeLineDataTicks）。 - 生成的配置通過
chartInstance.setOption方法應用到圖表上，最終完成圖表的渲染。 - 當窗口大小發生變化時，
handleResize會自動調整圖表的尺寸。
總結
通過 Vue 和 ECharts 的結合，我們可以輕松實現一個高度可復用的圖表組件。組件化的設計讓我們可以將不同類型的圖表封裝在一起，并且根據傳入的 type 動態渲染出不同的圖表。無論是折線圖、柱狀圖還是復雜的樹狀圖，都能通過 ECharts 強大的圖表配置系統輕松實現。
希望這篇博客能夠幫助你更好地理解如何在 Vue 項目中集成 ECharts，并且為你今后的數據可視化項目提供一些思路和參考。
常見基礎配置)
