Echarts图的tooltip提示框自定义展示各类数据

需求：要求提示框显示统计值(统计值 = 分子/分母)外，还要展示分子和分母的数据

        最开始以为Echarts图的series中data数据，只能是：

series: [{
    data: [
        // 维度X   维度Y   其他维度 ...
        [  3.4,    4.5,   15,   43],
        [  4.2,    2.3,   20,   91],
        [  10.8,   9.5,   30,   18],
        [  7.2,    8.8,   18,   57]
    ]
}]

这样只能显示这几种数据，唯一的数值就是data中的值。。。

解决：

data数据，可以是这种，其实完全自定义的

series: [{
  name: '嗒嗒嗒',
  data: [
    { value: 66.67, fenzi: 20, fenmu: 30 },
    { value: 50.00, fenzi: 20, fenmu: 40 },
    { value: 33.33, fenzi: 30, fenmu: 90 },
    { value: 66.67, fenzi: 40, fenmu: 60 },
    { value: 40.00, fenzi: 20, fenmu: 50 },],
  type: "line"
}]

然后在tooltip的formatter中的params中可以拿到，格式再组装一下就好

formatter: function (params) {
  debugger
  let tip = ''
  if (params != null && params.length > 0) {
    tip += params[0].name + '<br />'
    for (let i = 0; i < params.length; i++) {
      let value = params[i].value
      tip += params[i].marker + params[i].seriesName + '：'
        + (value ? value + '% ' : '-')
        + `分子:${params[i].data.fenzi} 分母:${params[i].data.fenmu}`
        + '<br />'
    }
  }
  return tip
}

 效果就是这样的：