JS echarts饼图legend位置调整
时间: 2023-06-28 20:14:40 浏览: 56
在 echarts 中,可以通过设置 legend 的 x、y 属性来调整饼图的图例位置。例如,可以通过以下代码将图例位置设置为饼图的右侧:
```
option = {
legend: {
orient: 'vertical',
left: 'right',
},
series: [
{
type: 'pie',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
```
其中,`orient: 'vertical'` 表示图例以垂直方向排列,`left: 'right'` 表示图例位于饼图的右侧。你可以根据需要自行调整 `left` 和 `top` 属性的值来调整图例位置。
相关问题
JS echarts饼图legend位置调整到左侧垂直居中
要将 Echarts 饼图的 legend 位置调整到左侧垂直居中,可以通过设置 Echarts 相应的配置项来实现。具体操作如下:
1. 在 Echarts 的 option 中添加 legend 配置项,设置 orient 为 'vertical',并设置 left 和 top 分别为 'left' 和 'center',如下所示:
```
option = {
// 其他配置项
legend: {
orient: 'vertical',
left: 'left',
top: 'center',
},
// 其他配置项
}
```
2. 这样就可以将 legend 的位置设置为左侧垂直居中了。如果还需要调整 legend 的样式,可以在 legend 中添加相应的配置项,例如 textStyle 来设置文字样式。完整的配置项如下:
```
option = {
// 其他配置项
legend: {
orient: 'vertical',
left: 'left',
top: 'center',
textStyle: {
color: '#333',
fontSize: 14,
},
},
// 其他配置项
}
```
echarts 饼图 legend
对于 ECharts 饼图的图例(legend),可以通过配置项中的 `legend` 进行设置。以下是一个简单的示例:
```javascript
option = {
legend: {
data: ['数据一', '数据二', '数据三'] // 图例的数据项
},
series: [
{
name: '饼图',
type: 'pie',
radius: '55%',
data: [
{ value: 335, name: '数据一' },
{ value: 310, name: '数据二' },
{ value: 234, name: '数据三' }
]
}
]
};
```
在上述示例中,`legend` 配置项中的 `data` 数组用于指定图例的数据项,每个数据项对应饼图中的一个扇区。你可以根据实际需求修改 `data` 数组中的内容。
此外,ECharts 还提供了许多其他的配置选项,例如调整图例的位置、样式等。你可以根据具体需求参考 [ECharts 官方文档](https://echarts.apache.org/zh/option.html#legend) 获取更详细的信息。