adjust references

Edward911111 · Mar 24, 2017 · aeffe90 · aeffe90
1 parent 42ad1aa
commit aeffe90
Show file tree

Hide file tree

Showing 17 changed files with 192 additions and 16 deletions.
diff --git a/src/chart/bar.js b/src/chart/bar.js
@@ -20,5 +20,5 @@ define(function (require) {
     });
 
     // In case developer forget to include grid component
-    require('../component/grid');
+    require('../component/gridSimple');
 });
diff --git a/src/chart/line.js b/src/chart/line.js
@@ -20,5 +20,5 @@ define(function (require) {
     ));
 
     // In case developer forget to include grid component
-    require('../component/grid');
+    require('../component/gridSimple');
 });
diff --git a/src/chart/pictorialBar.js b/src/chart/pictorialBar.js
@@ -17,5 +17,5 @@ define(function (require) {
     ));
 
     // In case developer forget to include grid component
-    require('../component/grid');
+    require('../component/gridSimple');
 });
diff --git a/src/chart/scatter.js b/src/chart/scatter.js
@@ -14,5 +14,5 @@ define(function (require) {
     ));
 
     // In case developer forget to include grid component
-    require('../component/grid');
+    require('../component/gridSimple');
 });
diff --git a/src/component/axis/AngleAxisView.js b/src/component/axis/AngleAxisView.js
@@ -4,7 +4,6 @@ define(function (require) {
     var zrUtil = require('zrender/core/util');
     var graphic = require('../../util/graphic');
     var Model = require('../../model/Model');
-    var PolarAxisPointer = require('../axisPointer/PolarAxisPointer');
 
     var elementList = ['axisLine', 'axisLabel', 'axisTick', 'splitLine', 'splitArea'];
 
@@ -24,7 +23,7 @@ define(function (require) {
 
         type: 'angleAxis',
 
-        axisPointerClass: PolarAxisPointer,
+        axisPointerClass: 'PolarAxisPointer',
 
         render: function (angleAxisModel, ecModel) {
             this.group.removeAll();

diff --git a/src/component/axis/AxisView.js b/src/component/axis/AxisView.js
@@ -14,6 +14,10 @@ define(function (require) {
          */
         _axisPointer: null,
 
+        /**
+         * @protected
+         * @type {string}
+         */
         axisPointerClass: null,
 
         /**
@@ -25,9 +29,10 @@ define(function (require) {
             // (axis scale updated), and should be performed each time update.
             // So put it here temporarily, although it is not appropriate to
             // put a model-writing procedure in `view`.
-            axisPointerModelHelper.fixValue(axisModel);
+            this.axisPointerClass && axisPointerModelHelper.fixValue(axisModel);
 
             AxisView.superApply(this, 'render', arguments);
+
             updateAxisPointer(this, axisModel, ecModel, api, payload, true);
         },
 
@@ -63,12 +68,13 @@ define(function (require) {
     });
 
     function updateAxisPointer(axisView, axisModel, ecModel, api, payload, forceRender) {
-        if (!axisView.axisPointerClass) {
+        var Clazz = AxisView.getAxisPointerClass(axisView.axisPointerClass);
+        if (!Clazz) {
             return;
         }
         var axisPointerModel = axisPointerModelHelper.getAxisPointerModel(axisModel);
         axisPointerModel
-            ? (axisView._axisPointer || (axisView._axisPointer = new axisView.axisPointerClass()))
+            ? (axisView._axisPointer || (axisView._axisPointer = new Clazz()))
                 .render(axisModel, axisPointerModel, api, forceRender)
             : disposeAxisPointer(axisView, api);
     }
@@ -79,5 +85,20 @@ define(function (require) {
         axisView._axisPointer = null;
     }
 
+    var axisPointerClazz = [];
+
+    AxisView.registerAxisPointerClass = function (type, clazz) {
+        if (__DEV__) {
+            if (axisPointerClazz[type]) {
+                throw new Error('axisPointer ' + type + ' exists');
+            }
+        }
+        axisPointerClazz[type] = clazz;
+    };
+
+    AxisView.getAxisPointerClass = function (type) {
+        return type && axisPointerClazz[type];
+    };
+
     return AxisView;
 });
diff --git a/src/component/axis/CartesianAxisView.js b/src/component/axis/CartesianAxisView.js
@@ -3,7 +3,6 @@ define(function (require) {
     var zrUtil = require('zrender/core/util');
     var graphic = require('../../util/graphic');
     var AxisBuilder = require('./AxisBuilder');
-    var CartesianAxisPointer = require('../axisPointer/CartesianAxisPointer');
     var AxisView = require('./AxisView');
     var cartesianAxisHelper = require('./cartesianAxisHelper');
     var ifIgnoreOnTick = AxisBuilder.ifIgnoreOnTick;
@@ -28,7 +27,7 @@ define(function (require) {
 
         type: 'cartesianAxis',
 
-        axisPointerClass: CartesianAxisPointer,
+        axisPointerClass: 'CartesianAxisPointer',
 
         /**
          * @override

diff --git a/src/component/axis/RadiusAxisView.js b/src/component/axis/RadiusAxisView.js
@@ -5,7 +5,6 @@ define(function (require) {
     var zrUtil = require('zrender/core/util');
     var graphic = require('../../util/graphic');
     var AxisBuilder = require('./AxisBuilder');
-    var PolarAxisPointer = require('../axisPointer/PolarAxisPointer');
 
     var axisBuilderAttrs = [
         'axisLine', 'axisLabel', 'axisTick', 'axisName'
@@ -18,7 +17,7 @@ define(function (require) {
 
         type: 'radiusAxis',
 
-        axisPointerClass: PolarAxisPointer,
+        axisPointerClass: 'PolarAxisPointer',
 
         render: function (radiusAxisModel, ecModel) {
             this.group.removeAll();

diff --git a/src/component/axis/SingleAxisView.js b/src/component/axis/SingleAxisView.js
@@ -3,7 +3,6 @@ define(function (require) {
     var AxisBuilder = require('./AxisBuilder');
     var zrUtil =  require('zrender/core/util');
     var graphic = require('../../util/graphic');
-    var SingleAxisPointer = require('../axisPointer/SingleAxisPointer');
     var singleAxisHelper = require('./singleAxisHelper');
     var getInterval = AxisBuilder.getInterval;
     var ifIgnoreOnTick = AxisBuilder.ifIgnoreOnTick;
@@ -18,7 +17,7 @@ define(function (require) {
 
         type: 'singleAxis',
 
-        axisPointerClass: SingleAxisPointer,
+        axisPointerClass: 'SingleAxisPointer',
 
         render: function (axisModel, ecModel, api, payload) {
 

diff --git a/src/component/axisPointer/CartesianAxisPointer.js b/src/component/axisPointer/CartesianAxisPointer.js
@@ -5,6 +5,7 @@ define(function(require) {
     var BaseAxisPointer = require('./BaseAxisPointer');
     var viewHelper = require('./viewHelper');
     var cartesianAxisHelper = require('../axis/cartesianAxisHelper');
+    var AxisView = require('../axis/AxisView');
 
     var CartesianAxisPointer = BaseAxisPointer.extend({
 
@@ -119,5 +120,7 @@ define(function(require) {
         return axis.dim === 'x' ? 0 : 1;
     }
 
+    AxisView.registerAxisPointerClass('CartesianAxisPointer', CartesianAxisPointer);
+
     return CartesianAxisPointer;
 });
diff --git a/src/component/axisPointer/PolarAxisPointer.js b/src/component/axisPointer/PolarAxisPointer.js
@@ -7,6 +7,7 @@ define(function(require) {
     var viewHelper = require('./viewHelper');
     var matrix = require('zrender/core/matrix');
     var AxisBuilder = require('../axis/AxisBuilder');
+    var AxisView = require('../axis/AxisView');
 
     var PolarAxisPointer = BaseAxisPointer.extend({
 
@@ -135,5 +136,7 @@ define(function(require) {
         }
     };
 
+    AxisView.registerAxisPointerClass('PolarAxisPointer', PolarAxisPointer);
+
     return PolarAxisPointer;
 });
diff --git a/src/component/axisPointer/SingleAxisPointer.js b/src/component/axisPointer/SingleAxisPointer.js
@@ -5,6 +5,7 @@ define(function(require) {
     var BaseAxisPointer = require('./BaseAxisPointer');
     var viewHelper = require('./viewHelper');
     var singleAxisHelper = require('../axis/singleAxisHelper');
+    var AxisView = require('../axis/AxisView');
 
     var XY = ['x', 'y'];
     var WH = ['width', 'height'];
@@ -115,5 +116,7 @@ define(function(require) {
         return [rect[XY[dimIndex]], rect[XY[dimIndex]] + rect[WH[dimIndex]]];
     }
 
+    AxisView.registerAxisPointerClass('SingleAxisPointer', SingleAxisPointer);
+
     return SingleAxisPointer;
 });
diff --git a/src/component/axisPointer/modelHelper.js b/src/component/axisPointer/modelHelper.js
@@ -305,7 +305,7 @@ define(function(require) {
     };
 
     helper.getAxisInfo = function (axisModel) {
-        var coordSysAxesInfo = axisModel.ecModel.getComponent('axisPointer').coordSysAxesInfo;
+        var coordSysAxesInfo = (axisModel.ecModel.getComponent('axisPointer') || {}).coordSysAxesInfo;
         return coordSysAxesInfo && coordSysAxesInfo.axesInfo[makeKey(axisModel)];
     };
 

diff --git a/src/component/grid.js b/src/component/grid.js
@@ -2,6 +2,8 @@ define(function(require) {
 
     require('./gridSimple');
 
+    require('./axisPointer/CartesianAxisPointer');
+
     require('./axisPointer');
 
 });
diff --git a/src/component/polar.js b/src/component/polar.js
@@ -6,6 +6,8 @@ define(function(require) {
     require('./radiusAxis');
     require('./axisPointer');
 
+    require('./axisPointer/PolarAxisPointer');
+
     // Polar view
     require('../echarts').extendComponentView({
         type: 'polar'

diff --git a/src/component/singleAxis.js b/src/component/singleAxis.js
@@ -5,6 +5,8 @@ define(function (require) {
     require('../coord/single/AxisModel');
     require('./axisPointer');
 
+    require('./axisPointer/SingleAxisPointer');
+
     var echarts = require('../echarts');
 
     echarts.extendComponentView({

diff --git a/test/gridSimple.html b/test/gridSimple.html
@@ -0,0 +1,144 @@
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="esl.js"></script>
+        <script src="config.js"></script>
+        <script src="lib/facePrint.js"></script>
+    </head>
+    <body>
+        <style>
+            html, body, #main {
+                width: 100%;
+                height: 100%;
+            }
+        </style>
+        <div id="info"></div>
+        <div id="main"></div>
+        <script>
+
+            require([
+                'echarts',
+                'echarts/chart/line',
+                'echarts/chart/bar',
+                'echarts/chart/pie',
+                // 'echarts/component/legend',
+                'echarts/component/gridSimple',
+                // 'echarts/component/tooltip',
+                // 'echarts/component/dataZoomInside'
+            ], function (echarts) {
+
+                var chart = echarts.init(document.getElementById('main'), null, {
+                    renderer: 'canvas'
+                });
+
+                var xAxisData = [];
+                var data1 = [];
+                var data2 = [];
+                var data3 = [];
+
+                for (var i = 0; i < 100; i++) {
+                    xAxisData.push('类目' + i);
+                    if (i < 5 && i > 1) {
+                        data1.push(0);
+                    }
+                    else {
+                        data1.push(+(Math.random() + 0.5).toFixed(3));
+                    }
+                    data2.push(+(Math.random() + 0.5).toFixed(3));
+                    data3.push(+(Math.random() + 0.5).toFixed(3));
+                }
+
+                var itemStyle = {
+                    normal: {
+                        borderColor: 'white',
+                        borderWidth: 3,
+                        // shadowBlur: 10,
+                        // shadowOffsetX: 0,
+                        // shadowOffsetY: 5,
+                        // shadowColor: 'rgba(0, 0, 0, 0.4)',
+                        lineStyle: {
+                            width: 1
+                            // shadowBlur: 10,
+                            // shadowOffsetX: 0,
+                            // shadowOffsetY: 5,
+                            // shadowColor: 'rgba(0, 0, 0, 0.4)'
+                        }
+                    }
+                };
+
+                chart.setOption({
+                    legend: {
+                        data: ['line', 'line2', 'line3']
+                    },
+                    visualMap: null, // 用于测试 option 中含有null的情况。
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'line'
+                        }
+                    },
+                    xAxis: {
+                        // data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
+                        data: xAxisData,
+                        boundaryGap: false,
+                        // inverse: true,
+                        splitArea: {
+                            show: false
+                        },
+                        splitLine: {
+                            show: false
+                        }
+                    },
+                    grid: {
+                        left: '10%',
+                        right: '10%'
+                    },
+                    yAxis: {
+                        splitArea: {
+                            show: true
+                        }
+                    },
+                    dataZoom: {
+                        type: 'inside',
+                        start: 10,
+                        end: 30
+                    },
+                    // animation: false,
+                    series: [null,  // 用于测试 option 中含有null的情况。
+                    {
+                        name: 'line',
+                        type: 'line',
+                        stack: 'all',
+                        symbol: 'circle',
+                        symbolSize: 10,
+                        data: data1,
+                        itemStyle: itemStyle,
+                        step: 'end'
+                    }, {
+                        name: 'line2',
+                        type: 'pie',
+                        stack: 'all',
+                        symbol: 'circle',
+                        symbolSize: 10,
+                        data: echarts.util.map(data2, function (val) {
+                            return {name: val, value: val};
+                        }),
+                        itemStyle: itemStyle,
+                        step: 'end'
+                    }, {
+                        name: 'line3',
+                        type: 'bar',
+                        stack: 'all',
+                        symbol: 'triangle',
+                        symbolSize: 10,
+                        data: data3,
+                        itemStyle: itemStyle,
+                        step: 'end'
+                    }]
+                });
+            })
+
+        </script>
+    </body>
+</html>