Echarts相同的图例名称也能显示

Echarts的图例默认是唯一的，如果是遇到相同的名称，也只会显示一条。因为图例的名字是跟series中的name相关的。比如在折线图中，series的name是要唯一的，所以才能显示不同的线，如果是name一样的，就会重复，只显示一条。那如何让图例中显示相同的名称呢？

配置legend中的formatter

首先series中的name肯定是要保持的唯一的，那只能在legend这个配置项做处理。在legend的配置项中有个formatter的选项，formater可以是字符串可以一个是一个函数，返回要显示的字符串即可。

// 使用字符串模板，模板变量为图例名称 
{name} formatter: 'Legend {name}' 
// 使用回调函数 
formatter: function (name) {
    return 'Legend ' + name; 
}

所以在这里我们需要处理好数据，以Echarts例子来处理，官网折线图例子。 获取series 的data添加一个text字段

  legend: {
   data: ['Email', 'Email', 'Union Ads', 'Video Ads','Direct', 'Search Engine'],
   formatter:(name) => {
        const data =  [
        {
          name: 'Email',
          text: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          text: 'Email',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          text: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          text: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          text: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
      const target = data.find(item => item.name === name)
      if (target) {
          return target.text
      }
      return name
    }
  },

formatter方法的参数是series中的name，所以我们只要判断是哪条线，返回一个跟series中的name无关的文本，就是可以显示出来的。

到这里还没结束，鼠标上移到图表，会发现显示的提示跟图例是对不上的。

所以，我们还要设置提示项。

配置tooltip的formatter

在对应的tooltip配置中也有formatter属性，用法跟legend一样的，不过方法的参数是不一样的。具体使用方法和参数查看 具体的实现是跟legend差不多的，不过就是要把具体的数值匹配上。

tooltip:{
    /**
     * 格式化提示名称
     * @param tips 提示信息
     * @param ticket 异步回调标识
     * @returns string
     */
    formatter: (tips, ticket) => {
       const data =  [
        {
          name: 'Email',
          text: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: 'Union Ads',
          text: 'Email',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: 'Video Ads',
          text: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: 'Direct',
          text: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: 'Search Engine',
          text: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    
      const series_name = [];
       for (const tip of tips) {
        // 获取目标key值
         const target = data.find(item => item.name === name)
        if (target) {
            tip.seriesName = target.text;
        }
        series_name.push({
            name: tip.seriesName,
            value: tip.value,
            marker: tip.marker  // 提示前面颜色点标识
        });
    }
    let tips_info = `${ticket}<br/>`;
    for (const tip of series_name) {
        tips_info += `
                    <div>
                    ${tip.marker}<span>${tip.name}</span>:  <span>${tip.value}</span><br/>
                    </div>`;
    }
    return tips_info;
    }
}

现在我们看到提示和图例名称是对应上了，这样就实现了相同图例名称可以显示的需求。