本文详细介绍ECharts中图例（legend）组件的核心属性与配置方法。内容涵盖多图例布局、滚动翻页功能及类型设置，并通过折柱混搭图实例展示如何配置图例组件。文章提供完整源代码，解析滚动图例的实现细节，帮助开发者掌握ECharts图表交互优化技巧。
ECharts图例组件基础功能
图例（legend）组件是ECharts中广泛使用的功能模块，主要用于通过不同颜色区分系列标记的名称，从而清晰表达数据与图形之间的对应关系。在用户交互方面，点击图例即可控制特定数据系列的显示或隐藏状态。
在ECharts 3.x和4.x版本中，单个ECharts实例支持配置多个图例组件，这为复杂图表的多图例布局提供了便利。当图例项数量较多时，系统支持通过滚动翻页的方式展示所有图例，避免界面拥挤。
图例组件属性配置
ECharts图例组件包含多项可配置属性，具体参数及其含义如相关表格所示。
图例组件各项属性的可视化效果及布局示意图如相关图片所示。
滚动图例实现与源码解析
以下示例利用某年的蒸发量、降水量、最低气温和最高气温数据，绘制折柱混合图表，并配置图例组件。当图例数量过多或单个图例文字过长时，可启用垂直或水平滚动图例，具体配置参考属性。将type属性值设置为“scroll”后，图例将强制显示在一行内，超出部分自动呈现为滚动条效果，视觉效果如相关图片所示。
从图中可见，右上方的滑动图标即为图例的滚动控制按钮，点击该按钮即可实现图例内容的滚动展示。
图例组件的具体实现源代码如下所示：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
color: ["red", 'green', 'blue', 'grey'], //使用自己预定义的颜色
legend: {
orient: 'horizontal', //'vertical'
x: 'right', //'center'|'left'|{number},
y: 'top', //'center'|'bottom'|{number}
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,0.8)',
borderWidth: 4,
padding: 10,
itemGap: 20, textStyle: { color: 'red' },
},
xAxis: { //配置x轴坐标系
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [ //配置y轴坐标系
{ //设置第1条y轴
type: 'value',
axisLabel: { formatter: '{value} ml' }
},
{ //设置第2条y轴
type: 'value',
axisLabel: { formatter: '{value} °C' },
splitLine: { show: false }
}
],
series: [ //配置数据系列
{ //设置数据系列1
name: '某一年的蒸发量', type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
},
{ //设置数据系列2
name: '某一年的降水量', smooth: true,
type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10]
},
{ //设置数据系列3
name: '某一年的最高气温', type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
},
{ //设置数据系列4
name: '某一年的最低气温', smooth: true,
type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
总结
本文介绍了ECharts图例组件的属性配置与源码实现。如需了解更多ECharts图例相关内容，建议查阅本站历史文章或继续浏览后续教程。感谢支持！