Tooltip

src/component/tooltip.js

+define(function (require) {
+
+    var TooltipContent = require('./tooltip/TooltipContent');
+    var zrUtil = require('zrender/core/util');
+
+    require('./tooltip/TooltipModel');
+
+    require('../echarts').extendComponentView({
+
+        type: 'tooltip',
+
+        init: function (ecModel, api) {
+            var zr = api.getZr();
+
+            zr.on('mousemove', this._mouseMove, this);
+
+            this._tooltipContent = new TooltipContent(api.getDom());
+        },
+
+        render: function (tooltipModel) {
+            this._tooltipModel = tooltipModel;
+
+            this._tooltipContent.hide();
+        },
+
+        _mouseMove: function (e) {
+            var el = e.target;
+            var tooltipContent = this._tooltipContent;
+            if (! el) {
+
+                if (tooltipContent.isShow()) {
+                    this._hideTimeout =
+                        setTimeout(zrUtil.bind(tooltipContent.hide, tooltipContent), 1000);
+                }
+
+                return;
+            }
+
+            var dataItem = el.data;
+
+            if (!dataItem) {
+                return;
+            }
+
+            clearTimeout(this._hideTimeout);
+
+            this._showTooltip(dataItem, e);
+        },
+
+        _showTooltip: function (dataItem, e) {
+
+            var seriesModel = dataItem.parentModel;
+
+            if (!seriesModel) {
+                return;
+            }
+
+            var tooltipContent = this._tooltipContent;
+
+            var tooltipModel = dataItem.getModel('tooltip');
+
+            // If series model
+            if (tooltipModel.parentModel) {
+                tooltipModel.parentModel.parentModel = this._tooltipModel;
+            }
+            else {
+                tooltipModel.parentModel = this._tooltipModel;
+            }
+
+            tooltipContent.show(tooltipModel);
+
+            tooltipContent.setContent(
+                seriesModel.formatTooltipHTML(dataItem)
+            );
+
+            var x = e.offsetX + 20;
+            var y = e.offsetY + 20;
+            tooltipContent.moveTo(x, y);
+        },
+
+        dispose: function (api) {
+
+            var zr = api.getZr();
+
+            zr.off('mousemove', this._mouseMove, this);
+        }
+    })
+});
\ No newline at end of file

src/component/tooltip/TooltipContent.js

+/**
+ * @module echarts/component/tooltip/TooltipContent
+ */
+define(function (require) {
+
+    var zrUtil = require('zrender/core/util');
+    var zrColor = require('zrender/tool/color');
+    var formatUtil = require('../../util/format');
+    var each = zrUtil.each;
+    var toCamelCase = formatUtil.toCamelCase;
+
+    var vendors = ['-moz-', '-webkit-', '-o-', ''];
+
+    var gCssText = 'position:absolute;display:block;border-style:solid;white-space:nowrap;';
+
+    /**
+     * @param {number} duration
+     * @return {string}
+     * @inner
+     */
+    function assembleTransition(duration) {
+        var transitionText = 'left ' + duration + 's,'
+                            + 'top ' + duration + 's';
+        return zrUtil.map(vendors, function (vendorPrefix) {
+            return vendorPrefix + 'transition:' + transitionText;
+        }).join(';');
+    }
+
+    /**
+     * @param {Object} textStyle
+     * @return {string}
+     * @inner
+     */
+    function assembleFont(textStyleModel) {
+        var cssText = [];
+
+        var fontSize = textStyleModel.get('fontSize');
+        var color = textStyleModel.get('color');
+
+        color && cssText.push('color:' + color);
+
+        fontSize &&
+            cssText.push('line-height:' + Math.round(fontSize * 3 / 2) + 'px');
+
+        cssText.push('font:' + textStyleModel.getFont());
+
+        each(['decoration', 'align'], function (name) {
+            var val = textStyleModel.get(name);
+            val && cssText.push('text-' + name + ':' + val);
+        });
+
+        return cssText.join(';');
+    }
+
+    /**
+     * @param {Object} tooltipModel
+     * @return {string}
+     * @inner
+     */
+    function assembleCssText(tooltipModel) {
+
+        tooltipModel = tooltipModel;
+
+        var cssText = [];
+
+        var transitionDuration = tooltipModel.get('transitionDuration');
+        var backgroundColor = tooltipModel.get('backgroundColor');
+        var textStyleModel = tooltipModel.getModel('textStyle');
+        var padding = tooltipModel.get('padding');
+
+        // Animation transition
+        transitionDuration &&
+            cssText.push(assembleTransition(transitionDuration));
+
+        if (backgroundColor) {
+            // for sb ie~
+            cssText.push(
+                'background-Color:' + zrColor.toHex(backgroundColor)
+            );
+            cssText.push('filter:alpha(opacity=70)');
+            cssText.push('background-Color:' + backgroundColor);
+        }
+
+        // Border style
+        each(['width', 'color', 'radius'], function (name) {
+            var borderName = 'border-' + name;
+            var camelCase = toCamelCase(borderName);
+            var val = tooltipModel.get(camelCase);
+            val != null &&
+                cssText.push(borderName + ':' + val + (name === 'color' ? '' : 'px'));
+        });
+
+        // Text style
+        cssText.push(assembleFont(textStyleModel));
+
+        // Padding
+        if (padding != null) {
+            cssText.push('padding:' + formatUtil.normalizeCssArray(padding).join('px ') + 'px');
+        }
+
+        return cssText.join(';') + ';';
+    }
+
+    /**
+     * @alias module:echarts/component/tooltip/TooltipContent
+     * @constructor
+     */
+    function TooltipContent(container) {
+
+        this.el = document.createElement('div');
+
+        container.appendChild(this.el);
+
+        this._show = false;
+    }
+
+    TooltipContent.prototype = {
+
+        constructor: TooltipContent,
+
+        show: function (tooltipModel) {
+            this.el.style.cssText = gCssText + assembleCssText(tooltipModel);;
+
+            this._show = true;
+        },
+
+        setContent: function (content) {
+            this.el.innerHTML = content;
+        },
+
+        moveTo: function (x, y) {
+            var style = this.el.style;
+            style.left = x + 'px';
+            style.top = y + 'px';
+        },
+
+        hide: function () {
+            this.el.style.display = 'none';
+        },
+
+        isShow: function () {
+            return this._show;
+        }
+    };
+
+    return TooltipContent;
+});
\ No newline at end of file

src/component/tooltip/TooltipModel.js

+define(function (require) {
+
+    require('../../echarts').extendComponentModel({
+
+        type: 'tooltip',
+
+        defaultOption: {
+            zlevel: 1,                  // 一级层叠，频繁变化的tooltip指示器在pc上独立一层
+            z: 8,                       // 二级层叠
+            show: true,
+            showContent: true,         // tooltip主体内容
+            trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
+
+            // If the tooltip follow the mouse position
+            // TODO
+            // followMouse: true,
+
+            // position: null          // 位置 {Array} | {Function}
+            // formatter: null         // 内容格式器：{string}（Template） ¦ {Function}
+            islandFormatter: '{a} <br/>{b} : {c}',  // 数据孤岛内容格式器
+            showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
+            hideDelay: 100,            // 隐藏延迟，单位ms
+            transitionDuration: 0.4,   // 动画变换时间，单位s
+            enterable: false,
+            backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
+            borderColor: '#333',       // 提示边框颜色
+            borderRadius: 4,           // 提示边框圆角，单位px，默认为4
+            borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
+            padding: 5,                // 提示内边距，单位px，默认各方向内边距为5，
+                                    // 接受数组分别设定上右下左边距，同css
+            axisPointer: {             // 坐标轴指示器，坐标轴触发有效
+                type: 'line',          // 默认为直线，可选为：'line' | 'shadow' | 'cross'
+                lineStyle: {           // 直线指示器样式设置
+                    color: '#48b',
+                    width: 2,
+                    type: 'solid'
+                },
+                crossStyle: {
+                    color: '#1e90ff',
+                    width: 1,
+                    type: 'dashed'
+                },
+                shadowStyle: {                      // 阴影指示器样式设置
+                    color: 'rgba(150,150,150,0.3)', // 阴影颜色
+                    width: 'auto',                  // 阴影大小
+                    type: 'default'
+                }
+            },
+            textStyle: {
+                color: '#fff'
+            }
+        }
+    });
+});
\ No newline at end of file

src/model/Global.js

@@ -139,6 +139,7 @@ define(function (require) {
                         componentModel.mergeOption(componentOption[i], this);
                     }
                     else {
+                        // PENDING Global as parent ?
                         componentModel = new ComponentModelClass(
                             componentOption[i], null, this,
                             this._getComponentsByTypes(dependencies), i