echarts饼图左侧图右侧文字
时间: 2023-07-08 09:14:15 浏览: 893
ECharts 饼图
5星 · 资源好评率100%
要实现Echarts饼图左侧为图,右侧为文字的效果,可以通过设置Echarts的legend组件和tooltip组件来实现。具体实现步骤如下:
1. 设置legend组件
在Echarts的option中设置legend组件,将其布局方向设置为vertical,位置设置在右侧,并设置legend的itemWidth属性为20,使图例项的宽度变小,腾出更多的空间给饼图。
```
option = {
legend: {
orient: 'vertical',
right: 10,
top: 10,
itemWidth: 20,
data: ['数据1', '数据2', '数据3', '数据4', '数据5']
},
...
}
```
2. 设置tooltip组件
在Echarts的option中设置tooltip组件,将其trigger属性设置为item,使得鼠标悬浮在饼图上时,触发显示tooltip,tooltip的formatter属性设置为{a} <br/>{b} : {c} ({d}%),使得tooltip的显示内容包括饼图的名称、图例项的名称和所占比例。
```
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
...
}
```
通过以上两个步骤,就可以实现Echarts饼图左侧为图,右侧为文字的效果。
阅读全文