ECharts环形图显示百分比
2024.01.29 10:50浏览量:24简介:ECharts是一个使用JavaScript实现的开源可视化库,可以轻松创建各种类型的图表,包括环形图。在环形图中显示百分比,可以通过设置tooltip和series中的数据来实现。
千帆应用开发平台“智能体Pro”全新上线 限时免费体验
面向慢思考场景,支持低代码配置的方式创建“智能体Pro”应用
在ECharts中,创建一个环形图并显示百分比需要设置tooltip
和series
中的数据。以下是一个示例代码:
option = {
title: {
text: '工作量统计',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
show: true,
orient: 'horizontal',
left: 'left'
},
series: [
{
name: '工作量统计',
type: 'pie',
radius: '55%',
data: [
{ value: 1048, name: 'A' },
{ value: 735, name: 'B' },
{ value: 580, name: 'C' },
{ value: 484, name: 'D' },
{ value: 300, name: 'E' }
]
}
]
};
在这个示例中,tooltip
的formatter
属性用于格式化提示框的显示内容。其中,{b}
表示当前数据项的名称,{c}
表示当前数据项的值,{d}%
表示当前数据项占全部数据的百分比。在series
中,type
设置为pie
表示创建环形图,radius
设置为'55%'
表示饼图的半径为可视区尺寸的55%。最后,在data
数组中定义每个数据项的值和名称。
通过这个示例代码,你可以在ECharts中创建一个环形图并显示百分比。你可以根据自己的需求修改代码中的选项和数据,以适应你的具体场景。记住,ECharts提供了丰富的配置项和数据类型,你可以根据官方文档进一步了解和探索更多高级功能。

发表评论
登录后可评论,请前往 登录 或 注册