ECharts中Legend的使用指南

一、Legend太多換行

在圖表中，當Legend項過多時，Legend會自動換行。可以通過設置legend的orient屬性來控制換行的方向。例如：

legend: {
    orient: 'vertical'，
    ...
}

二、Legend換行

在Legend項中，也可以通過文字中加入換行標籤’\n’來實現手動換行。例如：

data: ['one', 'two\nLine2', 'three', 'four\nLine2']

三、Legend字體顏色

通過設置textStyle屬性來修改Legend中的字體顏色和大小。例如：

textStyle: { color: 'blue', fontSize: '14' }

四、Legend是幹什麼的

在ECharts中，Legend為圖表中各個系列的標識符。用戶可以通過點擊Legend項來顯示或隱藏系列。同時，Legend也可以通過修改圖例內容、顏色等來自定義圖表效果。

五、Legend位置

在ECharts中，Legend可以通過設置right, left, top, bottom屬性來設置位置。例如：

legend: { right: '10px', top: '30px' }

六、Legend數據固定

在ECharts中，可以通過設置selected屬性來固定Legend的顯示。例如：

selected: { 'series1': true, 'series2': false }

七、Legend太多分頁

在ECharts中，當數據過多無法全部顯示在Legend中，Legend會自動分頁。用戶可以通過設置pageButtonPosition屬性來控制分頁按鈕的顯示位置。例如：

legend: { pageButtonPosition: 'bottom' }

八、Legend屬性

在ECharts中，Legend還有許多其他屬性可以配置，例如padding、backgroundColor、borderColor等。可以根據具體需求進行配置。

九、Legend中icon空心圓

ECharts提供了多種圖標形狀作為Legend的標識符。其中，空心圓為默認標識符。可以通過設置itemStyle屬性來修改空心圓的大小和顏色。例如：

itemStyle: { 
    borderWidth: 2, 
    borderColor: 'gray', 
    color: 'white',
    borderType: 'dashed', 
    opacity: 0.7 
}

十、Legend增加內容

ECharts允許用戶自定義Legend的內容。例如，可以讓Legend中不僅包含系列名稱，還可以加上數據單位等信息。可以通過formatter屬性和回調函數來實現。例如：

formatter: function (name) {
    return name + '\n' + 'Max: ' + Math.max(...data[name]) + '\n' + 'Min: ' + Math.min(...data[name])
}