echarts tooltip

tooltip
https://echarts.apache.org/zh/option.html#tooltip.alwaysShowContent

tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(50,50,50,.8)',
    textStyle: {
      fontSize: 12,
      color: '#ccc',
    },
    enterable: true,
    extraCssText: 'max-height: 300px; overflow: auto;',
    // formatter: '{b1} <br /> {a0}: {c0} <br /> {a1}: {c1} <br /> {a2}: {c2}-{c3}',
    formatter(params) {
      const [a, b, c, d] = params;
      console.log('params', params);
      return `${a.axisValueLabel}<br/>
              ${a.marker}  ${a.seriesName}<span style='float:right;margin-left:8px;font-size:12px;color:#ccc;font-weight:900'>${a.data}</span><br/>
              ${b.marker}  ${b.seriesName}<span style='float:right;margin-left:8px;font-size:12px;color:#ccc;font-weight:900'>${b.data}</span><br/>
              ${c.marker}  ${c.seriesName}<span style='float:right;margin-left:8px;font-size:12px;color:#ccc;font-weight:900'>${c.data}-${d.data}</span>`;
    },
    appendToBody: true,
    // alwaysShowContent: true, 一直显示 tooltip
  },

tooltip formatter模板字符串

formatter: '{b1} <br /> {a0}: {c0} <br /> {a1}: {c1} <br /> {a2}: {c2}-{c3}',

formatter params callback

tooltip 默认的样式

<div 
  class=""
  style="
  position: absolute; display: block; 
  border-style: solid; white-space: nowrap; z-index: 9999999; will-change: transform; 
  box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; 
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, 
  visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; 
  background-color: rgba(50, 50, 50, 0.8); 
  border-width: 1px; border-radius: 4px; color: rgb(204, 204, 204); 
  font: 12px / 18px sans-serif; padding: 10px; top: 0px; left: 0px; 
  transform: translate3d(1057px, 415px, 0px); 
  border-color: rgb(255, 255, 255); 
  max-height: 300px; overflow: auto; pointer-events: auto;"
>
  <div style="margin: 0px 0 0;line-height:1;">
    <div style="margin: 0px 0 0;line-height:1;">
      <div style="font-size:12px;color:#ccc;font-weight:400;line-height:1;">
        2020-06-01 09:33
      </div>
      <div style="margin: 10px 0 0;line-height:1;">
        <div style="margin: 0px 0 0;line-height:1;">
          <div style="margin: 0px 0 0;line-height:1;"><span
              style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#188ffe;"></span><span
              style="font-size:12px;color:#ccc;font-weight:400;margin-left:2px">求和</span><span
              style="float:right;margin-left:20px;font-size:12px;color:#ccc;font-weight:900">4,475</span>
            <div style="clear:both"></div>
          </div>
          <div style="clear:both"></div>
        </div>
        <div style="margin: 10px 0 0;line-height:1;">
          <div style="margin: 0px 0 0;line-height:1;"><span
              style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#2fc25b;"></span><span
              style="font-size:12px;color:#ccc;font-weight:400;margin-left:2px">baseline</span><span
              style="float:right;margin-left:20px;font-size:12px;color:#ccc;font-weight:900">6,406.453755785153</span>
            <div style="clear:both"></div>
          </div>
          <div style="clear:both"></div>
        </div>
        <div style="margin: 10px 0 0;line-height:1;">
          <div style="margin: 0px 0 0;line-height:1;"><span
              style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgb(47,194,91, 0.4);"></span><span
              style="font-size:12px;color:#ccc;font-weight:400;margin-left:2px">boundary</span><span
              style="float:right;margin-left:20px;font-size:12px;color:#ccc;font-weight:900">-</span>
            <div style="clear:both"></div>
          </div>
          <div style="clear:both"></div>
        </div>
        <div style="margin: 10px 0 0;line-height:1;">
          <div style="margin: 0px 0 0;line-height:1;"><span
              style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgb(47,194,91, 0.4);"></span><span
              style="font-size:12px;color:#ccc;font-weight:400;margin-left:2px">boundary</span><span
              style="float:right;margin-left:20px;font-size:12px;color:#ccc;font-weight:900">-</span>
            <div style="clear:both"></div>
          </div>
          <div style="clear:both"></div>
        </div>
        <div style="clear:both"></div>
      </div>
      <div style="clear:both"></div>
    </div>
    <div style="clear:both"></div>
  </div>
</div>

marker

图例样式和颜色，echarts默认的样式

<span 
  style="
  display:inline-block;
  margin-right:4px;
  border-radius:10px;
  width:10px;
  height:10px;
  background-color:#188ffe;"
></span>