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 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;

text

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

| --------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |