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

# 效果图

Description

# 实现方法

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

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

// 图表配置项
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;
    },
  },
	···
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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

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

1
2
3
4

模板变量有 {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 (opens new window)

#Echarts

上次更新: 2024/01/30, 00:35:17

← axios携带cookie gitee 仓库初始化→