ECharts图表图例知识点小结
ECharts 图表图例简述
一、知识点
1. 作用：
- 用于标识图表中的不同系列，帮助用户理解图表所展示的数据内容。
2. 位置：
- 可以通过配置项设置图例的位置，如 top 、 bottom 、 left 、 right 等。
3. 显示状态控制：
- 可以通过点击图例项来控制对应系列的显示与隐藏。
4. 样式设置：
- 可以设置图例的字体、颜色、大小等样式。
- 可以设置图例项的间距、对齐方式等。
二、实例
1. 简单柱状图图例：
option = {
xAxis: {
type: 'category',
data: ['苹果', '香蕉', '橙子']
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'bar',
data: [120, 80, 90]
}
],
legend: {
bottom: '5%',
left: 'center',
data: ['销量']
}
};
在这个例子中，柱状图的图例显示在底部居中位置，标识了图表中的系列名称为“销量”。
2. 多个系列折线图图例：
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五']
},
yAxis: {
type: 'value'
},
series: [
{
name: '系列 1',
type: 'line',
data: [10, 20, 15, 25, 30]
},
{
name: '系列 2',
type: 'line',
data: [15, 25, 20, 30, 35]
}
],
legend: {
top: '5%',
right: '5%',
data: ['系列 1', '系列 2']
}
};
此例中，折线图有两个系列，图例显示在右上角，分别标识了“系列 1”和“系列 2”。
通过以上知识点简述，可以更好地理解和使用 ECharts 图表的图例功能。
ECharts图表图例配置
在 ECharts 中，图例的样式可以通过多种方式进行设置。以下是一些主要的样式设置方法：
一、字体样式
可以设置图例的字体相关属性，如：
- textStyle.color ：设置图例文字的颜色。例如： textStyle: { color: '#333' } ，将图例文字颜色设置为灰色。
- textStyle.fontSize ：设置字体大小。例如： textStyle: { fontSize: 14 } ，设置字体大小为 14 像素。
- textStyle.fontWeight ：设置字体粗细。可以是 normal （正常）、 bold （粗体）等。例如： textStyle: { fontWeight: 'bold' } ，设置为粗体。
二、背景样式
- legend.backgroundColor ：设置图例的背景颜色。如： backgroundColor: 'rgba(255, 255, 255, 0.8)' ，设置为半透明白色背景。
- legend.borderColor ：设置图例边框颜色。例如： borderColor: '#999' ，设置边框为灰色。
- legend.borderWidth ：设置边框宽度。例如： borderWidth: 1 ，设置边框宽度为 1 像素。
三、间距和对齐方式
- legend.itemGap ：设置图例项之间的间距。例如： itemGap: 10 ，设置间距为 10 像素。
- legend.align ：设置图例的对齐方式，可以是 left 、 right 、 center 。例如： align: 'right' ，将图例对齐到右侧。
四、图标样式
- legend.icon ：可以设置图例项的图标类型，如 'circle' （圆形）、 'rect' （矩形）、 'roundRect' （圆角矩形）等。例如： icon: 'circle' ，设置图标为圆形。
五、交互样式
- legend.inactiveColor ：设置图例项在不活动状态下的颜色。例如：当对应的系列被隐藏时，该图例项的文字颜色会变为这个设置的值。
- legend.selectedMode ：设置图例的选择模式，可以是 single （单选）、 multiple （多选）等，影响用户点击图例项时的交互行为。
通过以上各种设置方法，可以根据具体需求对 ECharts 图表的图例样式进行灵活调整，以达到更好的可视化效果。