要
Echarts 中
添加图例（
legend），可以通过以下步骤完成：
1. 在
Echarts 中定义
图例的样式和位置。例如：
```
legend: {
data: ['销量'],
align: 'left',
left: 10
},
```
上述代码中，我们定义了一个
图例，它的数据为 `"销量"`，位置在左侧，距离左边界为 `10`。
2. 在
Echarts 中定义数据系列（series）的名称和类型，并将它们与
图例关联起来。例如：
```
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
```
上述代码中，我们定义了一个数据系列，它的名称为 `"销量"`，类型为 `bar`，数据为 `[5, 20, 36, 10, 10, 20]`。这个数据系列与
图例中的 `"销量"` 关联起来。
3. 在 HTML 页面中定义
Echarts 的容器，并引入
Echarts 库和需要的主题。例如：
```
<div id="chart" style="width: 600px; height: 400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/
echarts/5.1.0/
echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/
echarts/5.1.0/theme/light.min.js"></script>
```
上述代码中，我们定义了一个大小为 `600px` x `400px` 的
Echarts 容器，并引入了
Echarts 库和 `light` 主题。
4. 在 JavaScript 中初始化
Echarts 并将数据系列和
图例添加到图表中。例如：
```
var myChart =
echarts.init(document.getElementById('chart'), 'light');
var option = {
legend: {
data: ['销量'],
align: 'left',
left: 10
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
```
上述代码中，我们通过 `
echarts.init()` 方法初始化了
Echarts，并将图表渲染到了指定的容器中。然后，我们定义了一个 `option` 对象，其中包含了
图例和数据系列的配置信息。最后，我们通过 `myChart.setOption()` 方法将 `option` 对象应用到图表中。
这样，就可以在
Echarts 中
添加图例了。如果需要进一步调整
图例的样式和位置，可以在 `
legend` 对象中修改相应的配置信息。
扫一扫
692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
