ECharts饼状图legend显示Value所占百分比

这样写好像麻烦了，此贴记录下当时自己的想法吧，简单的实现可以参考：

饼图legend显示百分比

此项目基于Vue

最近写项目碰到一个需求，需要在legend区域显示Value值所占比例，如下图所示。

---

在查询官方文档的时候，虽然提供了格式化图例文本的回调函数：

// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}

---

但是此函数只能对name进行格式化，无法取到value的值，所以我们可以在option外定义一个data，然后赋值给series.data，下面看代码

export var data = [
  { value: 335, name: '直接访问' },
  { value: 310, name: '邮件营销' }
]
//异步调用接口获取数据后，调用此方法重新为data幅值，由于对js进行了封装，外界无法直接幅值（相当于Setter方法）
export function handleArray(arr) {
  data = arr
}
//求data中value的总和
function arrCount(arr) {
  let count = 0
  arr.forEach(item => {
    count = count + item.value
  })
  return count
}
export default {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    itemGap: 8,
    icon: 'circle',
    bottom: '2%',
    textStyle: {
      color: '#fff'
    },
    //格式化图例文本
    formatter(name) {
      const count = arrCount(data)
      //找到data中name和文本name值相同的对象
      const val = data.filter(item => {
        return item.name === name
      })
      return name + '  ' + ((val[0].value / count).toFixed(4)) * 100 + '%'
    }
  },
  //设置饼状图的颜色
  color: ['#e61145', '#36dcb3', 'yellow', 'blue', 'indigo', 'purple'],
  series: [
    {
      type: 'pie',
      radius: ['50%', '65%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      data: data
    }
  ]
}

以上就实现了百分比的展示，接下来是在Vue中使用

在Vue中导入js文件

import * as pieChart from './chart/pieChart'

初始化图像：

    initPieChart() {
      //pieChart定义在data中（lineChart: null）
      this.pieChart = this.$echarts.init(document.getElementById('pie-chart'))
      this.pieChart.setOption(pieChart.default)
      const _this = this
      window.addEventListener('resize', function() {
        _this.pieChart.resize()
      })
    }

模拟发送请求，动态更新data区数据：

  updateData() {
 	const testData = [
        { value: 3335, name: 't1' },
        { value: 3310, name: 't2' },
        { value: 2334, name: 't3' },
        { value: 1335, name: 't4' },
        { value: 15438, name: 't5' }
      ]
      pieChart.handleArray(testData)
      pieChart.default.series[0].data = pieChart.data
      this.pieChart.setOption(pieChart.default)
   }

到此就结束了~~