echart 图表tooltip样式自定义

效果图: 样式要求如下:

主要有2个难点,

1.谷歌浏览器默认显示最小字号是12px的,除非在设置里面调节调整最小字号,可以显示到6px,但是不可能让用户去修改浏览器设置,所以这边使用 transform这个属性来进行缩放,缩放会有误差,所以使用整体缩放,在用less进行运算~具体代码在下面看.

2.属性名字的显示,可以和图例显示不一样不能直接使用seriesName获取,后面数据也有可能要加上单位,这边有两种处理方式,一种是在data数据里面再定一个属性,直接获取data里面的属性名称,还有一种方式使用map()函数行进处理,这边我主要使用第二种~

不多说上干货:

less中全局样式:

// echarts tooltip样式
:global {
.echart-tooltip-wrap {
    background-color: #0a3f54;
    padding: 12px/0.833;
    display: inline-block;
    transform: scale(0.833);
    transform-origin: 0% 0%;
  }

  .echart-tooltip-header {
    padding: 0 0 10px/0.833 0;
    font-size: 12px/0.833;
    line-height: 12px/0.833;
  }
  .echart-tooltip-body {
    font-size: 10px/0.833;
    line-height: 10px/0.833;
  }
  .echart-tooltip-module {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px/0.833;
  }
  .echart-tooltip-module:last-child {
    padding-bottom: 0;
  }
  .echart-tooltip-module > div:nth-child(1) {
    padding-right: 20px/0.833;
    color: rgba(255,255,255,0.5);
  }
  .echart-tooltip-module > div:nth-child(2) {
    //color: blue;
  }
}

js中提取的util方法:

/**
 * exchart 图标中tooltip自定义样式
 * @param toolTipSource 自定义的参数,header 有传入 表示标题/ body 有传入表示对是数据,数据中的key 有传入 市值说明,value 有传入 表示有对应的值
 * @returns {string}
 */
export function tooltipCustom(toolTipSource) {
  if (!toolTipSource) {
    return ''
  }
  let header = toolTipSource.header ? `<div class="echart-tooltip-header">${toolTipSource.header}</div>` : '';
  let body = toolTipSource.body ? toolTipSource.body.map(function (n) {
    let keyDom = n.key ? `<div>${n.key} :</div>` : '';
    let valueDom = n.value ? `<div>${n.value}</div>` : '';
    return `<div class="echart-tooltip-module">
              ${keyDom}
              ${valueDom}
            </div>`
  }).join('') : '';
  return `<div class="echart-tooltip-wrap">
              ${header}
              <div class="echart-tooltip-body">
                  ${body}
              </div>
          </div>`
}

Echarts中tooltip代码:

第一种方式:

data: [
  {
    value: 335,
    name: '实际控制人派驻董事会',
    chartsShowTip: '实际控制人派驻董事会数量',
  },
  {
    value: 310,
    name: '独立董事',
    chartsShowTip: '独立董事数量',
  },
  {
    value: 234,
    name: '一致行动人派驻董事会',
    chartsShowTip: '一致行动人派驻董事会数量',
  },
  {
    value: 135,
    name: '其他',
    chartsShowTip: '其他',
  },
],
tooltip: {
  formatter (params) {
    return tooltipCustom({
      body: [
        {
          key: params.data.chartsShowTip,
          value: params.value,
        }, {
          key: '占比',
          value: params.percent + '%',
        },
      ],
    })
  },
  backgroundColor: 'transparent',

  position: function (point, params, dom, rect, size) {
    // dom.setAttribute('style','')
    return [point[0], '10%']
  },

},

第二种方式:

这段也就是效果图中tooltip的代码:

tooltip: {
  formatter(params) {
    return tooltipCustom({
      header: dateFormat(params[0].value[0], 'yyyy'),
      body: params.map(function (n) {
        return {
          key: n.seriesName === '公司纳税金额' ? n.seriesName + '(亿元)' : n.seriesName,
          value: n.seriesName === '公司纳税金额/注册所在地总税收' ? n.value[1] + '%' : n.value[1]
        }
      })
    })
  },
  backgroundColor: 'transparent',
  trigger: 'axis',
},

这是一段在tooltip中多显示一个属性的代码,用了一个push()函数:

 formatter(params) {
    return tooltipCustom({
      header: dateFormat(params[0].axisValue, 'yyyy'),
      body: (function () {
        let arr = params.map(function (n, i) {
          return {
            key: n.seriesName === '利息' ? '期末每百元应付利息（元）' : '期末每百元应付本金（元）',
            value: n.data[i + 2]
          }
        })

        arr.length && arr.push({
          key: '期末每百元应付现金流（元）',
          value: params[0].data[4],
        })
        return arr
      })()
    })
  },
  backgroundColor: 'transparent',
},