- 簡單一點首頁
- 編程
如何優化ECharts圖例展示效果 – 一步步實現圖例分頁
小藍
•
•
編程 當我們需要展示大量的數據時，圖例的展示效果也顯得尤為重要。如果圖例展示不夠清晰，就可能會影響到用戶對數據的理解和分析。本篇文章將著重探討一種優化 ECharts 圖例展示效果的方法 – 一步步實現圖例分頁。
一、為什麼需要圖例分頁
在使用 ECharts 進行大量數據可視化展示時，我們可能需要展示的圖例數量會非常多，如果將它們全部展示在同一個位置，往往會讓圖表顯得很亂。而且，如果我們使用一個滾動條將圖例部分遮蓋起來，則這些圖例顯示的就會丟失，降低數據的解讀效果。因此，將圖例進行分頁就顯得尤為必要。
二、如何實現圖例分頁
在 ECharts 中，我們可以通過添加 legendScroll 組件來進行圖例分頁。圖例分頁的關鍵就在於如何計算當前圖例的顯示區域和需要分頁顯示的區域。下面我們將逐一實現圖例分頁的流程。
1.添加組件
首先，我們需要在 ECharts 的 option 中添加圖例組件，並開啟滾動條功能，代碼如下：
{
...
legend: {
...
type: 'scroll',
pageIcons: {
horizontal: ['<div style="height:10px;width:20px;background-color:red;">
</div>'],
},
...
},
...
}
其中，type 屬性指定圖例類型為滾動類型，pageIcons 屬性為定義翻頁按鈕的圖標樣式。
2.獲取最大寬度和高度
我們需要獲取最大的寬度和高度，用於計算當前圖例的顯示範圍和需要分頁顯示的範圍。代碼如下：
var maxW = 0, maxH = 0;
myChart.getOption().legend.forEach((legend) => {
var obj = myChart._componentsMap[legend.componentIndex];
if (obj.type === 'legend') {
var rect = obj.group.getBoundingRect();
maxW = Math.max(maxW, rect.width);
maxH = Math.max(maxH, rect.height);
}
});
代碼中，我們通過遍歷獲取每個圖例的 BoundingRect 對象，即得到圖例的最大寬度和高度。
3.獲取當前圖例的位置和分頁顯示區域
我們需要計算出當前圖例的位置和需要分頁顯示的區域，代碼如下：
var opts = myChart.getOption(),
legend = opts.legend[0],
obj = myChart._componentsMap[legend.componentIndex],
rect = obj.group.getBoundingRect(),
w = rect.width,
h = rect.height;
var x = legend.left || 0,
y = legend.top || 0;
if (w > maxW) {
var rows = Math.ceil(w / maxW),
cols = Math.ceil(opts.legend[0].data.length / rows),
lineHeight = h + 5,
pageHeight = legend.pageButtonItemGap + (opts.legend[0].pageIcons ? 18 : 0) + lineHeight * opts.legend[0].pageFormatter.totalPages;
y += pageHeight * Math.floor(y / opts.grid[0].height);
}
首先，我們通過 legend.left 和 legend.top 屬性獲取圖例的位置和 size。如果最大寬度小於當前圖例的寬度，則計算出分頁所需的行和列數、行高和分頁區域的高度。隨後計算出當前圖例所在的 y 坐標。
4.設置圖例分頁位置
最後，我們需要設置圖例分頁的位置。ECharts 的圖例分頁插件提供了 setPagePosition 方法來設置分頁模塊的位置，代碼如下：
var pageSelector = '.ec-legend-page';
if (myChart._dom) {
var pageDom = myChart._dom.querySelector(pageSelector);
if (pageDom) {
pageDom.style.bottom = 0;
pageDom.style.left = x + 'px';
pageDom.style.top = (y + h) + 'px';
pageDom.style.right = '';
}
}
代碼中，我們獲取分頁模塊的 DOM 元素，並設置其位置。值得注意的是，由於 ECharts 的分頁模塊初始狀態是隱藏的，因此需要在圖例分頁方法調用後再測定位置。
三、分頁效果展示
最後，讓我們來看一下完整的 Echarts 圖例分頁示例。以下代碼用於載入 Echarts 並使用如下數據進行圖例展示：
var data = [];
for (var i = 0; i < 1000; i++) {
data.push('數據' + i);
}
var option = {
...
legend: [{
data: data,
top: 20,
type: 'scroll'
}],
...
};
下圖為原始數據的圖例展示效果：
由於數據量過大，圖例的展示十分混亂，無法轉譯數據意義。當我們使用圖例分頁功能後，我們可以得到以下效果：
分頁後的圖例清晰、易讀，提高了數據的解讀效率。
總結
本文通過一步步的實現圖例分頁，為大家展示了如何優化 ECharts 圖例展示效果。通過設置圖例分頁，我們可以更加清晰地展示大量的數據。希望本文能夠對廣大開發者有所幫助。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/284994.html
微信掃一掃 
支付寶掃一掃 