ECharts tooltip

856 阅读1分钟

使用数据集dataset时,会遇到悬浮框要展示数据,但是柱状图或者折线图的图中不显示的情况。以下的tooltip可以展示全部数据集中,对应该时间或系列的数据信息。

对有在图中展示的数据,会展示对应的颜色的marker圆点。而没有在图中展示的,则会展示一个白色的圆点,用来对齐。

效果图:

image.png

const tooltip = {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: (params: any[]) => {
        let html = '';
        // 整理 marker
        const markers: string[] = [];
        const labelNames: string[] = [];
        params.forEach((param) => {
          const { marker, seriesName } = param;
          markers.push(marker);
          labelNames.push(seriesName);
        });

        const { dimensionNames: names, data: seriesData } = params[0];
        // 删去 undefined
        for (let i = names.length - 1; i >= 0; i -= 1) {
          if (!names[i]) names.pop();
        }
        html += `${params[0].axisValueLabel} <br>`;
        for (let i = 1; i < names.length - 1; i += 1) {
          html += `${
            labelNames.includes(names[i]) ? markers[labelNames.indexOf(names[i])] : Marker
          } ${names[i]}: ${transformNum(seriesData[i], {
            isPercentage: percentageList.includes(names[i]),
          })}<br>`;
        }
        return html;
      },
    },

percentageList是需要转化为百分比格式的名称合成的数组。