echarts自定义tooltip

echarts自定义tooltip显示

使用echarts展示图形的时候，鼠标滑倒图像上，想展示除了系列名，数据名，数据值以外的数据，这时需要使用tooltip的fommater方式进行配置，另外对数据格式也有一定的要求。

如下图志愿者活跃数，显示y轴百分比的同时也要显示对应的月份和活跃志愿者总数

1、首先要知道y轴如何更改数据格式不会影响图表显示

能想到的肯定时数组直接赋值，那么把data改为由value和data组成的json串，这样不会影响图形的展示：

value的值默认渲染y轴

2、编写tooltip的formmatter函数，返回自定义数据。

 tooltip: {
          trigger: "axis",
          triggerOn: "mousemove",
          show: true,
          axisPointer: {
            type: "line",
          },
          // formatter: "{b}月份：{c}%",
          formatter(params) {
            for (let x in params) {
              return (
                params[x].name +
                "月份：" +
                params[x].data.value +
                "%" +
                "<br/>" +
                "总数：" +
                params[x].data.data
              );
            }
          },
        },

综上所述，能从formatter的params中把需要展示的date数据从data属性中取出并展示，效果就和上图一样了