ECharts环形图显示百分比

作者:谁偷走了我的奶酪2024.01.29 10:50浏览量:24

简介:ECharts是一个使用JavaScript实现的开源可视化库,可以轻松创建各种类型的图表,包括环形图。在环形图中显示百分比,可以通过设置tooltip和series中的数据来实现。

千帆应用开发平台“智能体Pro”全新上线 限时免费体验

面向慢思考场景,支持低代码配置的方式创建“智能体Pro”应用

立即体验

在ECharts中,创建一个环形图并显示百分比需要设置tooltipseries中的数据。以下是一个示例代码:

  1. option = {
  2. title: {
  3. text: '工作量统计',
  4. left: 'center'
  5. },
  6. tooltip: {
  7. trigger: 'item',
  8. formatter: '{b}: {c} ({d}%)'
  9. },
  10. legend: {
  11. show: true,
  12. orient: 'horizontal',
  13. left: 'left'
  14. },
  15. series: [
  16. {
  17. name: '工作量统计',
  18. type: 'pie',
  19. radius: '55%',
  20. data: [
  21. { value: 1048, name: 'A' },
  22. { value: 735, name: 'B' },
  23. { value: 580, name: 'C' },
  24. { value: 484, name: 'D' },
  25. { value: 300, name: 'E' }
  26. ]
  27. }
  28. ]
  29. };

在这个示例中,tooltipformatter属性用于格式化提示框的显示内容。其中,{b}表示当前数据项的名称,{c}表示当前数据项的值,{d}%表示当前数据项占全部数据的百分比。在series中,type设置为pie表示创建环形图,radius设置为'55%'表示饼图的半径为可视区尺寸的55%。最后,在data数组中定义每个数据项的值和名称。
通过这个示例代码,你可以在ECharts中创建一个环形图并显示百分比。你可以根据自己的需求修改代码中的选项和数据,以适应你的具体场景。记住,ECharts提供了丰富的配置项和数据类型,你可以根据官方文档进一步了解和探索更多高级功能。

article bottom image

相关文章推荐

发表评论