圖表--環形圖的百分比顯示

本文章思路來源為項目中的統計頁面環圖沒有顯示百分比。對echarts進行了研究，在項目當中使用較多的屬性等做出了注釋。

echarts示例地址：https://echarts.apache.org/examples/zh/index.html#chart-type-line

代碼如下：

option = {
  title: {
    text: '工作量統計', // 標題
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}:{c} ({d}%)' // b為當前內容（data中的name），c為數值（data中的value），{d}%為當前內容占全部的百分比
  },
  legend: {
    // 圖例
    show: true, // 是否顯示
    orient: 'horizontal', // vertical為豎向排列，horizontal為橫向排列
    left: 'left'
  },
  series: [
    {
      name: '工作量統計',
      type: 'pie', // pie為環形圖，bar為柱狀圖，line為折線圖
      radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
      data: [
        // 數據數組，name 為數據項名稱，value 為數據項值
        { value: 1048, name: 'A' },
        { value: 735, name: 'B' },
        { value: 580, name: 'C' },
        { value: 484, name: 'D' },
        { value: 300, name: 'E' }
      ]
    }
  ]
};

實現顯示百分比的主要代碼為option中的tooltip，對環圖中的數據進行格式化處理，並顯示百分比：

tooltip: {
    trigger: 'item',
    formatter: '{b}:{c} ({d}%)' // b為當前內容（data中的name），c為數值（data中的value），{d}%為當前內容占全部的百分比
  }

效果如下圖：

由上圖可見，A的數值為1048，占了全部數據的33.3%。環圖顯示百分比的效果實現完成