ECharts 悬浮框展示 图系列以外的其他数据的操作办法(数据集DataSet)

335 阅读1分钟

假设有一个场景:
Sooia 1月有1000元,2月有1200元,3月有1800元。用ECharts 柱状图展示Sooia资产的变化趋势。并在悬浮框中(tooltip)显示环比增长率。
以上可转化为表格

月份资产环比增长率
1月1000/
2月120020%
3月180050%

入参用数据集的格式表示:

const data = [    ['月份', '资产', '环比增长率'],
    ['1月', 1000, ''],
    ['2月', 1200, 0.2],
    ['3月', 1800, 0.5]
]

因为要在悬浮框tooltip中展示环比增长率,且在柱状图不体现,所以要自定义formatter回调函数。

const tooltip = {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow',
  },
  formatter: (params) => {
    let html = '';
    html += `${params[0].axisValueLabel}<br>`;
    params.forEach((val) => {
      const { marker, seriesName } = val;
      const value = val.value[val.encode.y[0]];
      if (value === '') {
        html += '';
      } else {
        html += `${marker} ${seriesName}: ${transformNum(value, {
          isThousand: true,
          decimal: 2,
        })} <br>`;
      }
    });
    return html;
  },
};

参考链接: ECharter