tooltip.js

/**
 * echarts组件：提示框
 *
 * @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
 * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
 *
 */
define(function (require) {
    /**
     * 构造函数
     * @param {Object} messageCenter echart消息中心
     * @param {ZRender} zr zrender实例
     * @param {Object} option 提示框参数
     * @param {HtmlElement} dom 目标对象
     */
    function Tooltip(messageCenter, zr, option, dom) {
        var Base = require('./base');
        Base.call(this, zr);

        var ecConfig = require('../config');
        var ecData = require('../util/ecData');

        var zrConfig = require('zrender/config');
        var zrShape = require('zrender/shape');
        var zrEvent = require('zrender/tool/event');
        var zrArea = require('zrender/tool/area');
        var zrColor = require('zrender/tool/color');
        var zrUtil = require('zrender/tool/util');
        var zrShapeBase = require('zrender/shape/base');

        var rectangle = zrShape.get('rectangle');
        var self = this;
        self.type = ecConfig.COMPONENT_TYPE_TOOLTIP;

        var _zlevelBase = self.getZlevelBase();

        var component = {};                     // 组件索引
        var grid;
        var xAxis;
        var yAxis;
        var polar;

        // tooltip dom & css
        var _tDom = document.createElement('div');
        // 通用样式
        var _gCssText = 'position:absolute;'
                        + 'display:block;'
                        + 'border-style:solid;'
                        + 'white-space:nowrap;';
        // 默认样式
        var _defaultCssText;                    // css样式缓存

        var _needAxisTrigger;                   // 坐标轴触发
        var _hidingTicket;
        var _hideDelay;                         // 隐藏延迟
        var _showingTicket;
        var _showDelay;                         // 显示延迟
        var _curTarget;
        var _event;

        var _curTicket;                         // 异步回调标识，用来区分多个请求

        // 缓存一些高宽数据
        var _zrHeight = zr.getHeight();
        var _zrWidth = zr.getWidth();

        var _lastTipShape = false;
        var _axisLineShape = {
            shape : 'line',
            id : zr.newShapeId('tooltip'),
            zlevel: _zlevelBase,
            invisible : true,
            hoverable: false,
            style : {
                // lineWidth : 2,
                // strokeColor : ecConfig.categoryAxis.axisLine.lineStyle.color
            }
        };
        var _axisShadowShape = {
            shape : 'line',
            id : zr.newShapeId('tooltip'),
            zlevel: 1,                      // grid上，chart下
            invisible : true,
            hoverable: false,
            style : {
                // lineWidth : 10,
                // strokeColor : ecConfig.categoryAxis.axisLine.lineStyle.color
            }
        };
        zr.addShape(_axisLineShape);
        zr.addShape(_axisShadowShape);

        /**
         * 根据配置设置dom样式
         */
        function _style(opt) {
            if (!opt) {
                return '';
            }
            cssText = [];
            if (opt.transitionDuration) {
                var transitionText = 'left ' + opt.transitionDuration + 's,'
                                    + 'top ' + opt.transitionDuration + 's';
                cssText.push(
                    'transition:' + transitionText
                );
                cssText.push(
                    '-moz-transition:' + transitionText
                );
                cssText.push(
                    '-webkit-transition:' + transitionText
                );
                cssText.push(
                    '-o-transition:' + transitionText
                );
            }

            if (opt.backgroundColor) {
                // for sb ie~
                cssText.push(
                    'background-Color:' + zrColor.toHex(
                        opt.backgroundColor
                    )
                );
                cssText.push('filter:alpha(opacity=70)');
                cssText.push('background-Color:' + opt.backgroundColor);
            }

            if (typeof opt.borderWidth != 'undefined') {
                cssText.push('border-width:' + opt.borderWidth + 'px');
            }

            if (typeof opt.borderColor != 'undefined') {
                cssText.push('border-color:' + opt.borderColor);
            }

            if (typeof opt.borderRadius != 'undefined') {
                cssText.push(
                    'border-radius:' + opt.borderRadius + 'px'
                );
                cssText.push(
                    '-moz-border-radius:' + opt.borderRadius + 'px'
                );
                cssText.push(
                    '-webkit-border-radius:' + opt.borderRadius + 'px'
                );
                cssText.push(
                    '-o-border-radius:' + opt.borderRadius + 'px'
                );
            }

            var textStyle = opt.textStyle;
            if (textStyle) {
                textStyle.color && cssText.push('color:' + textStyle.color);
                textStyle.decoration && cssText.push(
                    'text-decoration:' + textStyle.decoration
                );
                textStyle.align && cssText.push(
                    'text-align:' + textStyle.align
                );
                textStyle.fontFamily && cssText.push(
                    'font-family:' + textStyle.fontFamily
                );
                textStyle.fontSize && cssText.push(
                    'font-size:' + textStyle.fontSize + 'px'
                );
                textStyle.fontSize && cssText.push(
                    'line-height:' + Math.round(textStyle.fontSize*3/2) + 'px'
                );
                textStyle.fontStyle && cssText.push(
                    'font-style:' + textStyle.fontStyle
                );
                textStyle.fontWeight && cssText.push(
                    'font-weight:' + textStyle.fontWeight
                );
            }


            var padding = opt.padding;
            if (typeof padding != 'undefined') {
                padding = self.reformCssArray(padding);
                cssText.push(
                    'padding:' + padding[0] + 'px '
                               + padding[1] + 'px '
                               + padding[2] + 'px '
                               + padding[3] + 'px'
                );
            }

            cssText = cssText.join(';') + ';';

            return cssText;
        }

        function _hide() {
            if (_tDom) {
                _tDom.style.display = 'none';
            }
            var needRefresh = false;
            if (!_axisLineShape.invisible) {
                _axisLineShape.invisible = true;
                zr.modShape(_axisLineShape.id, _axisLineShape);
                needRefresh = true;
            }
            if (!_axisShadowShape.invisible) {
                _axisShadowShape.invisible = true;
                zr.modShape(_axisShadowShape.id, _axisShadowShape);
                needRefresh = true;
            }
            if (_lastTipShape && _lastTipShape.tipShape.length > 0) {
                zr.delShape(_lastTipShape.tipShape);
                _lastTipShape = false;
            }
            needRefresh && zr.refresh(); 
        }

        function _show(x, y, specialCssText) {
            var domHeight = _tDom.offsetHeight;
            var domWidth = _tDom.offsetWidth;
            if (x + domWidth > _zrWidth) {
                x = _zrWidth - domWidth;
            }
            if (y + domHeight > _zrHeight) {
                y = _zrHeight - domHeight;
            }
            if (y < 20) {
                y = 0;
            }
            _tDom.style.cssText = _gCssText
                                  + _defaultCssText
                                  + (specialCssText ? specialCssText : '')
                                  + 'left:' + x + 'px;top:' + y + 'px;';
            if (_zrWidth - x < 100 || _zrHeight - y < 100) {
                // 太靠边的做一次refixed
                setTimeout(_refixed, 20);
            }
        }
        
        function _refixed() {
            if (_tDom) {
                var cssText = '';
                var domHeight = _tDom.offsetHeight;
                var domWidth = _tDom.offsetWidth;
                if (_tDom.offsetLeft + domWidth > _zrWidth) {
                    cssText += 'left:' + (_zrWidth - domWidth) + 'px;';
                }
                if (_tDom.offsetTop + domHeight > _zrHeight) {
                    cssText += 'top:' + (_zrHeight - domHeight) + 'px;';
                }
                if (cssText !== '') {
                    _tDom.style.cssText += cssText;
                }
            }
        }

        function _tryShow() {
            var needShow;
            var trigger;
            if (!_curTarget) {
                // 坐标轴事件
                _findPolarTrigger() || _findAxisTrigger();
            }
            else {
                // 数据项事件
                if (_curTarget._type == 'island' && option.tooltip.show) {
                    _showItemTrigger();
                    return;
                }
                var serie = ecData.get(_curTarget, 'series');
                var data = ecData.get(_curTarget, 'data');
                needShow = self.deepQuery(
                    [data, serie, option],
                    'tooltip.show'
                );
                if (typeof serie == 'undefined'
                    || typeof data == 'undefined'
                    || needShow === false
                ) {
                    // 不响应tooltip的数据对象延时隐藏
                    clearTimeout(_hidingTicket);
                    clearTimeout(_showingTicket);
                    _hidingTicket = setTimeout(_hide, _hideDelay);
                }
                else {
                    trigger = self.deepQuery(
                        [data, serie, option],
                        'tooltip.trigger'
                    );
                    trigger == 'axis'
                               ? _showAxisTrigger(
                                     serie.xAxisIndex, serie.yAxisIndex,
                                     ecData.get(_curTarget, 'dataIndex')
                                 )
                               : _showItemTrigger();
                }
            }
        }

        /**
         * 直角系 
         */
        function _findAxisTrigger() {
            if (!xAxis || !yAxis) {
                _hidingTicket = setTimeout(_hide, _hideDelay);
                return;
            }
            var series = option.series;
            var xAxisIndex;
            var yAxisIndex;
            for (var i = 0, l = series.length; i < l; i++) {
                // 找到第一个axis触发tooltip的系列
                if (self.deepQuery(
                        [series[i], option], 'tooltip.trigger'
                    ) == 'axis'
                ) {
                    xAxisIndex = series[i].xAxisIndex || 0;
                    yAxisIndex = series[i].yAxisIndex || 0;
                    if (xAxis.getAxis(xAxisIndex)
                        && xAxis.getAxis(xAxisIndex).type
                           == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
                    ) {
                        // 横轴为类目轴
                        _showAxisTrigger(xAxisIndex, yAxisIndex,
                            _getNearestDataIndex('x', xAxis.getAxis(xAxisIndex))
                        );
                        return;
                    } 
                    else if (yAxis.getAxis(yAxisIndex)
                             && yAxis.getAxis(yAxisIndex).type
                                == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
                    ) {
                        // 纵轴为类目轴
                        _showAxisTrigger(xAxisIndex, yAxisIndex,
                            _getNearestDataIndex('y', yAxis.getAxis(yAxisIndex))
                        );
                        return;
                    }
                }
            }
        }
        
        /**
         * 极坐标 
         */
        function _findPolarTrigger() {
            if (!polar) {
                return false;
            }
            var x = zrEvent.getX(_event);
            var y = zrEvent.getY(_event);
            var polarIndex = polar.getNearestIndex([x, y]);
            var valueIndex;
            if (polarIndex) {
                valueIndex = polarIndex.valueIndex;
                polarIndex = polarIndex.polarIndex;
            }
            else {
                polarIndex = -1;
            }
            
            if (polarIndex != -1) {
                return _showPolarTrigger(polarIndex, valueIndex);
            }
            
            return false;
        }
        
        /**
         * 根据坐标轴事件带的属性获取最近的axisDataIndex
         */
        function _getNearestDataIndex(direction, categoryAxis) {
            var dataIndex = -1;
            var x = zrEvent.getX(_event);
            var y = zrEvent.getY(_event);
            if (direction == 'x') {
                // 横轴为类目轴
                var left;
                var right;
                var xEnd = grid.getXend();
                var curCoord = categoryAxis.getCoordByIndex(dataIndex);
                while (curCoord < xEnd) {
                    if (curCoord <= x) {
                        left = curCoord;
                    }
                    if (curCoord >= x) {
                        break;
                    }
                    curCoord = categoryAxis.getCoordByIndex(++dataIndex);
                    right = curCoord;
                }
                if (x - left < right - x) {
                    dataIndex -= 1;
                }
                else {
                    // 离右边近，看是否为最后一个
                    if (typeof categoryAxis.getNameByIndex(dataIndex)
                        == 'undefined'
                    ) {
                        dataIndex = -1;
                    }
                }
                return dataIndex;
            }
            else {
                // 纵轴为类目轴
                var top;
                var bottom;
                var yStart = grid.getY();
                var curCoord = categoryAxis.getCoordByIndex(dataIndex);
                while (curCoord > yStart) {
                    if (curCoord >= y) {
                        bottom = curCoord;
                    }
                    if (curCoord <= y) {
                        break;
                    }
                    curCoord = categoryAxis.getCoordByIndex(++dataIndex);
                    top = curCoord;
                }

                if (y - top > bottom - y) {
                    dataIndex -= 1;
                }
                else {
                    // 离上方边近，看是否为最后一个
                    if (typeof categoryAxis.getNameByIndex(dataIndex)
                        == 'undefined'
                    ) {
                        dataIndex = -1;
                    }
                }
                return dataIndex;
            }
            return -1;
        }

        /**
         * 直角系 
         */
        function _showAxisTrigger(xAxisIndex, yAxisIndex, dataIndex) {
            if (typeof xAxis == 'undefined'
                || typeof yAxis == 'undefined'
                || typeof xAxisIndex == 'undefined'
                || typeof yAxisIndex == 'undefined'
                || dataIndex < 0
            ) {
                // 不响应tooltip的数据对象延时隐藏
                clearTimeout(_hidingTicket);
                clearTimeout(_showingTicket);
                _hidingTicket = setTimeout(_hide, _hideDelay);
                return;
            }
            var series = option.series;
            var seriesArray = [];
            var seriesIndex = [];
            var categoryAxis;
            var x;
            var y;

            var formatter;
            var showContent;
            var specialCssText = '';
            if (option.tooltip.trigger == 'axis') {
                if (option.tooltip.show === false) {
                    return;
                }
                formatter = option.tooltip.formatter;
            }

            if (xAxisIndex != -1
                && xAxis.getAxis(xAxisIndex).type
                   == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
            ) {
                // 横轴为类目轴，找到所有用这条横轴并且axis触发的系列数据
                categoryAxis = xAxis.getAxis(xAxisIndex);
                for (var i = 0, l = series.length; i < l; i++) {
                    if (series[i].xAxisIndex == xAxisIndex
                        && self.deepQuery(
                               [series[i], option], 'tooltip.trigger'
                           ) == 'axis'
                    ) {
                        showContent = self.deepQuery(
                            [series[i]],
                            'tooltip.showContent'
                        ) || showContent;
                        formatter = self.deepQuery(
                            [series[i]],
                            'tooltip.formatter'
                        ) || formatter;
                        specialCssText += _style(self.deepQuery(
                                              [series[i]], 'tooltip'
                                          ));
                        seriesArray.push(series[i]);
                        seriesIndex.push(i);
                    }
                }
                // 寻找高亮元素
                messageCenter.dispatch(
                    ecConfig.EVENT.TOOLTIP_HOVER,
                    _event,
                    {
                        seriesIndex : seriesIndex,
                        dataIndex : dataIndex
                    }
                );
                y = zrEvent.getY(_event) + 10;
                x = categoryAxis.getCoordByIndex(dataIndex);
                _styleAxisPointer(
                    seriesArray,
                    x, grid.getY(), 
                    x, grid.getYend(),
                    categoryAxis.getGap()
                );
                x += 10;
            }
            else if (yAxisIndex != -1
                     && yAxis.getAxis(yAxisIndex).type
                        == ecConfig.COMPONENT_TYPE_AXIS_CATEGORY
            ) {
                // 纵轴为类目轴，找到所有用这条纵轴并且axis触发的系列数据
                categoryAxis = yAxis.getAxis(yAxisIndex);
                for (var i = 0, l = series.length; i < l; i++) {
                    if (series[i].yAxisIndex == yAxisIndex
                        && self.deepQuery(
                               [series[i], option], 'tooltip.trigger'
                           ) == 'axis'
                    ) {
                        showContent = self.deepQuery(
                            [series[i]],
                            'tooltip.showContent'
                        ) || showContent;
                        formatter = self.deepQuery(
                            [series[i]],
                            'tooltip.formatter'
                        ) || formatter;
                        specialCssText += _style(self.deepQuery(
                                              [series[i]], 'tooltip'
                                          ));
                        seriesArray.push(series[i]);
                        seriesIndex.push(i);
                    }
                }
                // 寻找高亮元素
                messageCenter.dispatch(
                    ecConfig.EVENT.TOOLTIP_HOVER,
                    _event,
                    {
                        seriesIndex : seriesIndex,
                        dataIndex : dataIndex
                    }
                );
                x = zrEvent.getX(_event) + 10;
                y = categoryAxis.getCoordByIndex(dataIndex);
                _styleAxisPointer(
                    seriesArray,
                    grid.getX(), y, 
                    grid.getXend(), y,
                    categoryAxis.getGap()
                );
                y += 10;
            }

            if (seriesArray.length > 0) {
                var data;
                if (typeof formatter == 'function') {
                    var params = [];
                    for (var i = 0, l = seriesArray.length; i < l; i++) {
                        data = seriesArray[i].data[dataIndex];
                        data = typeof data != 'undefined'
                               ? (typeof data.value != 'undefined'
                                   ? data.value
                                   : data)
                               : '-';
                               
                        params.push([
                            seriesArray[i].name || '',
                            categoryAxis.getNameByIndex(dataIndex),
                            data
                        ]);
                    }
                    _curTicket = 'axis:' + dataIndex;
                    _tDom.innerHTML = formatter(
                        params, _curTicket, _setContent
                    );
                }
                else if (typeof formatter == 'string') {
                    _curTicket = NaN;
                    formatter = formatter.replace('{a}','{a0}')
                                         .replace('{b}','{b0}')
                                         .replace('{c}','{c0}');
                    for (var i = 0, l = seriesArray.length; i < l; i++) {
                        formatter = formatter.replace(
                            '{a' + i + '}',
                            _encodeHTML(seriesArray[i].name || '')
                        );
                        formatter = formatter.replace(
                            '{b' + i + '}',
                            _encodeHTML(categoryAxis.getNameByIndex(dataIndex))
                        );
                        data = seriesArray[i].data[dataIndex];
                        data = typeof data != 'undefined'
                               ? (typeof data.value != 'undefined'
                                   ? data.value
                                   : data)
                               : '-';
                        formatter = formatter.replace(
                            '{c' + i + '}',
                            data
                        );
                    }
                    _tDom.innerHTML = formatter;
                }
                else {
                    _curTicket = NaN;
                    formatter = _encodeHTML(
                        categoryAxis.getNameByIndex(dataIndex)
                    );

                    for (var i = 0, l = seriesArray.length; i < l; i++) {
                        formatter += '<br/>' 
                                     + _encodeHTML(seriesArray[i].name || '')
                                     + ' : ';
                        data = seriesArray[i].data[dataIndex];
                        data = typeof data != 'undefined'
                               ? (typeof data.value != 'undefined'
                                   ? data.value
                                   : data)
                               : '-';
                        formatter += data;
                    }
                    _tDom.innerHTML = formatter;
                }

                if (showContent === false || !option.tooltip.showContent) {
                    // 只用tooltip的行为，不显示主体
                    return;
                }
                
                if (!self.hasAppend) {
                    _tDom.style.left = _zrWidth / 2 + 'px';
                    _tDom.style.top = _zrHeight / 2 + 'px';
                    dom.firstChild.appendChild(_tDom);
                    self.hasAppend = true;
                }
                _show(x, y, specialCssText);
            }
        }
        
        /**
         * 极坐标 
         */
        function _showPolarTrigger(polarIndex, dataIndex) {
            if (typeof polar == 'undefined'
                || typeof polarIndex == 'undefined'
                || typeof dataIndex == 'undefined'
                || dataIndex < 0
            ) {
                return false;
            }
            var series = option.series;
            var seriesArray = [];

            var formatter;
            var showContent;
            var specialCssText = '';
            if (option.tooltip.trigger == 'axis') {
                if (option.tooltip.show === false) {
                    return false;
                }
                formatter = option.tooltip.formatter;
            }

            // 找到所有用这个极坐标并且axis触发的系列数据
            for (var i = 0, l = series.length; i < l; i++) {
                if (series[i].polarIndex == polarIndex
                    && self.deepQuery(
                           [series[i], option], 'tooltip.trigger'
                       ) == 'axis'
                ) {
                    showContent = self.deepQuery(
                        [series[i]],
                        'tooltip.showContent'
                    ) || showContent;
                    formatter = self.deepQuery(
                        [series[i]],
                        'tooltip.formatter'
                    ) || formatter;
                    specialCssText += _style(self.deepQuery(
                                          [series[i]], 'tooltip'
                                      ));
                    seriesArray.push(series[i]);
                }
            }
            if (seriesArray.length > 0) {
                var polarData;
                var data;
                var params = [];
                var indicatorName = 
                    option.polar[polarIndex].indicator[dataIndex].text;

                for (var i = 0, l = seriesArray.length; i < l; i++) {
                    polarData = seriesArray[i].data;
                    for (var j = 0, k = polarData.length; j < k; j++) {
                        data = polarData[j];
                        data = typeof data != 'undefined'
                               ? data
                               : {name:'', value: {dataIndex:'-'}};
                               
                        params.push([
                            seriesArray[i].name || '',
                            data.name,
                            data.value[dataIndex],
                            indicatorName
                        ]);
                    }
                }
                if (params.length <= 0) {
                    return;
                }
                if (typeof formatter == 'function') {
                    _curTicket = 'axis:' + dataIndex;
                    _tDom.innerHTML = formatter(
                        params, _curTicket, _setContent
                    );
                }
                else if (typeof formatter == 'string') {
                    formatter = formatter.replace('{a}','{a0}')
                                         .replace('{b}','{b0}')
                                         .replace('{c}','{c0}')
                                         .replace('{d}','{d0}');
                    for (var i = 0, l = params.length; i < l; i++) {
                        formatter = formatter.replace(
                            '{a' + i + '}',
                            _encodeHTML(params[i][0])
                        );
                        formatter = formatter.replace(
                            '{b' + i + '}',
                            _encodeHTML(params[i][1])
                        );
                        formatter = formatter.replace(
                            '{c' + i + '}',
                            params[i][2]
                        );
                        formatter = formatter.replace(
                            '{d' + i + '}',
                            _encodeHTML(params[i][3])
                        );
                    }
                    _tDom.innerHTML = formatter;
                }
                else {
                    formatter = _encodeHTML(params[0][1]) + '<br/>' 
                                + _encodeHTML(params[0][3]) + ' : ' 
                                + params[0][2];
                    for (var i = 1, l = params.length; i < l; i++) {
                        formatter += '<br/>' + _encodeHTML(params[i][1]) 
                                     + '<br/>';
                        formatter += _encodeHTML(params[i][3]) + ' : ' 
                                     + params[i][2];
                    }
                    _tDom.innerHTML = formatter;
                }

                if (showContent === false || !option.tooltip.showContent) {
                    // 只用tooltip的行为，不显示主体
                    return;
                }
                
                if (!self.hasAppend) {
                    _tDom.style.left = _zrWidth / 2 + 'px';
                    _tDom.style.top = _zrHeight / 2 + 'px';
                    dom.firstChild.appendChild(_tDom);
                    self.hasAppend = true;
                }
                _show(
                    zrEvent.getX(_event), 
                    zrEvent.getY(_event), 
                    specialCssText
                );
                return true;
            }
        }
        
        function _showItemTrigger() {
            var serie = ecData.get(_curTarget, 'series');
            var data = ecData.get(_curTarget, 'data');
            var name = ecData.get(_curTarget, 'name');
            var value = ecData.get(_curTarget, 'value');
            var special = ecData.get(_curTarget, 'special');
            var special2 = ecData.get(_curTarget, 'special2');
            // 从低优先级往上找到trigger为item的formatter和样式
            var formatter;
            var showContent;
            var specialCssText = '';
            var indicator;
            var html = '';
            if (_curTarget._type != 'island') {
                // 全局
                if (option.tooltip.trigger == 'item') {
                    formatter = option.tooltip.formatter;
                }
                // 系列
                if (self.deepQuery([serie], 'tooltip.trigger') == 'item') {
                    showContent = self.deepQuery(
                                      [serie], 'tooltip.showContent'
                                  ) || showContent;
                    formatter = self.deepQuery(
                                    [serie], 'tooltip.formatter'
                                ) || formatter;
                    specialCssText += _style(self.deepQuery(
                                          [serie], 'tooltip'
                                      ));
                }
                // 数据项
                showContent = self.deepQuery(
                                  [data], 'tooltip.showContent'
                              ) || showContent;
                formatter = self.deepQuery(
                                [data], 'tooltip.formatter'
                            ) || formatter;
                specialCssText += _style(self.deepQuery([data], 'tooltip'));
            }
            else {
                showContent = self.deepQuery(
                    [data, serie, option],
                    'tooltip.showContent'
                );
                formatter = self.deepQuery(
                    [data, serie, option],
                    'tooltip.islandFormatter'
                );
            }

            if (typeof formatter == 'function') {
                _curTicket = (serie.name || '')
                             + ':'
                             + ecData.get(_curTarget, 'dataIndex');
                _tDom.innerHTML = formatter(
                    [
                        serie.name || '',
                        name,
                        value,
                        special,
                        special2
                    ],
                    _curTicket,
                    _setContent
                );
            }
            else if (typeof formatter == 'string') {
                _curTicket = NaN;
                formatter = formatter.replace('{a}','{a0}')
                                     .replace('{b}','{b0}')
                                     .replace('{c}','{c0}');
                formatter = formatter.replace(
                                          '{a0}', _encodeHTML(serie.name || '')
                                      )
                                     .replace('{b0}', _encodeHTML(name))
                                     .replace('{c0}', value);

                formatter = formatter.replace('{d}','{d0}')
                                     .replace('{d0}', special || '');
                formatter = formatter.replace('{e}','{e0}')
                    .replace('{e0}', ecData.get(_curTarget, 'special2') || '');

                _tDom.innerHTML = formatter;
            }
            else {
                _curTicket = NaN;
                if (serie.type == ecConfig.CHART_TYPE_SCATTER) {
                    _tDom.innerHTML = (typeof serie.name != 'undefined'
                                          ? (_encodeHTML(serie.name) + '<br/>')
                                          : ''
                                      ) 
                                      + (name === '' 
                                            ? '' : (_encodeHTML(name) + ' : ')
                                      ) 
                                      + value 
                                      + (typeof special == 'undefined'
                                          ? ''
                                          : (' (' + special + ')'));
                }
                else if (serie.type == ecConfig.CHART_TYPE_RADAR) {
                    indicator = special;
                    html += _encodeHTML(
                        name === '' ? (serie.name || '') : name
                    );
                    html += html === '' ? '' : '<br />';
                    for (var i = 0 ; i < indicator.length; i ++) {
                        html += _encodeHTML(indicator[i].text) + ' : ' 
                                + value[i] + '<br />';
                    }
                    _tDom.innerHTML = html;
                }
                else if (serie.type == ecConfig.CHART_TYPE_CHORD) {
                    if (typeof special2 == 'undefined') {
                        // 外环上
                        _tDom.innerHTML = _encodeHTML(name)+' (' + value + ')';
                    }
                    else {
                        var name1 = _encodeHTML(name);
                        var name2 = _encodeHTML(special);
                        // 内部弦上
                        _tDom.innerHTML = (typeof serie.name != 'undefined'
                                          ? (_encodeHTML(serie.name) + '<br/>')
                                          : '')
                              + name1 + ' -> ' + name2 + ' (' + value + ')'
                              + '<br />'
                              + name2 + ' -> ' + name1+ ' (' + special2 + ')';
                    }
                }
                else {
                    _tDom.innerHTML = (typeof serie.name != 'undefined'
                                      ? (_encodeHTML(serie.name) + '<br/>')
                                      : '')
                                      + _encodeHTML(name) + ' : ' + value +
                                      (typeof special == 'undefined'
                                      ? ''
                                      : (' (' + special + ')'));
                }
            }

            if (!_axisLineShape.invisible) {
                _axisLineShape.invisible = true;
                zr.modShape(_axisLineShape.id, _axisLineShape);
                zr.refresh();
            }
            
            if (showContent === false || !option.tooltip.showContent) {
                // 只用tooltip的行为，不显示主体
                return;
            }
            
            if (!self.hasAppend) {
                _tDom.style.left = _zrWidth / 2 + 'px';
                _tDom.style.top = _zrHeight / 2 + 'px';
                dom.firstChild.appendChild(_tDom);
                self.hasAppend = true;
            }

            _show(
                zrEvent.getX(_event) + 20,
                zrEvent.getY(_event) - 20,
                specialCssText
            );
        }

        /**
         * 设置坐标轴指示器样式 
         */
        function _styleAxisPointer(
            seriesArray, xStart, yStart, xEnd, yEnd, gap
        ) {
            if (seriesArray.length > 0) {
                var queryTarget;
                var curType;
                var axisPointer = option.tooltip.axisPointer;
                var pointType = axisPointer.type;
                var lineColor = axisPointer.lineStyle.color;
                var lineWidth = axisPointer.lineStyle.width;
                var lineType = axisPointer.lineStyle.type;
                var areaSize = axisPointer.areaStyle.size;
                var areaColor = axisPointer.areaStyle.color;
                
                for (var i = 0, l = seriesArray.length; i < l; i++) {
                    if (self.deepQuery(
                           [seriesArray[i], option], 'tooltip.trigger'
                       ) == 'axis'
                    ) {
                        queryTarget = [seriesArray[i]];
                        curType = self.deepQuery(
                            queryTarget,
                            'tooltip.axisPointer.type'
                        );
                        pointType = curType || pointType; 
                        if (curType == 'line') {
                            lineColor = self.deepQuery(
                                queryTarget,
                                'tooltip.axisPointer.lineStyle.color'
                            ) || lineColor;
                            lineWidth = self.deepQuery(
                                queryTarget,
                                'tooltip.axisPointer.lineStyle.width'
                            ) || lineWidth;
                            lineType = self.deepQuery(
                                queryTarget,
                                'tooltip.axisPointer.lineStyle.type'
                            ) || lineType;
                        }
                        else if (curType == 'shadow') {
                            areaSize = self.deepQuery(
                                queryTarget,
                                'tooltip.axisPointer.areaStyle.size'
                            ) || areaSize;
                            areaColor = self.deepQuery(
                                queryTarget,
                                'tooltip.axisPointer.areaStyle.color'
                            ) || areaColor;
                        }
                    }
                }
                
                if (pointType == 'line') {
                    _axisLineShape.style = {
                        xStart : xStart,
                        yStart : yStart,
                        xEnd : xEnd,
                        yEnd : yEnd,
                        strokeColor : lineColor,
                        lineWidth : lineWidth,
                        lineType : lineType
                    };
                    _axisLineShape.invisible = false;
                    zr.modShape(_axisLineShape.id, _axisLineShape);
                }
                else if (pointType == 'shadow') {
                    if (typeof areaSize == 'undefined' 
                        || areaSize == 'auto'
                        || isNaN(areaSize)
                    ) {
                        lineWidth = gap;
                    }
                    else {
                        lineWidth = areaSize;
                    }
                    if (xStart == xEnd) {
                        // 纵向
                        if (Math.abs(grid.getX() - xStart) < 2) {
                            // 最左边
                            lineWidth /= 2;
                            xStart = xEnd = xEnd + lineWidth / 2;
                        }
                        else if (Math.abs(grid.getXend() - xStart) < 2) {
                            // 最右边
                            lineWidth /= 2;
                            xStart = xEnd = xEnd - lineWidth / 2;
                        }
                    }
                    else if (yStart == yEnd) {
                        // 横向
                        if (Math.abs(grid.getY() - yStart) < 2) {
                            // 最上边
                            lineWidth /= 2;
                            yStart = yEnd = yEnd + lineWidth / 2;
                        }
                        else if (Math.abs(grid.getYend() - yStart) < 2) {
                            // 最右边
                            lineWidth /= 2;
                            yStart = yEnd = yEnd - lineWidth / 2;
                        }
                    }
                    _axisShadowShape.style = {
                        xStart : xStart,
                        yStart : yStart,
                        xEnd : xEnd,
                        yEnd : yEnd,
                        strokeColor : areaColor,
                        lineWidth : lineWidth
                    };
                    _axisShadowShape.invisible = false;
                    zr.modShape(_axisShadowShape.id, _axisShadowShape);
                }
                zr.refresh();
            }
        }

        /**
         * zrender事件响应：鼠标移动
         */
        function _onmousemove(param) {
            clearTimeout(_hidingTicket);
            clearTimeout(_showingTicket);
            var target = param.target;
            var mx = zrEvent.getX(param.event);
            var my = zrEvent.getY(param.event);
            if (!target) {
                // 判断是否落到直角系里，axis触发的tooltip
                _curTarget = false;
                _event = param.event;
                _event._target = _event.target || _event.toElement;
                _event.zrenderX = mx;
                _event.zrenderY = my;
                if (_needAxisTrigger 
                    && grid 
                    && zrArea.isInside(
                        rectangle,
                        grid.getArea(),
                        mx,
                        my
                    )
                ) {
                    _showingTicket = setTimeout(_tryShow, _showDelay);
                }
                else if (_needAxisTrigger 
                        && polar 
                        && polar.isInside([mx, my]) != -1
                ) {
                    _showingTicket = setTimeout(_tryShow, _showDelay);
                }
                else {
                    _hidingTicket = setTimeout(_hide, _hideDelay);
                }
            }
            else {
                _curTarget = target;
                _event = param.event;
                _event._target = _event.target || _event.toElement;
                _event.zrenderX = mx;
                _event.zrenderY = my;
                var polarIndex;
                if (_needAxisTrigger 
                    && polar 
                    && (polarIndex = polar.isInside([mx, my])) != -1
                ) {
                    // 看用这个polar的系列数据是否是axis触发，如果是设置_curTarget为nul
                    var series = option.series;
                    for (var i = 0, l = series.length; i < l; i++) {
                        if (series[i].polarIndex == polarIndex
                            && self.deepQuery(
                                   [series[i], option], 'tooltip.trigger'
                               ) == 'axis'
                        ) {
                            _curTarget = null;
                            break;
                        }
                    }
                   
                }
                _showingTicket = setTimeout(_tryShow, _showDelay);
            }
        }

        /**
         * zrender事件响应：鼠标离开绘图区域
         */
        function _onglobalout() {
            clearTimeout(_hidingTicket);
            clearTimeout(_showingTicket);
            _hidingTicket = setTimeout(_hide, _hideDelay);
        }

        /**
         * 异步回调填充内容
         */
        function _setContent(ticket, content) {
            if (ticket == _curTicket) {
                _tDom.innerHTML = content;
            }
            var cssText = '';
            var domHeight = _tDom.offsetHeight;
            var domWidth = _tDom.offsetWidth;

            if (_tDom.offsetLeft + domWidth > _zrWidth) {
                cssText += 'left:' + (_zrWidth - domWidth) + 'px;';
            }
            if (_tDom.offsetTop + domHeight > _zrHeight) {
                cssText += 'top:' + (_zrHeight - domHeight) + 'px;';
            }
            if (cssText !== '') {
                _tDom.style.cssText += cssText;
            }
            
            if (_zrWidth - _tDom.offsetLeft < 100 
                || _zrHeight - _tDom.offsetTop < 100
            ) {
                // 太靠边的做一次refixed
                setTimeout(_refixed, 20);
            }
        }

        function setComponent(newComponent) {
            component = newComponent;
            grid = component.grid;
            xAxis = component.xAxis;
            yAxis = component.yAxis;
            polar = component.polar;
        }
        
        function ontooltipHover(param, tipShape) {
            if (!_lastTipShape // 不存在或者存在但dataIndex发生变化才需要重绘
                || (_lastTipShape && _lastTipShape.dataIndex != param.dataIndex)
            ) {
                if (_lastTipShape && _lastTipShape.tipShape.length > 0) {
                    zr.delShape(_lastTipShape.tipShape);
                }
                for (var i = 0, l = tipShape.length; i < l; i++) {
                    tipShape[i].id = zr.newShapeId('tooltip');
                    tipShape[i].zlevel = _zlevelBase;
                    tipShape[i].style = zrShapeBase.getHighlightStyle(
                        tipShape[i].style,
                        tipShape[i].highlightStyle
                    );
                    tipShape[i].draggable = false;
                    tipShape[i].hoverable = false;
                    tipShape[i].clickable = false;
                    tipShape[i].ondragend = null;
                    tipShape[i].ondragover = null;
                    tipShape[i].ondrop = null;
                    zr.addShape(tipShape[i]);
                }
                _lastTipShape = {
                    dataIndex : param.dataIndex,
                    tipShape : tipShape
                };
            }
        }
        
        function ondragend() {
            _hide();
        }

        function init(newOption, newDom) {
            option = newOption;
            dom = newDom;

            option.tooltip = self.reformOption(option.tooltip);
            option.tooltip.textStyle = zrUtil.merge(
                option.tooltip.textStyle,
                ecConfig.textStyle,
                {
                    'overwrite': false,
                    'recursive': true
                }
            );
            // 补全padding属性
            option.tooltip.padding = self.reformCssArray(
                option.tooltip.padding
            );

            _needAxisTrigger = false;
            if (option.tooltip.trigger == 'axis') {
                _needAxisTrigger = true;
            }

            var series = option.series;
            for (var i = 0, l = series.length; i < l; i++) {
                if (self.deepQuery([series[i]], 'tooltip.trigger')
                    == 'axis'
                ) {
                    _needAxisTrigger = true;
                    break;
                }
            }
            
            _showDelay = option.tooltip.showDelay;
            _hideDelay = option.tooltip.hideDelay;
            _defaultCssText = _style(option.tooltip);
            _tDom.style.position = 'absolute';  // 不是多余的，别删！
            self.hasAppend = false;
        }
        
        /**
         * 刷新
         */
        function refresh(newOption) {
            if (newOption) {
                option = newOption;
                option.tooltip = self.reformOption(option.tooltip);
                option.tooltip.textStyle = zrUtil.merge(
                    option.tooltip.textStyle,
                    ecConfig.textStyle,
                    {
                        'overwrite': false,
                        'recursive': true
                    }
                );
                // 补全padding属性
                option.tooltip.padding = self.reformCssArray(
                    option.tooltip.padding
                );
            }
        }

        /**
         * zrender事件响应：窗口大小改变
         */
        function resize() {
            _zrHeight = zr.getHeight();
            _zrWidth = zr.getWidth();
        }

        /**
         * 释放后实例不可用，重载基类方法
         */
        function dispose() {
            clearTimeout(_hidingTicket);
            clearTimeout(_showingTicket);
            zr.un(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
            zr.un(zrConfig.EVENT.GLOBALOUT, _onglobalout);

            if (self.hasAppend) {
                dom.firstChild.removeChild(_tDom);
            }
            _tDom = null;

            // self.clear();
            self.shapeList = null;
            self = null;
        }
        
        /**
         * html转码的方法
         */
        _encodeHTML = function (source) {
            return String(source)
                        .replace(/&/g, '&amp;')
                        .replace(/</g, '&lt;')
                        .replace(/>/g, '&gt;')
                        .replace(/"/g, '&quot;')
                        .replace(/'/g, '&#39;');
        };
        
        zr.on(zrConfig.EVENT.MOUSEMOVE, _onmousemove);
        zr.on(zrConfig.EVENT.GLOBALOUT, _onglobalout);

        // 重载基类方法
        self.dispose = dispose;

        self.init = init;
        self.refresh = refresh;
        self.resize = resize;
        self.setComponent = setComponent;
        self.ontooltipHover = ontooltipHover;
        self.ondragend = ondragend;
        init(option, dom);
    }

    require('../component').define('tooltip', Tooltip);

    return Tooltip;
});