ECharts环形图显示百分比

作者：谁偷走了我的奶酪2024.01.29 18:50浏览量：34

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

在ECharts中，创建一个环形图并显示百分比需要设置tooltip和series中的数据。以下是一个示例代码：

  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. };

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

最热文章