自学内容网 自学内容网

【echarts】tooltip 增加单位

单个柱子

在这里插入图片描述

const data = [
  {
    value: 1,
    per: 2
  },
  {
    value: 22,
    per: 2
  },
  {
    value: 222,
    per: 3
  }
];
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紧跟鼠标,移入页面不抖动
},

多个柱子堆叠

在这里插入图片描述

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紧跟鼠标,移入页面不抖动
 },

原文地址:https://blog.csdn.net/qq_14993591/article/details/140522017

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!