Echarts自定义提示框案例

官方文档：#tooltip.formatter

两种方法，如 trigger: 'axis' 的情况下，均在 tooltip 节点下添加如下：

1. 模板字符串

formatter:'<span style="font-size: 10px">{b}</span><div style="display: flex"><div style="width: 10px;height: 10px;border-radius: 50%;background-color: #FFFF66;margin-top:5px"></div><span style="font-size: 10px;margin:0 10px">{a0}</span>  <span style="font-size: 14px">{c0}(kW)</span></div><div style="display: flex"><div style="width: 10px;height: 10px;border-radius: 50%;background-color: #FF6666;margin-top:5px"></div><span style="font-size: 10px;margin:0 10px">{a1}</span><span style="font-size: 14px">{c1}(kW)</span></div>'

2. 回调函数

formatter: (params) => {
   let tip = '';
   // console.log('数据:', params);
   if (params && params.length > 0) {
      tip += params[0].name + '<br />';
      params.forEach(item => {
        tip += item.marker + item.seriesName + ' ' + (item.value ? item.value + 'kW' : '-') + '<br />';
      });
   }
   return tip;
}