axisPointer支持十字准星

doc/example/scatter1.html

@@ -73,7 +73,15 @@ option = {
         subtext: '抽样调查来自: Heinz  2003'
     },
     tooltip : {
-        trigger: 'item',
+        trigger: 'axis',
+        showDelay : 0,
+        axisPointer:{
+            type : 'cross',
+            lineStyle: {
+                type : 'dashed',
+                width : 1
+            }
+        },
         formatter : function (value) {
             if (value[2].length > 1) {
                 return value[0] + ' :<br/>'

doc/example/scatter2.html

@@ -67,9 +67,35 @@
                 <div class="well sidebar-nav">
                     <div class="nav-header"><a href="#" onclick="autoResize()" class="icon-resize-full" id ="icon-resize" ></a>option</div>
                     <textarea id="code" name="code">
+function random(){
+    var r = Math.round(Math.random() * 100);
+    return (r * (r % 2 == 0 ? 1 : -1));
+}
+
+function randomDataArray() {
+    var d = [];
+    var len = 100;
+    while (len--) {
+        d.push([
+            random(),
+            random(),
+            Math.abs(random()),
+        ]);
+    }
+    return d;
+}
+
 option = {
     tooltip : {
-        trigger: 'item'
+        trigger: 'axis',
+        showDelay : 0,
+        axisPointer:{
+            type : 'cross',
+            lineStyle: {
+                type : 'dashed',
+                width : 1
+            }
+        }
     },
     legend: {
         data:['scatter1','scatter2']
@@ -88,6 +114,7 @@ option = {
         {
             type : 'value',
             power: 1,
+            splitNumber: 4,
             scale: true
         }
     ],
@@ -95,8 +122,8 @@ option = {
         {
             type : 'value',
             power: 1,
-            scale: true,
-            splitArea : {show : true}
+            splitNumber: 4,
+            scale: true
         }
     ],
     series : [
@@ -106,18 +133,7 @@ option = {
             symbolSize: function (value){
                 return Math.round(value[2] / 5);
             },
-            data: (function () {
-                var d = [];
-                var len = 100;
-                while (len--) {
-                    d.push([
-                        (Math.random()*100).toFixed(2) - 0,
-                        (Math.random()*100).toFixed(2) - 0,
-                        (Math.random()*100).toFixed(2) - 0
-                    ]);
-                }
-                return d;
-            })()
+            data: randomDataArray()
         },
         {
             name:'scatter2',
@@ -125,18 +141,7 @@ option = {
             symbolSize: function (value){
                 return Math.round(value[2] / 5);
             },
-            data: (function () {
-                var d = [];
-                var len = 100;
-                while (len--) {
-                    d.push([
-                        (Math.random()*100).toFixed(2) - 0,
-                        (Math.random()*100).toFixed(2) - 0,
-                        (Math.random()*100).toFixed(2) - 0
-                    ]);
-                }
-                return d;
-            })()
+            data: randomDataArray()
         }
     ]
 };

doc/example/scatter3.html

@@ -69,7 +69,15 @@
                     <textarea id="code" name="code">
 option = {
     tooltip : {
-        trigger: 'item'
+        trigger: 'axis',
+        showDelay : 0,
+        axisPointer:{
+            type : 'cross',
+            lineStyle: {
+                type : 'dashed',
+                width : 1
+            }
+        }
     },
     legend: {
         data:['sin','cos']

src/component/categoryAxis.js

@@ -671,6 +671,11 @@ define(function (require) {
             
             return -1;
         },
+        
+        // 根据位置换算值
+        getValueFromCoord : function(coord) {
+            return ''
+        },
 
         /**
          * 根据类目轴数据索引返回是否为主轴线

src/component/valueAxis.js

@@ -783,18 +783,20 @@ define(function (require) {
             value = value < this._min ? this._min : value;
             value = value > this._max ? this._max : value;
 
-            var valueRange = this._max - this._min;
-            var total;
             var result;
             if (!this.isHorizontal()) {
                 // 纵向
-                total = this.grid.getHeight();
-                result = this.grid.getYend() - (value - this._min) / valueRange * total;
+                result = this.grid.getYend() 
+                         - (value - this._min) 
+                           / (this._max - this._min) 
+                           * this.grid.getHeight();
             }
             else {
                 // 横向
-                total = this.grid.getWidth();
-                result = (value - this._min) / valueRange * total + this.grid.getX();
+                result = this.grid.getX() 
+                         + (value - this._min) 
+                           / (this._max - this._min) 
+                           * this.grid.getWidth();
             }
 
             return result;
@@ -816,6 +818,31 @@ define(function (require) {
                 // 横向
                 return Math.abs(value / (this._max - this._min) * this.grid.getWidth());
             }
+        },
+        
+        // 根据位置换算值
+        getValueFromCoord : function(coord) {
+            var result;
+            if (!this.isHorizontal()) {
+                // 纵向
+                coord = coord < this.grid.getY() ? this.grid.getY() : coord;
+                coord = coord > this.grid.getYend() ? this.grid.getYend() : coord;
+                result = this._max 
+                         - (coord - this.grid.getY()) 
+                           / this.grid.getHeight() 
+                           * (this._max - this._min);
+            }
+            else {
+                // 横向
+                coord = coord < this.grid.getX() ? this.grid.getX() : coord;
+                coord = coord > this.grid.getXend() ? this.grid.getXend() : coord;
+                result = this._min 
+                         + (coord - this.grid.getX()) 
+                           / this.grid.getWidth() 
+                           * (this._max - this._min);
+            }
+            
+            return result.toFixed(2) - 0;
         }
     };
 

src/config.js

@@ -228,9 +228,15 @@ define(function() {
                     width: 2,
                     type: 'solid'
                 },
-                areaStyle : {                       // 阴影指示器样式设置
-                    size: 'auto',                   // 阴影大小
-                    color: 'rgba(150,150,150,0.3)'  // 阴影颜色
+                crossStyle: {
+                    color: '#1e90ff',
+                    width: 1,
+                    type: 'dashed'
+                },
+                shadowStyle : {                     // 阴影指示器样式设置
+                    color: 'rgba(150,150,150,0.3)', // 阴影颜色
+                    width: 'auto',                  // 阴影大小
+                    type: 'default'
                 }
             },
             textStyle: {
@@ -283,6 +289,7 @@ define(function() {
             boundaryGap: true,     // 类目起始和结束两端空白策略
             axisLine: {            // 坐标轴线
                 show: true,        // 默认显示，属性show控制显示与否
+                onZero: true,
                 lineStyle: {       // 属性lineStyle控制线条样式
                     color: '#48b',
                     width: 2,
@@ -343,6 +350,7 @@ define(function() {
             splitNumber: 5,        // 分割段数，默认为5
             axisLine: {            // 坐标轴线
                 show: true,        // 默认显示，属性show控制显示与否
+                onZero: true,
                 lineStyle: {       // 属性lineStyle控制线条样式
                     color: '#48b',
                     width: 2,
@@ -730,6 +738,7 @@ define(function() {
             // selectedMode: false,        // 选择模式，默认关闭，可选single，multiple
             hoverable: true,
             // roam : false,               // 是否开启缩放及漫游模式
+            // scaleLimit : null,
             itemStyle: {
                 normal: {
                     // color: 各异,

src/util/shape/Cross.js

+/**
+ * zrender
+ *
+ * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
+ *
+ * shape类：十字准星
+ * 可配图形属性：
+   {
+       // 基础属性
+       shape  : 'cross',       // 必须，shape类标识，需要显式指定
+       id     : {string},       // 必须，图形唯一标识，可通过'zrender/tool/guid'方法生成
+       zlevel : {number},       // 默认为0，z层level，决定绘画在哪层canvas中
+       invisible : {boolean},   // 默认为false，是否可见
+
+       // 样式属性，默认状态样式样式属性
+       style  : {
+           rect      : {Object},  // 必须，对角框
+           x         : {number},  // 必须，横坐标
+           y         : {number},  // 必须，纵坐标
+       },
+
+       // 样式属性，高亮样式属性，当不存在highlightStyle时使用基于默认样式扩展显示
+       highlightStyle : {
+           // 同style
+       }
+
+       // 交互属性，详见shape.Base
+
+       // 事件属性，详见shape.Base
+   }
+ */
+define(function (require) {
+    var Base = require('zrender/shape/Base');
+    var LineShape = require('zrender/shape/Line');
+    var zrUtil = require('zrender/tool/util');
+    
+    function Cross(options) {
+        Base.call(this, options);
+    }
+
+    Cross.prototype =  {
+        type : 'cross',
+        /**
+         * 创建矩形路径
+         * @param {Context2D} ctx Canvas 2D上下文
+         * @param {Object} style 样式
+         */
+        buildPath : function (ctx, style) {
+            var rect = style.rect
+            style.xStart = rect.x;
+            style.xEnd = rect.x + rect.width;
+            style.yStart = style.yEnd = style.y;
+            LineShape.prototype.buildPath(ctx, style);
+            style.xStart = style.xEnd = style.x;
+            style.yStart = rect.y;
+            style.yEnd = rect.y + rect.height;
+            LineShape.prototype.buildPath(ctx, style);
+            return;
+        },
+        
+        /**
+         * 返回矩形区域，用于局部刷新和文字定位
+         * @param {Object} style
+         */
+        getRect : function (style) {
+            return style.rect;
+        },
+        
+        isCover : function (x, y) {
+            // 快速预判并保留判断矩形
+            var rect = this.style.__rect = this.style.__rect 
+                                           || this.getRect(this.style);
+            if (x >= rect.x
+                && x <= (rect.x + rect.width)
+                && y >= rect.y
+                && y <= (rect.y + rect.height)
+            ) {
+                // 矩形内
+                return true;
+            }
+            
+            return false;
+        }
+    };
+
+    zrUtil.inherits(Cross, Base);
+    
+    return Cross;
+});
\ No newline at end of file