一、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])
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/249039.html
微信扫一扫 
支付宝扫一扫 