echarts自定义tooltip显示内容

echarts中自定义tooltip的属性是formatter，它是一个方法，主要是讲一下怎么将自定义的值显示在tooltip中，因为自己刚开始用的时候，还是查了半天的。
当未定义的时候，数据如下：

tooltip: {
      trigger: 'axis',
      axisPointer: {    
        type: 'shadow'   
      },
    },
 xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  };

tooltip显示如下：

假如说我想让每个柱子中都添加显示所需天数，那么我就需要自定义tooltip，那就先加个formatter函数，它主要是有个params，先看一下这个参数是个什么鬼

formatter(params) {
        console.log(params)
         ///
}

当hover最后一条数据的时候，输出如下：

发现data就是传的当前的值，那么传值的时候给data直接加字段就可以了，把data改为

data: [{ value: 10, day: 1 },
       { value: 52, day: 10 }, 
       { value: 200, day: 1 }, 
       { value: 334, day: 13 },
       { value: 390, day: 20 },
       { value: 330, day: 21 }, 
       { value: 220, day: 1 }]

此时再次hover的时候，显示就变为

那么你就可以让它显示任何你想显示的字段了，只需要给data里面塞数据就好了，例如：

 formatter(params) {
        const item = params[0];
        return `
                直接访问：${item.data.value}
                所需天数：${item.data.day}
               `;
 },