markPoint and symbol improve

src/chart/helper/DataSymbol.js

@@ -25,14 +25,14 @@ define(function (require) {
 
         symbolSize = normalizeSymbolSize(symbolSize);
 
-        // FIXME
         var x = -0.5;
         var y = -0.5;
         var w = 1;
         var h = 1;
+        // FIXME
         if (symbolType.match(/(pin|Pin)$/)) {
-            y = -1;
-            h = 2;
+            y = -0.8;
+            h = 1.6;
         }
         var symbolEl = symbolCreators.createSymbol(
             symbolType, x, y, w, h, color
@@ -70,7 +70,6 @@ define(function (require) {
     }
 
     function DataSymbol() {
-
         this.group = new Group();
     }
 
@@ -131,7 +130,7 @@ define(function (require) {
                     // Update color
                     // FIXME emptyXXX ?
                     var newColor = data.getItemVisual(newIdx, 'color');
-                    el.setStyle('fill', newColor);
+                    el.setColor(newColor);
 
                     // TODO Merge animateTo and attr methods into one
                     if (enableAnimation) {
@@ -141,8 +140,10 @@ define(function (require) {
                         }, 300, 'cubicOut');
                     }
                     else {
+                        // May still have animation. Must stop
+                        el.stopAnimation();
                         el.attr({
-                            scale: symbolSize,
+                            scale: symbolSize.slice(),
                             position: point.slice()
                         });
                     }

src/component/markPoint.js

@@ -82,9 +82,9 @@ define(function (require) {
         var min = extent[0];
         var max = extent[1];
         var val = (max - min) * percent + min;
-        valueArr[valueIndex] = val;
         var dataIndex = data.indexOfNearest(valueAxisDim, val);
         valueArr[1 - valueIndex] = data.get(baseAxisDim, dataIndex);
+        valueArr[valueIndex] = data.get(valueAxisDim, dataIndex, true);
         return valueArr;
     };
 

src/component/marker/MarkPointModel.js

@@ -53,7 +53,7 @@ define(function (require) {
             z: 5,
             clickable: true,
             symbol: 'pin',         // 标注类型
-            symbolSize: 20,        // 标注大小
+            symbolSize: 25,        // 标注大小
             // symbolRotate: null, // 标注旋转控制
             large: false,
             effect: {

src/data/List.js

@@ -377,19 +377,18 @@ define(function (require) {
      * Retreive the index of nearest value
      * @param {number} idx
      * @param {number} value
+     * @param {boolean} stack If given value is after stacked
      * @return {number}
      */
-    listProto.indexOfNearest = function (dim, value) {
+    listProto.indexOfNearest = function (dim, value, stack) {
         var storage = this._storage;
         var dimData = storage[dim];
-        var indices = this.indices;
 
         if (dimData) {
             var minDist = Number.MAX_VALUE;
             var nearestIdx = -1;
-            for (var i = 0, len = indices.length; i < len; i++) {
-                var rawIndex = indices[i];
-                var dist = Math.abs(dimData[rawIndex] - value);
+            for (var i = 0, len = this.count(); i < len; i++) {
+                var dist = Math.abs(this.get(dim, i, stack) - value);
                 if (dist <= minDist) {
                     minDist = dist;
                     nearestIdx = i;

src/util/symbol.js

@@ -5,6 +5,7 @@ define(function(require) {
 
     var graphic = require('./graphic');
     var BoundingRect = require('zrender/core/BoundingRect');
+    var zrUtil = require('zrender/core/util');
 
     /**
      * Diamond shape
@@ -56,6 +57,9 @@ define(function(require) {
             // Dist on x with tangent point and circle center
             var dx = Math.cos(angle) * r;
 
+            var tanX = Math.sin(angle);
+            var tanY = Math.cos(angle);
+
             path.arc(
                 x,
                 cy,
@@ -64,14 +68,16 @@ define(function(require) {
                 Math.PI * 2 + angle
             );
 
+            var cpLen = r * 0.6;
+            var cpLen2 = r * 0.7;
             path.bezierCurveTo(
-                x + dx, cy + dy,
-                x, y - r * 0.6,
+                x + dx - tanX * cpLen, cy + dy + tanY * cpLen,
+                x, y - cpLen2,
                 x, y
             );
             path.bezierCurveTo(
-                x, y - r * 0.6,
-                x - dx, cy + dy,
+                x, y - cpLen2,
+                x - dx + tanX * cpLen, cy + dy + tanY * cpLen,
                 x - dx, cy + dy
             );
         }
@@ -176,6 +182,20 @@ define(function(require) {
 
     };
 
+    // Provide setColor helper method to avoid determine if set the fill or stroke outside
+    var symbolPathSetColor = function (color) {
+        var symbolStyle = this.style;
+        if (this.__isEmptyBrush) {
+            symbolStyle.stroke = color;
+        }
+        else {
+            // FIXME 判断图形默认是填充还是描边，使用 onlyStroke ?
+            symbolStyle.fill && (symbolStyle.fill = color);
+            symbolStyle.stroke && (symbolStyle.stroke = color);
+        }
+        this.dirty();
+    };
+
     return {
         /**
          * Create a symbol element with given symbol configuration: shape, x, y, width, height, color
@@ -211,16 +231,16 @@ define(function(require) {
             var symbolStyle = symbolPath.style;
             if (isEmpty) {
                 symbolStyle.set({
-                    stroke: color,
                     fill: '#fff',
                     lineWidth: 2
                 });
             }
-            else {
-                // FIXME 判断图形默认是填充还是描边，使用 onlyStroke ?
-                symbolStyle.fill && (symbolStyle.fill = color);
-                symbolStyle.stroke && (symbolStyle.stroke = color);
-            }
+
+            symbolPath.__isEmptyBrush = isEmpty;
+
+            symbolPath.setColor = symbolPathSetColor;
+
+            symbolPath.setColor(color);
 
             return symbolPath;
         }

test/markPoint.html

@@ -32,11 +32,10 @@
                 var data2 = [];
                 var data3 = [];
 
-                for (var i = 0; i < 100; i++) {
+                for (var i = 0; i < 10; i++) {
                     xAxisData.push('类目' + i);
                     data1.push(+Math.random().toFixed(3));
                     data2.push(+Math.random().toFixed(3));
-                    data3.push(+Math.random().toFixed(3));
                 }
 
                 chart.setOption({
@@ -67,12 +66,26 @@
                         name: 'line',
                         type: 'line',
                         stack: 'all',
-                        symbol: 'none',
-                        symbolSize: 10,
+                        symbolSize: 6,
                         data: data1,
 
                         markPoint: {
                             data: [{
+                                name: '最大值',
+                                type: 'max',
+                                value: 1
+                            }]
+                        }
+                    }, {
+                        name: 'line2',
+                        type: 'line',
+                        stack: 'all',
+                        symbolSize: 6,
+                        data: data2,
+
+                        markPoint: {
+                            data: [{
+                                name: '最大值',
                                 type: 'max',
                                 value: 1
                             }]