echarts饼图图例横向排列横向两行
时间: 2024-02-28 12:51:29 浏览: 37
ECharts是一个基于JavaScript的开源可视化库,用于构建交互式的图表和数据可视化界面。它提供了丰富的图表类型灵活的配置选项,可以满足各种数据展示需求。
在ECharts中,饼图的图例默认是纵向排列的,如果需要将图例横向排列并分为两行,可以通过设置legend的orient属性和legend的formatter属性来实现。
具体步骤如下:
1. 设置legend的orient属性为'horizontal',表示图例横向排列。
2. 设置legend的formatter属性为一个函数,用于自定义图例的显示内容。
以下是一个示例代码:
```javascript
option = {
// 其他配置项...
legend: {
orient: 'horizontal', // 设置图例横向排列
formatter: function(name) {
// 自定义图例的显示内容
if (name.length > 10) {
return name.substring(0, 10) + '\n' + name.substring(10);
} else {
return name;
}
}
},
series: [
{
type: 'pie',
// 其他配置项...
}
]
};
```
在上述示例中,通过设置legend的orient属性为'horizontal',将图例横向排列。同时,通过设置legend的formatter属性为一个函数,对图例的显示内容进行自定义。在这个示例中,如果图例名称超过10个字符,则将其分为两行显示。
希望以上信息对您有帮助!如果您还有其他问题,请随时提问。