echarts柱状图的图例竖着排
时间: 2023-10-11 17:07:16 浏览: 60
您可以使用 ECharts 提供的 legend.orient 属性来设置图的方向。将其设置为 'vertical 可以使图例竖直排列。
例如,在 ECharts 中创建一个柱状图,并将图例设置为竖直排列,可以按照以下步骤进行:
1. 首先,在 HTML 文件中引入 ECharts 的 JavaScript 文件:
```html
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
```
2. 创建一个具有固定大小的 DOM 容器,用于显示图表:
```html
<div id="chart" style="width: 600px; height: 400px;"></div>
```
3. 在 JavaScript 文件中编写代码来生成图表:
```javascript
// 初始化图表容器
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
// 配置图表选项
var option = {
legend: {
orient: 'vertical', // 设置图例方向为竖直排列
right: 10, // 可调整图例在容器中的位置
top: 10,
},
// 其他配置项...
};
// 使用配置项生成图表
myChart.setOption(option);
```
通过设置 `legend.orient` 属性,您可以将图例设置为竖直排列。右侧的 `right` 和 `top` 属性可以用于调整图例在容器中的位置。您可以根据需要进行微调。