Echarts自定义tooltip提示框及图例

Echarts自定义tooltip提示框及图例

解决什么问题

我们在使用Echarts的tooltip时，希望格式化添加单位的同时，每个图例名称前依旧显示图例，但官方自带的格式化会去掉前边的圆形图例，所以统一的写个方法保留图例的同时可以批量的添加单位。

自定义toolTipFormatter方法

const toolTipFormatter = (params, unit) => { // unit添加的单位
  let htmlStr = '';
  for (let i = 0;i < params.length;i++) {
    const param = params[i];
    const xName = param.name; // x轴的名称
    const seriesName = param.seriesName; // 图例名称
    const value = param.value; // y轴值
    const color = param.color; // 图例颜色
    if (value) { // 兼容没有值得情况不显示图例名称和value，同时兼容颜色上有渐变取第一个色值
      if (i === 0) {
        htmlStr = `
          <div style="padding:5px 3px">
            ${xName}<br/>
            <div style="display:flex">
              <div style="width:10px;height:10px;border-radius: 50%;margin:6px 4px 0 0;background:
              ${typeof color === 'string' ? color : color.colorStops[0].color}"></div>
              <div>${seriesName}：${value} ${unit[i] ? unit[i] : ''}</div>
            </div>
        `;
      } else {
        htmlStr += `
          <div style="display:flex">
            <div style="width:10px;height:10px;border-radius: 50%;margin:6px 4px 0 0;background:
            ${typeof color === 'string' ? color : color.colorStops[0].color}"></div>
            <div>${seriesName}：${value} ${unit[i] ? unit[i] : ''}</div>
          </div>
        `;
      }
    }
  }
  htmlStr += `</div>`;
  return htmlStr;
};

使用时传入params和定义的单位数组

tooltip: {
  trigger: 'axis',
  axisPointer: {
    type: 'shadow'
  },
  formatter: (params) => {
    return toolTipFormatter(params, ['千元', '元']); // 传入params和定义的单位数组
  }
}

自定义图例效果