Echarts自定义提示框tooltip样式（包括提示框标题不固定）

效果图

实现方法

        用formatter 函数（支持字符串模板和回调函数两种形式），使用 html 语法来构建一个自定义的提示框。

        形式一：回调函数形式（适应于需自定义样式（样式有较大变化时）的情况）

// 图表配置项
let chartOption = {
  // 提示框配置
  tooltip: {
    // 触发方式：设置为坐标轴触发提示框
    trigger: "axis",
    // 设置提示框浮层位置 point: 鼠标位置
    position: function (point) {
      return [point[0] - 18, point[1] - 120];
    },
    padding: 0,
    // 提示框浮层内容格式器: 自定义提示框样式
    formatter: function (params) { // params 是 formatter 需要的数据集
      let content = "";
      
      params.forEach((item) => {
        // 提示框的内容样式及数据
        content += `

          
          
          ${item.seriesName}:
          ${item.value}
        
`;
      });
      // 提示框外框样式及内容数据
      const htmlContent = `

        
        

        ${ smsUseData.xAxis.date[params[0].dataIndex] }
        
        

          ${content}
          
          

        
      
`;
      
      return htmlContent;
    },
  },
	···
};

        形式二：字符串模板形式（适应于需自定义排版格式的情况）

formatter: '{b0}: {c0}
{b1}: {c1}'
// 显示效果如下
// 类目值1：数值1
// 类目值2：数值2

        模板变量有 {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}（百分比）

更多可查看：https://echarts.apache.org/zh/index.html