echarts饼图formatter渲染表格

ECharts 饼图的 formatter 属性可以用于渲染表格。以下是一个示例：

// 饼图数据
var data = [
  { value: 335, name: '直接访问' },
  { value: 310, name: '邮件营销' },
  { value: 234, name: '联盟广告' },
  { value: 135, name: '视频广告' },
  { value: 1548, name: '搜索引擎' }
];

// 表格数据
var tableData = [];
for (var i = 0; i < data.length; i++) {
  var item = data[i];
  tableData.push({
    name: item.name,
    value: item.value,
    percent: item.value / 2752 * 100 + '%'
  });
}

// 饼图配置项
var option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '50%',
      data: data,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        formatter: '{b}: {c} ({d}%)'
      }
    }
  ]
};

// 渲染表格
var table = '<table>' +
  '<tr><th>名称</th><th>数值</th><th>百分比</th></tr>';
for (var i = 0; i < tableData.length; i++) {
  var item = tableData[i];
  table += '<tr><td>' + item.name + '</td><td>' +
    item.value + '</td><td>' + item.percent + '</td></tr>';
}
table += '</table>';
document.getElementById('table').innerHTML = table;

// 渲染饼图
var myChart = echarts.init(document.getElementById('pie'));
myChart.setOption(option);

在上面的示例中，我们将饼图的数据转换为表格数据，并使用字符串拼接的方式生成了一个 HTML 表格。最后，将生成的表格插入到页面中的某个元素中。

在 formatter 中，我们使用了 `{a}`、`{b}`、`{c}` 和 `{d}` 这些占位符来获取提示框的数据。其中，`{a}` 表示系列名称，`{b}` 表示数据项名称，`{c}` 表示数据项值，`{d}` 表示百分比。在饼图的 label 中，我们也使用了 `{b}`、`{c}` 和 `{d}` 这些占位符来显示数据项名称、数据项值和百分比。