【Echarts】tooltip自定义提示框 

 1 组件可直接使用。
 2 tooltip: {
 3         show: true,
 4         trigger: 'axis',
 5         confine: true,
 6         padding: 0,
 7         borderWidth: 0,
 8         backgroundColor: 'rgba(1,1,1,0)',
 9         // axisPointer: {
10         //   // 坐标轴指示器，坐标轴触发有效
11         //   type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
12         //   lineStyle: {
13         //     color: '#6CC0FF',
14         //     type: 'solid',
15         //   },
16         // },
17         axisPointer: {
18           // 坐标轴指示器，坐标轴触发有效
19           type: 'line', // 默认为直线，可选为：'line' | 'shadow'
20           lineStyle: {
21             color: '#36C7FF',
22             type: 'solid',
23           },
24         },
25         formatter: function (params) {
26           console.log('params',params);
27           let htmlStr = `<div class='toolTip'>`;
28           params.map((item, index) => {
29             if (index === 0) {
30               htmlStr += `<div class= 'titleLine'>${item.axisValue}</div>`;
31               htmlStr+='<div class="titleLineBottom"></div>';
32             }
33             htmlStr += `<div  class="toolline">
34             <span  class="iconBox"  style="background:${item.borderColor}">
35             </span>
36             <span  class="label">${item.seriesName}:</span>
37             <span  class="value"><span style="color:${item.borderColor};padding-left: 3px;">${item.value}</span></span>
38             </div>`
39 
40           })
41           htmlStr += `</div>`;
42           return htmlStr;

44         },
45        
46       },

 

posted @ 2023-05-17 12:15  维多利亚的巴黎世家  阅读(267)  评论(0)    收藏  举报