ECharts tooltips.formatter 进行百分比

遇到的问题

ECharts 中如果纵坐标不是数值，而是百分比时，需要对纵坐标与tooltip进行数据处理。

ECharts 配置

this.options = {
          title: {
            text: '标题'
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (info) { // 百分比时的tooltip处理  此处用函数方式是因为有可能是多条折线
              let result = ''
              let content = ''
              info.map(item => {
                if (item.data.empty) {
                  result = ''
                } else {
                  content += `${item.marker} ${item.seriesName} ${item.value}${是否需要展示百分比 ? '%' : ''}<br/>`
                  result = `<span style='font-size: 14px;'>${item.name}</span> <br/> ${content}`
                }
              })
              return result
            }
          },
          legend: {
            right: 10,
          },
          xAxis: {
            type: 'category',
            data: ['三月', '四月']
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: 是否需要展示百分比 ? '{value}%' : '{value}'
            }
          },
          series,
        }

自定义tooltip：tooltips.formatter 有两种方式

1. 字符串模版

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

• 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
• 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
• 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
• 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
  更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。

2. 回调函数

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[] 

例子

字符串模版

tooltip: {
            trigger: 'axis',
            formatter: function (length) { // 百分比时的tooltip处理
                // 对于展示多条折线的这种情况 不能用该方法进行处理 在点击数据描述进行隐藏单个数据时 会导致tooltip 展示有问题
                if (length === 2) { // 两条折线
                    return 是否需要展示百分比 ? '{b0}<br/>{a0}:{c0}%<br/>{a1}:{c1}%' :   '{b0}<br/>{a0}:{c0}<br/>{a1}:{c1}'
                 }
                return 是否需要展示百分比 ? '{b0}<br/>{a0}:{c0}%' : '{b0}<br/>{a0}:{c0}'
            }
          },

正常效果

image.png
异常效果
对于展示多条折线的这种情况 不能用该方法进行处理 在点击数据描述进行隐藏单个数据时 会导致tooltip 展示有问题
image.png

回调函数

tooltip: {
            trigger: 'axis',
            formatter: function (info) { // 百分比时的tooltip处理  此处用函数方式是因为有可能是多条折线
              let result = ''
              let content = ''
              info.map(item => {
                if (item.data.empty) {
                  result = ''
                } else {
                  content += `${item.marker} ${item.seriesName} ${item.value}${是否需要展示百分比 ? '%' : ''}<br/>`
                  result = `<span style='font-size: 14px;'>${item.name}</span> <br/> ${content}`
                }
              })
              return result
            }
          }

效果
回调函数的好处也在于 可以展示对应的折线的，颜色等信息，更加的美观

image.png