enable graphic component event.

src/component/graphic.js

@@ -264,7 +264,7 @@ echarts.extendComponentView({
         }
         this._lastGraphicModel = graphicModel;
 
-        this._updateElements(graphicModel, api);
+        this._updateElements(graphicModel);
         this._relocate(graphicModel, api);
     },
 
@@ -273,9 +273,8 @@ echarts.extendComponentView({
      *
      * @private
      * @param {Object} graphicModel graphic model
-     * @param {module:echarts/ExtensionAPI} api extension API
      */
-    _updateElements: function (graphicModel, api) {
+    _updateElements: function (graphicModel) {
         var elOptionsToUpdate = graphicModel.useElOptionsToUpdate();
 
         if (!elOptionsToUpdate) {
@@ -293,9 +292,8 @@ echarts.extendComponentView({
             var parentId = elOption.parentId;
             var targetElParent = parentId != null ? elMap.get(parentId) : rootGroup;
 
-            if (elOption.type === 'text') {
-                var elOptionStyle = elOption.style;
-
+            var elOptionStyle = elOption.style;
+            if (elOption.type === 'text' && elOptionStyle) {
                 // In top/bottom mode, textVerticalAlign should not be used, which cause
                 // inaccurately locating.
                 if (elOption.hv && elOption.hv[1]) {
@@ -340,6 +338,7 @@ echarts.extendComponentView({
             if (el) {
                 el.__ecGraphicWidth = elOption.width;
                 el.__ecGraphicHeight = elOption.height;
+                setEventData(el, graphicModel, elOption);
             }
         });
     },
@@ -529,4 +528,27 @@ function setLayoutInfoToExist(existItem, newElOption) {
         existItem.width == null && (existItem.width = newElOption.width = 0);
         existItem.height == null && (existItem.height = newElOption.height = 0);
     }
+}
+
+function setEventData(el, graphicModel, elOption) {
+    var eventData = el.eventData;
+    // Simple optimize for large amount of elements that no need event.
+    if (!el.silent && !el.ignore && !eventData) {
+        eventData = el.eventData = {
+            componentType: 'graphic',
+            graphicIndex: graphicModel.componentIndex,
+            data: el.__userData,
+            name: el.name
+        };
+    }
+
+    // `elOption.data` enables user to mount some info on
+    // elements and use them in event handlers.
+    // Update them only when user specified, otherwise, remain.
+    if (elOption.hasOwnProperty('data')) {
+        el.__userData = elOption.data;
+    }
+    if (eventData) {
+        eventData.data = el.__userData;
+    }
 }
\ No newline at end of file

src/echarts.js

@@ -1706,7 +1706,7 @@ function createExtensionAPI(ecInstance) {
  *   `{seriesIndex: 2}`, `{seriesName: 'xx'}`, `{seriesId: 'some'}`,
  *   `{xAxisIndex: 2}`, `{xAxisName: 'xx'}`, `{xAxisId: 'some'}`.
  * + The element query object, like:
- *   `{targetName: 'some'}` (only available in custom series).
+ *   `{name: 'some'}` (only available in custom series).
  *
  * Caveat: If a prop in the `query` object is `null/undefined`, it is the
  * same as there is no such prop in the `query` object.

test/ec-event.html

@@ -44,6 +44,8 @@ under the License.
         <div id="main2"></div>
         <h2><a href="./custom-feature.html">custom element event case.</a></h2>
         <div id="main3"></div>
+        <div id="main4"></div>
+        <div id="main5"></div>
 
 
         <script>
@@ -209,6 +211,149 @@ under the License.
 
 
 
+        <script>
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                option = {
+                    graphic: [{
+                        type: 'text',
+                        left: 50,
+                        top: 20,
+                        style: {
+                            textBackgroundColor: '#123456',
+                            textPadding: 5,
+                            fill: '#fff',
+                            text: [
+                                'this is a text of graphic component',
+                                'my name is not "aaa", click me must NOT console.log("aaa")'
+                            ].join('\n')
+                        }
+                    }, {
+                        type: 'text',
+                        name: 'aaa',
+                        left: 50,
+                        top: 60,
+                        style: {
+                            textBackgroundColor: '#654321',
+                            textPadding: 5,
+                            fill: '#ffffff',
+                            text: [
+                                'this is a text of graphic component',
+                                'my name is "aaa", click me MUST console.log("aaa")'
+                            ].join('\n')
+                        }
+                    }],
+                    title: {
+                        text: 'this is a text of title component',
+                        subtext: 'this is a subtext of title component',
+                        top: 100
+                    }
+                };
+
+                chart = myChart = testHelper.create(echarts, 'main4', {
+                    option: option,
+                    title: 'click the text (graphic component), console.log the params'
+                });
+
+                chart.on('click', function (params) {
+                    console.log(params);
+                })
+                chart.on('click', {name: 'aaa'}, function (params) {
+                    console.log('aaa', params);
+                });
+            });
+        </script>
+
+
+
+
+
+
+        <script>
+
+            require([
+                'echarts'/*, 'map/js/china' */
+            ], function (echarts) {
+
+                var option = {
+                    graphic: [{
+                        type: 'text',
+                        left: 50,
+                        top: 20,
+                        data: {
+                            x: 1
+                        },
+                        style: {
+                            textBackgroundColor: '#123456',
+                            textPadding: 5,
+                            fill: '#fff',
+                            text: 'click data is {x: 1}'
+                        }
+                    }, {
+                        type: 'text',
+                        left: 50,
+                        top: 100,
+                        data: 1234567,
+                        style: {
+                            textBackgroundColor: '#678901',
+                            textPadding: 5,
+                            fill: '#ff0',
+                            text: 'click data is 1234567'
+                        }
+                    }, {
+                        type: 'text',
+                        left: 50,
+                        top: 150,
+                        data: ['a', 'b'],
+                        style: {
+                            textBackgroundColor: '#678901',
+                            textPadding: 5,
+                            fill: '#ff2',
+                            text: 'click data is ["a", "b"]'
+                        }
+                    }]
+                };
+
+                var chart = testHelper.create(echarts, 'main5', {
+                    option: option,
+                    title: [
+                        'user data check',
+                        'click text see console.log',
+                        'then click the button, and click text see console.log'
+                    ],
+                    button: {
+                        text: 'setOption to merge user data',
+                        onclick: function () {
+                            chart.setOption({
+                                graphic: [{
+                                    data: {b: 2},
+                                    style: {
+                                        text: 'click data is {b: 2}'
+                                    }
+                                }, {
+                                    data: void 0,
+                                    style: {
+                                        text: 'click data is undefined'
+                                    }
+                                }]
+                            });
+                        }
+                    }
+                });
+
+                chart.on('click', function (params) {
+                    console.log(params.data);
+                })
+            });
+        </script>
+
+
+
+
+
 
     </body>
 </html>
\ No newline at end of file

test/lib/draggable.js

@@ -39,14 +39,17 @@
          * @param {boolean} [opt.lockY=false]
          * @param {number} [opt.throttle=false]
          * @param {boolean} [opt.addPlaceholder=false]
+         * @param {Function} [opt.onDrag]
          * @return {type}  description
          */
         init: function (mainEl, chart, opt) {
             opt = opt || {};
 
-            var chartResize = chart ? $.proxy(chart.resize, chart) : function () {};
+            var onDrag = opt.onDrag || $.proxy(chart.resize, chart);
+
+            var onDragThrottled = chart ? onDrag : function () {};
             if (opt.throttle) {
-                chartResize = throttle(chartResize, opt.throttle, true, false);
+                onDragThrottled = throttle(onDragThrottled, opt.throttle, true, false);
             }
 
             var mainEl = $(mainEl);
@@ -184,7 +187,7 @@
 
                 label.text(Math.round(mainContentWidth) + ' x ' + Math.round(mainContentHeight));
 
-                chartResize();
+                onDragThrottled();
             }
         }
     };