图表--环形图的百分比显示

本文章思路来源为项目中的统计页面环图没有显示百分比。对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%。环图显示百分比的效果实现完成