上QQ阅读APP看书，第一时间看更新
3.4 图例
在ECharts中，图例组件称为legend，其作用是区分不同的数据展示。下面列举一些常用的参数，具体说明如下。
▪ show：是否显示图例组件，取值为布尔型数据，默认为true。
▪ left：与容器左侧的距离，其取值可以是具体像素值，例如10；也可以是相对于容器的百分比值，例如10%；还可以是更常用的left、center、right，可以理解为左对齐、居中、右对齐。
▪ top：与容器顶部的距离，其取值可以是具体像素值，例如10；也可以是相对于容器的百分比值，例如10%；还可以是更常用的top、middle、bottom，可以理解为处于顶部、处于中部、处于底部。
▪ orient：图例列表的布局朝向，默认是horizontal（水平的），也可以是vertical（竖直的）。
▪ data：图例中的数据数组，通常与数据展示的系列一一对应，具体使用方法可参见下面的例子。
关于参数和配置的更多内容可以在官网的文档（配置项）中查看。
例如在商品可视化时，我们使用柱状图展示商品的销量和进货量，如图3-6所示。
图3-6 图例
这里用不同颜色的柱子分别表示销量和进货量，为了能区分且和名称对应上，需要使用图例。图3-6的图例展示在右上角。
对应的完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!--引入echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<!--为ECharts准备一个具备大小（宽高）的DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
//指定图表的配置项和数据
var option = {
title: {
text: '这是主标题',
subtext: '这是副标题',
left: 'center'//居中显示
},
legend: {
data: ['销量', '进货量'],
left: 'right'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
data: ["产品A","产品B","产品C","产品D","产品E"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [900, 700, 550, 1000, 200]
},
{
name: '进货量',
type: 'bar',
data: [1000, 800, 700, 1300, 400]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
这里使用了柱状图，需要注意的是，在option的series中包含两项，分别是销量和进货量的数据，而这两部分的name参数与legend中数组的名称一一对应，保证了可视化图例中的文字和系列能够对应上。