Fix tooltip

src/chart/bar/BarView.js

@@ -47,7 +47,6 @@ define(function (require) {
                     });
 
                     data.setItemGraphicEl(dataIndex, rect);
-                    rect.dataIndex = dataIndex;
 
                     group.add(rect);
 
@@ -68,7 +67,6 @@ define(function (require) {
                     }, 500, 'cubicOut');
 
                     data.setItemGraphicEl(newIndex, rect);
-                    rect.dataIndex = newIndex;
 
                     // Add back
                     group.add(rect);

src/chart/helper/DataSymbol.js

@@ -76,9 +76,6 @@ define(function (require) {
 
                     data.setItemGraphicEl(newIdx, symbolEl);
 
-                    // Attach data on the el
-                    symbolEl.dataIndex = newIdx;
-
                     group.add(symbolEl);
                 })
                 .update(function (newIdx, oldIdx) {
@@ -107,7 +104,6 @@ define(function (require) {
                     }
 
                     data.setItemGraphicEl(newIdx, el);
-                    data.dataIndex = newIdx;
 
                     // Add back
                     group.add(el);

src/component/tooltip.js

+// FIXME Better way to pack data in graphic element
 define(function (require) {
 
     var TooltipContent = require('./tooltip/TooltipContent');
@@ -69,23 +70,23 @@ define(function (require) {
             var el = e.target;
             var tooltipModel = this._tooltipModel;
             var trigger = tooltipModel.get('trigger');
+            var ecModel = this._ecModel;
 
             if (!tooltipModel) {
                 return;
             }
 
             if (trigger === 'item') {
-
-                if (!el || !el.data) {
+                if (!el || el.dataIndex == null) {
 
                     this._tooltipContent.hideLater(tooltipModel.get('hideDelay'));
 
                     return;
                 }
 
-                var dataItem = el.data;
+                var seriesModel = ecModel.getSeriesByIndex(el.seriesIndex);
 
-                this._showItemTooltip(dataItem, e);
+                this._showItemTooltip(seriesModel, el.dataIndex, e);
             }
             else {
 
@@ -347,22 +348,21 @@ define(function (require) {
 
         /**
          * Show tooltip on item
-         * @param {module:echarts/model/Model}
+         * @param {module:echarts/model/Series} seriesModel
+         * @param {number} dataIndex
          * @param {Object} e
          */
-        _showItemTooltip: function (dataItem, e) {
-
-            var seriesModel = dataItem.parentModel;
+        _showItemTooltip: function (seriesModel, dataIndex, e) {
+            // FIXME Graph data
+            var data = seriesModel.getData();
+            var itemModel = data.getItemModel(dataIndex);
 
-            if (!seriesModel) {
-                return;
-            }
             var rootTooltipModel = this._tooltipModel;
             var showContent = rootTooltipModel.get('showContent');
 
             var tooltipContent = this._tooltipContent;
 
-            var tooltipModel = dataItem.getModel('tooltip');
+            var tooltipModel = itemModel.getModel('tooltip');
 
             // If series model
             if (tooltipModel.parentModel) {
@@ -376,7 +376,7 @@ define(function (require) {
                 tooltipContent.show(tooltipModel);
 
                 tooltipContent.setContent(
-                    seriesModel.formatTooltipHTML(dataItem)
+                    seriesModel.formatTooltipHTML(dataIndex, data.getName(dataIndex))
                 );
 
                 var x = e.offsetX + 20;

src/data/List.js

@@ -90,6 +90,10 @@ define(function (require) {
          */
         this._storage = {};
 
+        /**
+         * @type {Array.<string>}
+         */
+        this._nameList = [];
         /**
          * Models of data option is stored sparse for optimizing memory cost
          * @type {Array.<module:echarts/model/Model>}
@@ -137,8 +141,10 @@ define(function (require) {
 
     /**
      * Initialize from data
+     * @param {Array.<Object|number|Array>} data
+     * @param {Array.<string>} [nameList]
      */
-    listProto.initData = function (data) {
+    listProto.initData = function (data, nameList) {
         // Clear
         var optionModels = this._optionModels = [];
         var storage = this._storage = {};
@@ -200,6 +206,8 @@ define(function (require) {
         }
 
         this._rawValueDims = rawValue1D ? dimensions.slice(1, 2) : dimensions.slice();
+
+        this._nameList = nameList;
     };
 
     /**
@@ -292,11 +300,25 @@ define(function (require) {
 
     /**
      * Get raw data index
+     * @param {number} idx
+     * @return {number}
      */
     listProto.getRawIndex = function (idx) {
         return this.indices[idx];
     };
 
+    var nameQueryPath = ['name'];
+    /**
+     * @param {number} idx
+     * @return {string}
+     */
+    listProto.getName = function (idx) {
+        var nameList = this._nameList;
+        return (nameList && nameList[this.indices[idx]])
+            || this.getItemModel(idx).get(nameQueryPath, true) || '';
+    };
+
+
     function normalizeDimensions(dimensions) {
         if (typeof (dimensions) === 'string') {
             dimensions = [dimensions];
@@ -447,11 +469,13 @@ define(function (require) {
     /**
      * Get model of one data item.
      * It will create a temporary model if value on idx is not an option.
+     *
+     * @param {number} idx
      */
     listProto.getItemModel = function (idx) {
         var storage = this._storage;
         var optionModelIndices = storage.$optionModelIndices;
-        var modelIndex = optionModelIndices && optionModelIndices[idx];
+        var modelIndex = optionModelIndices && optionModelIndices[this.indices[idx]];
 
         var model = this._optionModels[modelIndex];
 
@@ -571,6 +595,11 @@ define(function (require) {
      * @param {module:zrender/Element} el
      */
     listProto.setItemGraphicEl = function (idx, el) {
+        // Add data index and series index for indexing the data by element
+        // Useful in tooltip
+        el.dataIndex = idx;
+        el.seriesIndex = this.seriesModel.seriesIndex;
+
         this._graphicEls[idx] = el;
     };
 
@@ -602,6 +631,7 @@ define(function (require) {
         list._storage = this._storage;
         list._optionModels = this._optionModels;
         list._rawValueDims = this._rawValueDims;
+        list._nameList = this._nameList;
 
         list.indices = this.indices.slice();
 
@@ -616,6 +646,7 @@ define(function (require) {
         var dimensions;
 
         var categoryAxisModel;
+        var nameList = [];
         // FIXME
         // 这里 List 跟几个坐标系和坐标系 Model 耦合了
         if (coordinateSystem === 'cartesian2d') {
@@ -672,9 +703,13 @@ define(function (require) {
             }
         }
 
+        if (categoryAxisModel) {
+            nameList = categoryAxisModel.get('data');
+        }
+
         var list = new List(dimensions, seriesModel);
 
-        list.initData(data);
+        list.initData(data, nameList);
 
         return list;
     };

src/model/Global.js

@@ -230,6 +230,25 @@ define(function (require) {
             }
         },
 
+        // FIXME Index of series is confusing
+        /**
+         * @param {number} seriesIndex
+         * @param {boolean} beforeProcessing
+         * @return {module:echarts/model/Series}
+         */
+        getSeriesByIndex: function (seriesIndex, beforeProcessing) {
+            // return this._componentsMap.series[seriesIndex];
+            var series = beforeProcessing
+                ? this._componentsMapBeforeProcessing.series
+                : this._componentsMap.series;
+            for (var i = 0, len = series.length; i < len; i++) {
+                // name should be unique.
+                if (series[i].seriesIndex === seriesIndex) {
+                    return series[i];
+                }
+            }
+        },
+
         /**
          * @param {string} type
          * @return {Array.<module:echarts/model/Series>}
@@ -240,14 +259,6 @@ define(function (require) {
             });
         },
 
-        /**
-         * @param {number} seriesIndex
-         * @return {module:echarts/model/Series}
-         */
-        getSeries: function (seriesIndex) {
-            return this._componentsMap.series[seriesIndex];
-        },
-
         /**
          * @return {Array.<module:echarts/model/Series>}
          */

src/model/Series.js

@@ -90,15 +90,16 @@ define(function(require) {
         /**
          * Default tooltip formatter
          *
-         * @param {module:echarts/model/Model} dataItem
+         * @param {number} dataIndex
          */
-        formatTooltipHTML: function (dataItem) {
-            var value = dataItem.getRawValue();
+        formatTooltipHTML: function (dataIndex, name) {
+            var data = this._data;
+            var value = data.getRawValue(dataIndex);
             var formattedValue = zrUtil.isArray(value)
                 ? zrUtil.map(value, addCommas) : addCommas(value);
 
             return encodeHTML(this.name) + '<br />'
-                + encodeHTML(dataItem.name) + ' : '
+                + encodeHTML(name) + ' : '
                 + formattedValue;
         },
 

test/bar.html

@@ -18,7 +18,8 @@
                 'echarts',
                 'echarts/chart/bar',
                 'echarts/component/legend',
-                'echarts/component/grid'
+                'echarts/component/grid',
+                'echarts/component/tooltip'
             ], function (echarts) {
 
                 var chart = echarts.init(document.getElementById('main'), null, {
@@ -30,7 +31,7 @@
                 var data2 = [];
                 var data3 = [];
 
-                for (var i = 0; i < 20; i++) {
+                for (var i = 0; i < 10; i++) {
                     xAxisData.push('类目' + i);
                     data1.push(Math.random() * 5);
                     data2.push(Math.random());
@@ -52,6 +53,7 @@
                             // 'bar': false
                         }
                     },
+                    tooltip: {},
                     xAxis: {
                         data: xAxisData,
                         splitArea: {
@@ -59,6 +61,7 @@
                         }
                     },
                     yAxis: {
+                        // inverse: true,
                         splitArea: {
                             show: false
                         }