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

相关推荐

  1. 【ubuntu】增加swap容量

    2024-07-18 20:28:02       34 阅读
  2. MYSQL增加外键

    2024-07-18 20:28:02       29 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-18 20:28:02       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-18 20:28:02       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-18 20:28:02       58 阅读
  4. Python语言-面向对象

    2024-07-18 20:28:02       69 阅读

热门阅读

  1. QTableView

    2024-07-18 20:28:02       18 阅读
  2. crontab文件只能有一个吗

    2024-07-18 20:28:02       22 阅读
  3. Linux系统如何安装pip pip3

    2024-07-18 20:28:02       21 阅读
  4. 深入解析:conda 与 pip 使用全攻略

    2024-07-18 20:28:02       20 阅读
  5. c字符串转go字符串

    2024-07-18 20:28:02       20 阅读
  6. Maxwell同步mysql binlog日志执行的几条数据库命令

    2024-07-18 20:28:02       20 阅读
  7. Andrey‘s Tree

    2024-07-18 20:28:02       21 阅读