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

发表于 分类于 阅读次数： 本文字数： 766 阅读时长 ≈ 1 分钟
直接上代码：

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
                        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 += '
'+ sSeriesName +''+ iVal +'
'
                    }
                    sHtml = '
'+ sName +':00 - '+ sName +':59 ' +''+ option.title.text +'
'+ _tempHtml +'
';
                    $(dom).addClass('myEchartsTooltips').html(sHtml);// 通过对dom的控制，实现数据结构与样式的自定义
                }
            },