echarts柱状图的图例放右边,
时间: 2025-01-11 18:43:57 浏览: 77
### 调整ECharts柱状图中的图例位置
为了将ECharts柱状图的图例放置在右侧,可以通过修改`legend`组件的相关属性来实现。具体来说,设置`legend`对象内的`right`属性为0或指定像素值可以达到此效果[^1]。
以下是具体的配置方法以及代码示例:
#### 配置说明
- `legend`: 定义图例的内容及其样式。
- `data`: 设置图例的数据项名称列表。
- `orient`: 可选参数,默认'horizontal'(水平),这里应设为'vertical'表示垂直排列。
- `right`: 将图例定位至容器内部靠右的位置;可接受数值(单位px)、百分比字符串形式或其他预定义关键字如'left', 'center', 或者 'right'。
#### 实现代码
```javascript
var option = {
legend: { // 图例组件
orient: 'vertical',
right: '0%', // 放置于右边
data: ['类别A','类别B']
},
xAxis: {
type: 'category',
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {},
series: [
{
name:'类别A',
type:'bar',
data:[120, 200, 150, 80, 70, 110, 130]
},
{
name:'类别B',
type:'bar',
data:[100, 90, 120, 130, 160, 170, 180]
}
]
};
```
通过上述方式即可成功把图例移动到图表的右侧显示。
阅读全文
相关推荐


















