bizcharts 自定义设置Tooltip模板

bizcharts 自定义设置Tooltip模板

 <Tooltip
            crosshairs={{
              type: 'y'
            }}
            useHtml
            htmlContent={(
              title,
              items
            ) => `<div class="g2-tooltip" style='position:absolute;background:#fff'><div class="g2-tooltip-title">${title} </div><ul>
              <li><span style="background-color:{color};width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:8px;"></span></li>
              <li>${items[0].name}： ${items[0].value}百万</li>
              <li>${((items[0] || {}).point || {})['_origin'].names || ''}</li>
              </ul></div>`}
          />

在Tooltip中使用循环

<ToopTip
            useHtml
            htmlContent={(title, items) => {
              items.sort((a, b) => {
                return Number(b?.value) - Number(a?.value);
              });
              return `<div class="g2-tooltip" style='position:absolute;background:#fff;padding:10px 15px 0 15px;opacity:0.9;border-radius:10px;'>
                    <div class="g2-tooltip-title">${title}</div>
                    ${
                      items[0]
                        ? `<div>
                          <span style='display:inline-block;width:8px;height:8px;border-radius:50%;background:${
                            items[0]?.color
                          };margin-right:8px'></span>
                          <span>${numFormat((items || [])[0]?.value, '0,0.00', true)}</span>
                        </div>`
                        : '<div></div>'
                    }
                    ${
                      items[1]
                        ? ` <div>
                          <span style='display:inline-block;width:8px;height:8px;border-radius:50%;background:${
                            items[1]?.color
                          };margin-right:8px'></span>
                          <span>${numFormat((items || [])[1]?.value, '0,0.00', true)}</span>
                        </div>`
                        : '<div></div>'
                    }
                  </div>`;
            }}
          />