【echarts】tooltip 增加单位

单个柱子

登录后复制

const data = [
  {
    value: 1,
    per: 2
  },
  {
    value: 22,
    per: 2
  },
  {
    value: 222,
    per: 3
  }
];

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.

登录后复制

tooltip: {
  trigger: 'axis',
  show: true,
  axisPointer: {
    type: 'line',
    lineStyle: {
      color: 'rgba(0, 0, 0, 0.03)',
      type: 'solid',
      width: 60,
    },
  },
  formatter(params) {
    return `${params[0].name}: ${params[0].value}元 | ${data[params[0].dataIndex].per}%`;
  },
  transitionDuration: 0, // 让toolltip紧跟鼠标，移入页面不抖动
},

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.

多个柱子堆叠

登录后复制

tooltip: {
   trigger: 'axis',
   axisPointer: {
     type: 'shadow',
     label: {
       show: true,
       color: '#4E5258',
     },
   },
   formatter(params) {
     const xname = params[0].axisValue;
     let str = `${xname}<br>`;
     params.forEach((el, index) => {
       str += `${el.marker}${el.seriesName.split('(')[0]}：${el.value}元<br>`;
     });
     return str;
   },
   transitionDuration: 0, // 让toolltip紧跟鼠标，移入页面不抖动
 },

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.

原创作者: u_12881709 转载于: https://blog.51cto.com/u_12881709/11585406