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])
}