echarts自定义tooltip中的内容代码示例

世界都在背叛我

原本的默认样式长这样：

也就是有几个图例，就显示几个再加上数字。
默认代码是这样的：

1. tooltip: {
   
2.     trigger: 'axis',
   
3.     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
   
4.         type: 'cross',        // 默认为直线，可选为：'line' | 'shadow' 'cross'
   
5.                         
   
6.     },
   
7.     confine:true, // 限制tooltip在图标区域内显示               
   
8. },

复制代码

但我需要的是这样的:

代码如下：
需要加一个formatter函数

1. tooltip: {
   
2.     trigger: 'axis',
   
3.     axisPointer: {            // 坐标轴指示器，坐标轴触发有效
   
4.         type: 'cross',        // 默认为直线，可选为：'line' | 'shadow' 'cross'
   
5.     },
   
6.    
   
7.     confine:true,             //限制tooltip在图表区域内显示
   
8.     formatter:function(params) {
   
9.         console.log(params);
   
10.         let content = '<div style="text-align: left;width:250px;margin-left:20px">'; // 创建一个中心对齐的容器
    
11.         content += '<table style="border-bottom:1px solid #COCOCO">';
    
12.    
    
13.         content += '<tr><td>${params[0].name?.split(' ')[1][1]}</td></p>'; // 显示时间戳
    
14.         content += '<td style="text-indent:5px">平均</td>';
    
15.         content += '<td style="text-indent:5px">峰值</td>';
    
16.         content += '<td style="text-indent:5px">最高</td></tr>';
    
17. 
    
18.         for (let i = 0; i < params.length; i++) {
    
19.             const param = params[i];
    
20.         const seriesName = param.seriesName; // 获取系列名称
    
21.         const value = param.data; // 获取数据值
    
22.         const color = param.color; // 获取颜色
    
23.         
    
24.         content += '<tr><td style="text-indent:5px;border-left:2px solid ${color}">${seriesName}</td>';
    
25.         content += '<td style="text-indent:5px">${value.toFixed(2)}</td>'; // 格式化为百分比
    
26.         if (seriesName === "CPU占用率") {
    
27.             content += '<td style="text-indent:5px">${dataRow.cpu_total_grad_list[param.dataIndex]}</td>'; // 格式化为百分比
    
28.             content += '<td style="text-indent:5px">${dataRow.cpu_total_max_list[param.dataIndex]}</td></tr>';
    
29.         } else if (seriesName === "sys占用率") {
    
30.             content += '<td style="text-indent:5px">${dataRow.cpu_sys_grad_list[param.dataIndex]}</td>';
    
31.             content += '<td style="text-indent:5px">${dataRow.cpu_sys_max_list[param.dataIndex]}</td></tr>';
    
32.         } else if (seriesName === "用户占用率") {
    
33.             content += '<td style="text-indent:5px">${dataRow.cpu_user_grad_list[param.dataIndex]}</td>';
    
34.             content += '<td style="text-indent:5px">${dataRow.cpu_user_max_list[param.dataIndex]}</td></tr>';
    
35.         }
    
36.     }
    
37. 
    
38.     content += '</table>';
    
39.    
    
40.     content += '<tr><td>最大值所在主机 ${dataRow.cpu_max_host[params[0]?.dataIndex]}</td></tr>';
    
41.    
    
42.     return content;
    
43. }
    
44. }

复制代码

总结
到此这篇关于echarts自定义tooltip中内容的文章就介绍到这了,更多相关echarts自定义tooltip内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/3290182ry.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！