需求描述

在系统开发中发现ECharts在饼图中的formatter的模板变量d的百分比精度使用的不是四舍五入制的，与系统设计要求不符，所以考虑重新实现formatter。

解决方案

实现代码如下：

export function toDataPie(data, chart) {
   // data是ECharts需要使用到的data数据
   // chart是ECharts的默认配置
   // 重写需要修改的ECharts配置
  if (!data) {
    return chart;
  }
  const arr = [];
  const newChart = _.cloneDeep(chart);
  // total数据值的总和
  let total = 0;
  newChart.series.data = data;
  _.each(data, function (item, index) {
    total += item.value || 0;
    if (item.value == 0) {
      newChart.legend.selected[item.name] = false;
    }
    arr.push(item.name);
  });
  newChart.series.avoidLabelOverlap = true;
  newChart.series.minAngle = 5;
  newChart.legend && newChart.legend.data ? (newChart.legend.data = arr) : '';
  newChart.tooltip.formatter = (info) => {
    // 自定义的字符串模板
    const value = info.value;
    // 对圆饼图的百分比进行四舍五入处理
    const rat = ((parseInt(value) / total) * 100).toFixed(2);
    return `<div><span>${info.seriesName}</span><br/><span>${info.name} : ${value}(${rat}%)</span></div>`;
  };
  return newChart;
}