Echarts自定义提示框tooltip样式(包括提示框标题不固定)
# 效果图
# 实现方法
用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
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
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)
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13