Fix #4253 Fix #6805 (support inverse on radiusAxis)

apache · Oct 12, 2017 · 1072441 · 1072441
1 parent 044b740
commit 1072441
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/src/component/axis/AngleAxisView.js b/src/component/axis/AngleAxisView.js
@@ -7,9 +7,10 @@ define(function (require) {
 
     var elementList = ['axisLine', 'axisLabel', 'axisTick', 'splitLine', 'splitArea'];
 
-    function getAxisLineShape(polar, r0, r, angle) {
-        var start = polar.coordToPoint([r0, angle]);
-        var end = polar.coordToPoint([r, angle]);
+    function getAxisLineShape(polar, rExtent, angle) {
+        rExtent[1] > rExtent[0] && (rExtent = rExtent.slice().reverse());
+        var start = polar.coordToPoint([rExtent[0], angle]);
+        var end = polar.coordToPoint([rExtent[1], angle]);
 
         return {
             x1: start[0],
@@ -19,6 +20,11 @@ define(function (require) {
         };
     }
 
+    function getRadiusIdx(polar) {
+        var radiusAxis = polar.getRadiusAxis();
+        return radiusAxis.inverse ? 0 : 1;
+    }
+
     require('./AxisView').extend({
 
         type: 'angleAxis',
@@ -60,7 +66,7 @@ define(function (require) {
                 shape: {
                     cx: polar.cx,
                     cy: polar.cy,
-                    r: radiusExtent[1]
+                    r: radiusExtent[getRadiusIdx(polar)]
                 },
                 style: lineStyleModel.getLineStyle(),
                 z2: 1,
@@ -78,10 +84,11 @@ define(function (require) {
             var tickModel = angleAxisModel.getModel('axisTick');
 
             var tickLen = (tickModel.get('inside') ? -1 : 1) * tickModel.get('length');
+            var radius = radiusExtent[getRadiusIdx(polar)];
 
             var lines = zrUtil.map(ticksAngles, function (tickAngle) {
                 return new graphic.Line({
-                    shape: getAxisLineShape(polar, radiusExtent[1], radiusExtent[1] + tickLen, tickAngle)
+                    shape: getAxisLineShape(polar, [radius, radius + tickLen], tickAngle)
                 });
             });
             this.group.add(graphic.mergePath(
@@ -112,7 +119,7 @@ define(function (require) {
 
             // Use length of ticksAngles because it may remove the last tick to avoid overlapping
             for (var i = 0; i < ticksAngles.length; i++) {
-                var r = radiusExtent[1];
+                var r = radiusExtent[getRadiusIdx(polar)];
                 var p = polar.coordToPoint([r + labelMargin, labelsAngles[i]]);
                 var cx = polar.cx;
                 var cy = polar.cy;
@@ -156,7 +163,7 @@ define(function (require) {
                 var colorIndex = (lineCount++) % lineColors.length;
                 splitLines[colorIndex] = splitLines[colorIndex] || [];
                 splitLines[colorIndex].push(new graphic.Line({
-                    shape: getAxisLineShape(polar, radiusExtent[0], radiusExtent[1], ticksAngles[i])
+                    shape: getAxisLineShape(polar, radiusExtent, ticksAngles[i])
                 }));
             }
 

diff --git a/src/coord/polar/polarCreator.js b/src/coord/polar/polarCreator.js
@@ -4,8 +4,9 @@ define(function (require) {
     var Polar = require('./Polar');
     var numberUtil = require('../../util/number');
     var zrUtil = require('zrender/core/util');
-
     var axisHelper = require('../../coord/axisHelper');
+
+    var parsePercent = numberUtil.parsePercent;
     var niceScaleExtent = axisHelper.niceScaleExtent;
 
     // 依赖 PolarModel 做预处理
@@ -16,20 +17,20 @@ define(function (require) {
      * @param {module:echarts/coord/polar/PolarModel} polarModel
      * @param {module:echarts/ExtensionAPI} api
      */
-    function resizePolar(polarModel, api) {
+    function resizePolar(polar, polarModel, api) {
         var center = polarModel.get('center');
-        var radius = polarModel.get('radius');
         var width = api.getWidth();
         var height = api.getHeight();
-        var parsePercent = numberUtil.parsePercent;
 
-        this.cx = parsePercent(center[0], width);
-        this.cy = parsePercent(center[1], height);
+        polar.cx = parsePercent(center[0], width);
+        polar.cy = parsePercent(center[1], height);
 
-        var radiusAxis = this.getRadiusAxis();
+        var radiusAxis = polar.getRadiusAxis();
         var size = Math.min(width, height) / 2;
-        // var idx = radiusAxis.inverse ? 1 : 0;
-        radiusAxis.setExtent(0, parsePercent(radius, size));
+        var radius = parsePercent(polarModel.get('radius'), size);
+        radiusAxis.inverse
+            ? radiusAxis.setExtent(radius, 0)
+            : radiusAxis.setExtent(0, radius);
     }
 
     /**
@@ -73,11 +74,11 @@ define(function (require) {
         axis.type = axisModel.get('type');
         axis.scale = axisHelper.createScaleByModel(axisModel);
         axis.onBand = axisModel.get('boundaryGap') && axis.type === 'category';
+        axis.inverse = axisModel.get('inverse');
 
-        // FIXME Radius axis not support inverse axis
         if (axisModel.mainType === 'angleAxis') {
+            axis.inverse ^= axisModel.get('clockwise');
             var startAngle = axisModel.get('startAngle');
-            axis.inverse = axisModel.get('inverse') ^ axisModel.get('clockwise');
             axis.setExtent(startAngle, startAngle + (axis.inverse ? -360 : 360));
         }
 
@@ -96,7 +97,6 @@ define(function (require) {
             ecModel.eachComponent('polar', function (polarModel, idx) {
                 var polar = new Polar(idx);
                 // Inject resize and update method
-                polar.resize = resizePolar;
                 polar.update = updatePolarScale;
 
                 var radiusAxis = polar.getRadiusAxis();
@@ -108,7 +108,8 @@ define(function (require) {
                 setAxis(radiusAxis, radiusAxisModel);
                 setAxis(angleAxis, angleAxisModel);
 
-                polar.resize(polarModel, api);
+                resizePolar(polar, polarModel, api);
+
                 polarList.push(polar);
 
                 polarModel.coordinateSystem = polar;