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 += `<div style="height: 25px; line-height: 25px;">
          <!-- 圆点样式 -->
          <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
          <span style="color: #424864;">${item.seriesName}:</span>
          <span style="color: #172045;">${item.value}</span>
        </div>`;
      });
      // 提示框外框样式及内容数据
      const htmlContent = `<div style="width: 236px; height: 104px;">
        <!-- 提示框顶部标题样式及数据 smsUseData.xAxis.date（标题数据）-->
        <div style="color: #000000D9; border-bottom: 1px solid #F0F0F0; padding: 5px 16px;">
        ${ smsUseData.xAxis.date[params[0].dataIndex] }
        </div>
        <div style="padding: 12px 16px; position: relative;">
          ${content}
          <!-- 倒三角形样式 -->
          <div style="position: absolute; bottom: -14px; left: 12px; width: 0; height: 0; overflow: hidden; border-width: 8px; border-color: #ffffff transparent transparent transparent; border-style: dashed dashed solid dashed;}"></div>
        </div>
      </div>`;
      
      return htmlContent;
    },
  },
	···
};

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

formatter: '{b0}: {c0}<br />{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