ECharts中tooltips自定义数据结构与样式

直接上代码:
1、css样式代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.myEchartsTooltips{
width: 180px;
padding: 0 !important;
opacity: 0.8;
border-radius: 5px !important;
font-size: 12px !important;
color: #666 !important;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.myEchartsTooltips .echartsTooltipsWarp-head{
padding: 5px 10px;
background-color: #eee;
border-bottom: 1px solid #e6e6e6;
overflow: hidden;
}
.myEchartsTooltips .echartsTooltipsWarp-body{
padding: 0 10px;
background-color: #fff;
overflow: hidden;
}
.myEchartsTooltips .echartsTooltipsWarp-body p{
overflow: hidden;
line-height: 30px;
}
2、js代码( 主要是通过对dom的控制,实现数据结构与样式的自定义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
tooltip: {
trigger: 'axis',
position: function (pos, params, dom, rect, size) {
console.log(params);
var sHtml = '';
var _tempHtml = '';
for(var i=0;i<params.length;i++){
var sName = params[i].name<10 ? '0' + params[i].name : params[i].name;
var iVal = params[i].value==0 ? '--' : params[i].value;
var sSeriesName = params[i].seriesName;
_tempHtml += '<p><span class="pull-left">'+ sSeriesName +'</span><span class="pull-right">'+ iVal +'</span></p>'
}
sHtml = '<div class="echartsTooltipsWarp-head"><span class="pull-left">'+ sName +':00 - '+ sName +':59 ' +'</span><span class="pull-right">'+ option.title.text +'</span></div><div class="echartsTooltipsWarp-body">'+ _tempHtml +'</div>';
$(dom).addClass('myEchartsTooltips').html(sHtml);// 通过对dom的控制,实现数据结构与样式的自定义
}
},
IT民工一枚,求各种打赏!