Symbol enhancement

src/chart/bar/BarSeries.js

@@ -19,7 +19,6 @@ define(function(require) {
             zlevel: 0,                  // 一级层叠
             z: 2,                       // 二级层叠
             coordinateSystem: 'cartesian2d',
-            clickable: true,
             legendHoverLink: true,
             // stack: null
 

src/chart/helper/SymbolDraw.js

@@ -47,7 +47,7 @@ define(function (require) {
             z2: 100
         });
 
-        if (enableAnimation) {
+        if (enableAnimation && symbolEl.shape) {
             // FIXME Use scale to improve performance
             var zeroShape = symbolUtil.getSymbolShape(
                 symbolType, 0, 0, 0, 0

src/chart/line/LineSeries.js

@@ -19,14 +19,10 @@ define(function(require) {
             zlevel: 0,                  // 一级层叠
             z: 2,                       // 二级层叠
             coordinateSystem: 'cartesian2d',
-            clickable: true,
             legendHoverLink: true,
             // stack: null
             xAxisIndex: 0,
             yAxisIndex: 0,
-            gridIndex: 0,
-            // 'nearest', 'min', 'max', 'average'
-            dataFilter: 'nearest',
 
             label: {
                 normal: {

src/chart/scatter/ScatterSeries.js

@@ -24,7 +24,6 @@ define(function (require) {
             coordinateSystem: 'cartesian2d',
             zlevel: 0,                  // 一级层叠
             z: 2,                       // 二级层叠
-            clickable: true,
             legendHoverLink: true,
 
             // Cartesian coordinate system

src/util/graphic.js

@@ -79,7 +79,7 @@ define(function(require) {
 
         var pathRect = path.getBoundingRect();
 
-        var m = rect.calculateTransform(pathRect);
+        var m = pathRect.calculateTransform(rect);
 
         path.applyTransform(m);
     };

src/util/symbol.js

@@ -6,8 +6,32 @@ define(function(require) {
     var graphic = require('./graphic');
     var BoundingRect = require('zrender/core/BoundingRect');
 
+    /**
+     * Triangle shape
+     * @inner
+     */
+    var Triangle = graphic.extendShape({
+        type: 'triangle',
+        shape: {
+            cx: 0,
+            cy: 0,
+            width: 0,
+            height: 0
+        },
+        buildPath: function (path, shape) {
+            var cx = shape.cx;
+            var cy = shape.cy;
+            var width = shape.width / 2;
+            var height = shape.height / 2;
+            path.moveTo(cx, cy - height);
+            path.lineTo(cx + width, cy + height);
+            path.lineTo(cx - width, cy + height);
+            path.closePath();
+        }
+    });
     /**
      * Diamond shape
+     * @inner
      */
     var Diamond = graphic.extendShape({
         type: 'diamond',
@@ -31,6 +55,7 @@ define(function(require) {
 
     /**
      * Pin shape
+     * @inner
      */
     var Pin = graphic.extendShape({
         type: 'pin',
@@ -84,6 +109,7 @@ define(function(require) {
 
     /**
      * Arrow shape
+     * @inner
      */
     var Arrow = graphic.extendShape({
 
@@ -110,6 +136,10 @@ define(function(require) {
         }
     });
 
+    /**
+     * Map of path contructors
+     * @type {Object.<string, module:zrender/graphic/Path>}
+     */
     var symbolCtors = {
         line: graphic.Line,
 
@@ -125,7 +155,9 @@ define(function(require) {
 
         pin: Pin,
 
-        arrow: Arrow
+        arrow: Arrow,
+
+        triangle: Triangle
     };
 
     var symbolShapeMakers = {
@@ -146,7 +178,7 @@ define(function(require) {
                 y: y,
                 width: w,
                 height: h
-            }
+            };
         },
 
         roundRect: function (x, y, w, h, r) {
@@ -204,6 +236,15 @@ define(function(require) {
                 width: w,
                 height: h
             };
+        },
+
+        triangle: function (x, y, w, h) {
+            return {
+                cx: x + w / 2,
+                cy: y + h / 2,
+                width: w,
+                height: h
+            };
         }
     };
 
@@ -250,7 +291,7 @@ define(function(require) {
                 });
             }
             else if (symbolType.indexOf('path://') === 0) {
-                symbolPath = graphic.makePath(symbolType.slice(7), new BoundingRect(x, y, w, h));
+                symbolPath = graphic.makePath(symbolType.slice(7), {}, new BoundingRect(x, y, w, h));
             }
             else {
                 if (!symbolShapeMakers[symbolType]) {
@@ -301,7 +342,7 @@ define(function(require) {
                     }
                 };
             }
-            else if (!(symbolType.indexOf('path://') === 0)) {
+            else if (symbolType.indexOf('path://') !== 0) {
                 if (!symbolShapeMakers[symbolType]) {
                     symbolType = 'rect';
                 }

src/view/Chart.js

@@ -46,7 +46,9 @@ define(function (require) {
          * @param  {Object} payload
          */
         highlight: function (seriesModel, ecModel, api, payload) {
-            toggleHighlight(seriesModel.getData(), payload, 'emphasis');
+            if (seriesModel.get('legendHoverLink')) {
+                toggleHighlight(seriesModel.getData(), payload, 'emphasis');
+            }
         },
 
         /**
@@ -57,7 +59,9 @@ define(function (require) {
          * @param  {Object} payload
          */
         downplay: function (seriesModel, ecModel, api, payload) {
-            toggleHighlight(seriesModel.getData(), payload, 'normal');
+            if (seriesModel.get('legendHoverLink')) {
+                toggleHighlight(seriesModel.getData(), payload, 'normal');
+            }
         },
 
         /**

test/symbol.html

+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/scatter',
+                'echarts/component/legend',
+                'echarts/component/grid',
+                'echarts/component/tooltip'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+                var symbolList = [
+                    'circle',
+                    'triangle',
+                    'diamond',
+                    'pin',
+                    'image://http://echarts.baidu.com/doc/asset/img/echarts-logo.png',
+                    'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
+                    'emptyPath://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891'
+                ];
+
+                function random(max) {
+                    return (Math.random() * max).toFixed(3);
+                }
+
+                var series = symbolList.map(function (symbol, idx) {
+                    var seriesData = [];
+                    for (var i = 0; i < 20; i++) {
+                        seriesData.push([random(10), random(10), (+random(0.5) + 0.2).toFixed(3)]);
+                    }
+                    return {
+                        name: symbol.split('://')[0],
+                        type: 'scatter',
+                        symbol: symbol,
+                        symbolSize: function (val) {
+                            if (symbol.indexOf('path') >= 0 || symbol.indexOf('Path') >= 0) {
+                                return [val[2] * 60, val[2] * 40];
+                            }
+                            else {
+                                return val[2] * 60;
+                            }
+                        },
+                        label: {
+                            emphasis: {
+                                show: false
+                            }
+                        },
+                        data: seriesData
+                    };
+                });
+
+                chart.setOption({
+                    legend: {
+                        data: series.map(function (series) {return series.name;})
+                    },
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross'
+                        }
+                    },
+                    xAxis: {
+                        type: 'value',
+                        splitLine: {
+                            show: false
+                        }
+                    },
+                    yAxis: {
+                        type: 'value',
+                        splitLine: {
+                            show: false
+                        }
+                    },
+                    series: series
+                });
+            });
+
+        </script>
+    </body>
+</html>
\ No newline at end of file