echarts 图例legend添加景
时间: 2023-10-03 13:07:20 浏览: 70
要 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` 对象中修改相应的配置信息。
阅读全文