echarts line tooltip 标题自定义记录_echart tooltip 标题

1、需求场景，tooltip标题样式自定义，比如文本换行、字体大小、颜色修改等，效果图如下：

2、实现的代码如下：

option = {
  title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    confine: true,// 移动端，使提示框在可视区域内
    formatter: (params) => {
      // 设置提示框标题换行
      const addNewlines = (str, length) => {
        let result = '';
        for (let i = 0; i < str.length; i += length) {
          result +=
            str.slice(i, i + length) + (i < str.length - length ? '<br/>' : '');
        }
        return result;
      };
      const title = addNewlines(params[0].name, 10);
      return `<div>
                <p style="width:125px;font-size:12px;color:#636E76;">${title}</p>
                <p style="color:#253440;font-size:12px;">${params[0].seriesName}：${params[0].data}</p>
                <p style="color:#253440;font-size:12px;">${params[1].seriesName}：${params[1].data}</p>
                <p style="color:#253440;font-size:12px;">${params[2].seriesName}：${params[2].data}</p>
                <p style="color:#253440;font-size:12px;">${params[3].seriesName}：${params[3].data}</p>
                <p style="color:#253440;font-size:12px;">${params[4].seriesName}：${params[4].data}</p>
              </div>`;
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      '标题标题标题标题标题标题标题标题标题1',
      '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据2',
      '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据3',
      '测试数据测试数据测试数据测试数据测试数据4',
      '测试数据测试数据测试数据5',
      '测试数据测试数据测试数据6',
      '测试数据测试数据测试数据测试数据7'
    ],
    axisLabel: {
      rotate: 45,
      width: 60,
      height: 24,
      lineHeight: 24,
      overflow: 'truncate'
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};