echarts饼图显示横向和纵向legend
时间: 2023-07-28 17:43:56 浏览: 91
可以通过设置legend的orient属性来调整图例的显示方向,orient属性的值可以为'horizontal'(横向显示)或'vertical'(纵向显示)。具体实现代码如下:
```
option = {
legend: {
orient: 'horizontal', // 设置图例显示方向为横向
x: 'center',
y: 'bottom',
data:['数据1', '数据2', '数据3', '数据4', '数据5']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
data:[
{value:335, name:'数据1'},
{value:310, name:'数据2'},
{value:234, name:'数据3'},
{value:135, name:'数据4'},
{value:1548, name:'数据5'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
```
以上代码中,legend的orient属性被设置为'horizontal',使得图例横向显示。如果要设置为纵向显示,只需要将orient属性的值设置为'vertical'即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)