優化 ECharts 多條折線：折線數據不完整導致的X軸日期錯亂問題

一、簡單介紹

1.1 常見類型

二、時間軸錯亂問題

2.1 示例

2.2 示例完整代碼

2.3 問題分析

2.4 修復方法

第一步

第二步

2.5 優化后完整代碼

一、簡單介紹

ECharts 是一款基于 JavaScript 的數據可視化圖表庫，動態圖表是 ECharts 的一個重要應用場景，它可以讓數據展示更加生動、直觀，幫助用戶更好地理解數據的變化趨勢。以下是關于 ECharts 動態圖表的詳細介紹：

1.1 常見類型

動態折線圖：展示數據隨時間或其他連續變量的變化趨勢，比如股票價格走勢、氣溫變化等。動態折線圖可以通過定時更新數據，實時反映最新的變化情況。
動態柱狀圖：用于對比不同類別數據的數值大小。動態效果可以是柱狀圖的增長、縮短，或者柱狀圖的順序變換等，常用于展示數據的實時排名、銷售業績的動態對比等。
動態餅圖：突出顯示各部分在總體中所占的比例。動態效果可以是扇區的大小變化、顏色閃爍等，適合用于展示市場份額的動態變化、不同類別數據占比的實時調整等。
動態散點圖：可以展示多個變量之間的關系，通過動態效果（如散點的移動、閃爍）來反映數據的實時變動，常用于分析數據的相關性、異常值的動態監測等。

二、時間軸錯亂問題

2.1 示例

Examples - Apache ECharts參考：Examples - Apache ECharts

這是一幅多條折線組成的通過率趨勢圖，用于展示不同類別（1-1、1-2、1-3 ）在多個時間節點（橫軸日期）的通過率變化情況。

可以發現，頁面出現了時間軸順序錯亂的效果，X 軸日期因字符串排序導致邏輯混亂，日期 0516 本應在 0627 之前，但圖表中顯示在最右側，導致時間邏輯混亂。

2.2 示例完整代碼

以下是一個完整的 HTML 示例，包含原始數據亂序、排序后再渲染圖表的過程：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>折線圖</title><!-- 引入 ECharts CDN --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/dayjs/dist/dayjs.min.js"></script><style>/* 給兩個圖表容器設置樣式，避免重疊 */.chart-container {width: 800px; height: 500px; margin-bottom: 30px; /* 上下圖表間距 */}</style>
</head>
<body><!-- 圖表容器 --><div id="chart1" class="chart-container"></div><script>// ===================== 數據及圖表配置 =====================const rawData1 = [['日期', '模塊', '通過率'],// Phone - -1['0418', '1-1', 98],['0422', '1-1', 97],['0425', '1-1', 96],['0429', '1-1', 96],['0513', '1-1', 99],['0516', '1-1', '-'],['0523', '1-1', 39],['0527', '1-1', 96],['0530', '1-1', 96],['0603', '1-1', 98],['0627', '1-1', ],['0418', '1-2', 98],['0422', '1-2', 98],['0425', '1-2', 96],['0429', '1-2', 98],['0513', '1-2', 100],['0516', '1-2', 97],['0523', '1-2', 89],['0527', '1-2', 98],['0530', '1-2', 98],['0603', '1-2', 100],['0627', '1-2', 95],['0418', '1-3', 89],['0422', '1-3', 93],['0425', '1-3', 89],['0429', '1-3', 93],['0513', '1-3', 97],['0516', '1-3', '-'],['0523', '1-3', 90],['0527', '1-3', 95],['0530', '1-3', 95],['0603', '1-3', 91],['0627', '1-3', 92],['0418', '1-4', 95],['0422', '1-4', 93],['0425', '1-4', 96],['0429', '1-4', 93],['0513', '1-4', 97],['0516', '1-4', '-'],['0523', '1-4', 95],['0527', '1-4', 93],['0530', '1-4', 96],['0603', '1-4', 94],['0627', '1-4', '-'],];// 數據預處理：過濾無效值function filterData(data){return data.filter((row, index) => {if (index === 0) return true;     // 跳過表頭 & 通過率為'-'的項return row[2] !== '-'; });}// ===================== 通用圖表渲染函數 =====================/*** 渲染 ECharts 折線圖* @param {string} domId - 容器 DOM ID* @param {array} data - 原始數據（格式：[['日期','維度','值'], ...]）* @param {string} groupKey - 分組維度（如 '模塊' 或 '機型_模塊'）* @param {string} titleText - 圖表標題*/function renderEChart(domId, data, groupKey, titleText) {const myChart = echarts.init(document.getElementById(domId));const groups = [...new Set(data.map(item => item[1]))]; // 提取分組（如模塊、機型_模塊）const datasetWithFilters = [];const seriesList = [];groups.forEach(group => {const datasetId = `dataset_${group}`;datasetWithFilters.push({id: datasetId,fromDatasetId: 'dataset_raw',transform: {type: 'filter',config: { dimension: groupKey, '=': group }}});seriesList.push({type: 'line',datasetId: datasetId,showSymbol: true,name: group,endLabel: {show: true,formatter: (params) => `${params.value[1]}`},emphasis: { focus: 'series' },encode: {x: '日期',y: '通過率',label: [groupKey, '通過率'],itemName: '日期',tooltip: ['通過率'],seriesName: '模塊'}});});const option = {animationDuration: 2000,seriesLayoutBy: 'seriesName',dataset: [{ id: 'dataset_raw', source: data },...datasetWithFilters],title: { text: titleText, left: 'center' },tooltip: {trigger: 'axis', order: 'valueDesc',axisPointer: { type: 'shadow' } // 鼠標指向時顯示陰影指示器，增強交互},xAxis: { type: 'category',nameLocation: 'middle'},yAxis: {type: 'value',name: '通過率(%)',min: 10, // 過濾過低無效值（如測試階段的異常值）max: 100, // 固定最大值為 100%，避免刻度溢出interval: 10 // 刻度間隔設為 10%，減少刻度密度},grid: {right: 150, // 從 100 調整為 150，增加右側空間left: 60, // 左側預留足夠空間顯示 Y 軸名稱top: 50,bottom: 80 // 底部增加空間，避免 X 軸日期重疊},series: seriesList};myChart.setOption(option);}// ===================== 調用函數渲染圖表 =====================renderEChart('chart1', filterData(rawData1),'模塊', '通過率趨勢');</script>
</body>
</html>

2.3 問題分析

多條折線的data中存在“-”，是因為我想要展示有的折線不存在該日期的數據，使用“-”來表示無數據情況。

從代碼中可以看出?X 軸繪制是用的category 類型，是直接賦值渲染。category 類型的 X 軸，會嚴格按照 xAxis.data 數組的順序展示類目。

發現直接賦值渲染，則頁面會出現時間軸順序錯亂的效果。?

2.4 修復方法

第一步

重新修改折線圖數據規則：需展示全量日期序列，無對應值的日期保留空數據占位。

例如，折線中的某一天數據為['0516', '1-3', '-'],時，其完整數據需包含所有日期節點，無值節點以空項填充，最終格式['0516', '1-3', ]。如下圖所示，

修改后保存html文件，重新用瀏覽器打開。

經過第一步修改后的展示效果如下圖所示。

當前展示效果中，X 軸的日期能按正常邏輯顯示，但 1-1、1-3、1-4折線圖都因存在無對應值的日期節點（數據中以空項形式呈現），在可視化呈現時出現了折線斷裂（斷層）的情況；而 1-2 折線圖由于數據完整度較好，未出現此類問題，展示狀態正常。

第二步

參考：Documentation - Apache ECharts? 配置文件

經過第一步修改后的展示效果中出現折線斷裂情況。是因為，ECharts中的默認行為是若數據中存在 null（或空值占位），折線會在 null 處斷裂，不連接兩側的有效點。

我們可以使用connectNulls這個屬性來解決。

在 ECharts 中，connectNulls 是系列（series） 的配置屬性，用于設置是否連接折線圖中 null 數據點兩側的有效數據點。而connectNulls: true 是 ECharts 中折線圖（line 系列）的關鍵配置，用于控制包含 null 數據點時，折線是否連接兩側的有效數據，解決折線 “斷層” 問題。

具體修改方法如下，

修改后保存html文件，重新用瀏覽器打開。

經過第二步修改后的展示效果如下圖所示。

從展示效果來看， X 軸呈現的是從 0418 到 0627 的時間序列，此前因日期以字符串形式按字典序排序出現亂序狀況。經修復后，如今日期已能依照正常的時間邏輯有序排列，保障了時間維度展示的準確性，為基于時間序列分析各系列通過率趨勢筑牢基礎，讓數據隨時間的變化呈現更貼合實際業務進程。

2.5 優化后完整代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>折線圖</title><!-- 引入 ECharts CDN --><script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/dayjs/dist/dayjs.min.js"></script><style>/* 給兩個圖表容器設置樣式，避免重疊 */.chart-container {width: 800px; height: 500px; margin-bottom: 30px; /* 上下圖表間距 */}</style>
</head>
<body><!-- 圖表容器 --><div id="chart1" class="chart-container"></div><script>// ===================== 數據及圖表配置 =====================const rawData1 = [['日期', '模塊', '通過率'],// Phone - -1['0418', '1-1', 98],['0422', '1-1', 97],['0425', '1-1', 96],['0429', '1-1', 96],['0513', '1-1', 99],['0516', '1-1', ],['0523', '1-1', 39],['0527', '1-1', 96],['0530', '1-1', 96],['0603', '1-1', 98],['0627', '1-1', ],['0418', '1-2', 98],['0422', '1-2', 98],['0425', '1-2', 96],['0429', '1-2', 98],['0513', '1-2', 100],['0516', '1-2', 97],['0523', '1-2', 89],['0527', '1-2', 98],['0530', '1-2', 98],['0603', '1-2', 100],['0627', '1-2', 95],['0418', '1-3', 89],['0422', '1-3', 93],['0425', '1-3', 89],['0429', '1-3', 93],['0513', '1-3', 97],['0516', '1-3', ],['0523', '1-3', 90],['0527', '1-3', 95],['0530', '1-3', 95],['0603', '1-3', 91],['0627', '1-3', 92],['0418', '1-4', 95],['0422', '1-4', 93],['0425', '1-4', 96],['0429', '1-4', 93],['0513', '1-4', 97],['0516', '1-4', ],['0523', '1-4', 95],['0527', '1-4', 93],['0530', '1-4', 96],['0603', '1-4', 94],['0627', '1-4', ],];// 數據預處理：過濾無效值function filterData(data){return data.filter((row, index) => {if (index === 0) return true;     // 跳過表頭 & 通過率為'-'的項return row[2] !== '-'; });}// ===================== 通用圖表渲染函數 =====================/*** 渲染 ECharts 折線圖* @param {string} domId - 容器 DOM ID* @param {array} data - 原始數據（格式：[['日期','維度','值'], ...]）* @param {string} groupKey - 分組維度（如 '模塊' 或 '機型_模塊'）* @param {string} titleText - 圖表標題*/function renderEChart(domId, data, groupKey, titleText) {const myChart = echarts.init(document.getElementById(domId));const groups = [...new Set(data.map(item => item[1]))]; // 提取分組（如模塊、機型_模塊）const datasetWithFilters = [];const seriesList = [];groups.forEach(group => {const datasetId = `dataset_${group}`;datasetWithFilters.push({id: datasetId,fromDatasetId: 'dataset_raw',transform: {type: 'filter',config: { dimension: groupKey, '=': group }}});seriesList.push({type: 'line',connectNulls: true,datasetId: datasetId,showSymbol: true,name: group,endLabel: {show: true,formatter: (params) => `${params.value[1]}`},emphasis: { focus: 'series' },encode: {x: '日期',y: '通過率',label: [groupKey, '通過率'],itemName: '日期',tooltip: ['通過率'],seriesName: '模塊'}});});const option = {animationDuration: 2000,seriesLayoutBy: 'seriesName',dataset: [{ id: 'dataset_raw', source: data },...datasetWithFilters],title: { text: titleText, left: 'center' },tooltip: {trigger: 'axis', order: 'valueDesc',axisPointer: { type: 'shadow' } // 鼠標指向時顯示陰影指示器，增強交互},xAxis: { type: 'category',nameLocation: 'middle'},yAxis: {type: 'value',name: '通過率(%)',min: 10, // 過濾過低無效值（如測試階段的異常值）max: 100, // 固定最大值為 100%，避免刻度溢出interval: 10 // 刻度間隔設為 10%，減少刻度密度},grid: {right: 150, // 從 100 調整為 150，增加右側空間left: 60, // 左側預留足夠空間顯示 Y 軸名稱top: 50,bottom: 80 // 底部增加空間，避免 X 軸日期重疊},series: seriesList};myChart.setOption(option);}// ===================== 調用函數渲染圖表 =====================renderEChart('chart1', filterData(rawData1),'模塊', '通過率趨勢');</script>
</body>
</html>

通過以上步驟，就能解決 category 類型 X 軸顯示亂序的問題，讓 X 軸按照你期望的固定順序展示類目啦。