echarts 自定义提示框

Webwhl / 2023-07-31 / 原文

const tooltip = (params, echartsBarData) => {
  const result = params.map((item, index) => {
    const str = item.name.substring(0, 1);
    if (echartsBarData[index].drugNameCosList) {
      const data = echartsBarData[index].drugNameCosList.filter(aa => aa.month === str)
      const consData = data.map((bb) => {
        return `<div style="margin-right: 12px"><span>${bb.name}：</span><span>${bb.cons}</span></div>`
      })
      return `<div class="echartsrow">
                <div class="left">
                  <span class="flagSpot" style="background: ${item.color}"></span>
                ${item.seriesName}:<span style="margin-left: 12px;">${item.value}</span></div>
                <div class="waterList">${consData.join('')}</div>
               </div>`;
    } else {
      return `<div class="echartsrow"><div class="left"><span class="flagSpot" style="background: ${item.color}"></span>${item.seriesName}:</div><span>${item.value}</span></div>`;
    }

  })
  return `<div class="tooltipBox">
                <div class="topTitle">
                    <span class="date">${params[0].axisValueLabel} </span>
                    <div class="nameCon">
                    ${result.join('')}
                    </div>                                  
                </div>
            </div>`
}