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 图表的图例样式进行灵活调整,以达到更好的可视化效果。