echarts饼状图图例换行对齐
时间: 2024-09-26 18:10:26 浏览: 26
ECharts是一款常用的JavaScript图表库,创建饼状图时,如果图例项过多导致无法在一排显示完全,可以设置图例的换行和对齐方式使其更易读。你可以通过`legend`配置对象来调整:
```javascript
var option = {
legend: {
data: ['数据1', '数据2', '数据3', '数据4', '数据5'], // 图例项列表
orient: 'vertical', // 设置图例垂直布局
layout: 'top', // 或者 'bottom' 或 'right', 指定换行后的位置
align: 'left', // 对齐方式,如 left, right, center,默认居中
itemGap: 10, // 每行图例之间的间距
formatter: function(name) { // 自定义每个图例文本的内容(例如使用 HTML)
return '<span style="display: inline-block;margin-right: 5px">' + name + '</span>';
}
},
series: [
{
type: 'pie',
radius: '60%',
data: [...],
label: {
normal: {
show: true,
position: 'center'
}
}
}
]
};
```
上述配置会让图例换行显示并保持左侧对齐,每个图例项之间有间隙。记得替换`data`和自定义内容部分为你实际需要的项。