echarts 图列放下面
时间: 2023-10-08 18:09:47 浏览: 125
要将 ECharts 图例放在图表下方,你可以使用 ECharts 的 grid 组件和 legend 组件来实现。首先,需要创建一个 grid 组件,并将其设置为包含图表和图例的容器。然后,将图表放在 grid 的上方,将图例放在 grid 的下方。下面是一段示例代码:
```javascript
// 创建一个包含图表和图例的容器
var gridContainer = echarts.init(document.getElementById('grid-container'));
// 设置 grid 组件
gridContainer.setOption({
grid: {
top: '10%', // 调整顶部距离以给图例留出空间
bottom: '20px' // 调整底部距离以给 X 轴留出空间
},
legend: {
orient: 'horizontal',
bottom: '0', // 将图例放在底部
itemWidth: 10, // 设置图例项的宽度
itemHeight: 10, // 设置图例项的高度
data: ['图例1', '图例2', '图例3'] // 图例项的数据
},
xAxis: {
type: 'category',
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
},
yAxis: {
type: 'value'
},
series: [{
name: '图例1',
type: 'bar',
data: [10, 20, 30, 40, 50]
}, {
name: '图例2',
type: 'bar',
data: [20, 30, 40, 50, 60]
}, {
name: '图例3',
type: 'bar',
data: [30, 40, 50, 60, 70]
}]
});
// 渲染图表
gridContainer.render();
```
在上面的示例代码中,我们使用了一个 grid 组件来包含图表和图例,并将图例放在底部。你可以根据实际需要调整 grid 的位置和大小,以及图例的样式和位置。记得将其中的数据和图表类型等根据你的实际情况进行修改。
阅读全文