FIX apache#11176 xAxis.axisTick.interval appears different between ec…

…hart4 and echart3.8 (apache#11186) * FIX apache#11138 DOC ERROR * fix issues/11176 * delete console.log * add test demo * fix bug axis tick with dataZoom attr
earo-Lau · Oct 21, 2019 · 0b25b37 · 0b25b37
1 parent a6b8015
commit 0b25b37
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 8 deletions.
diff --git a/src/coord/Axis.js b/src/coord/Axis.js
@@ -186,7 +186,6 @@ Axis.prototype = {
         opt = opt || {};
 
         var tickModel = opt.tickModel || this.getTickModel();
-
         var result = createAxisTicks(this, tickModel);
         var ticks = result.ticks;
 
@@ -198,8 +197,11 @@ Axis.prototype = {
         }, this);
 
         var alignWithLabel = tickModel.get('alignWithLabel');
+        var dataExtent = this.scale.getExtent();
+        var tickLen = this.scale.getTicks().length + dataExtent[0];
+
         fixOnBandTicksCoords(
-            this, ticksCoords, result.tickCategoryInterval, alignWithLabel, opt.clamp
+            this, ticksCoords, result.tickCategoryInterval, alignWithLabel, opt.clamp,tickLen
         );
 
         return ticksCoords;
@@ -292,7 +294,7 @@ function fixExtentWithBands(extent, nTick) {
 // splitLine/spliteArea should layout appropriately corresponding
 // to displayed labels. (So we should not use `getBandWidth` in this
 // case).
-function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWithLabel, clamp) {
+function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWithLabel, clamp,tickLen) {
     var ticksLen = ticksCoords.length;
 
     if (!axis.onBand || alignWithLabel || !ticksLen) {
@@ -301,12 +303,16 @@ function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWith
 
     var axisExtent = axis.getExtent();
     var last;
+    var diffSize;
     if (ticksLen === 1) {
         ticksCoords[0].coord = axisExtent[0];
         last = ticksCoords[1] = {coord: axisExtent[0]};
     }
     else {
-        var shift = (ticksCoords[1].coord - ticksCoords[0].coord);
+
+        var crossLen = ticksCoords[ticksLen-1].tickValue - ticksCoords[0].tickValue;
+        var shift = (ticksCoords[ticksLen-1].coord - ticksCoords[0].coord) / crossLen;
+
         each(ticksCoords, function (ticksItem) {
             ticksItem.coord -= shift / 2;
             var tickCategoryInterval = tickCategoryInterval || 0;
@@ -315,7 +321,11 @@ function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWith
                 ticksItem.coord -= shift / ((tickCategoryInterval + 1) * 2);
             }
         });
-        last = {coord: ticksCoords[ticksLen - 1].coord + shift};
+
+        diffSize = tickLen - ticksCoords[ticksLen - 1].tickValue;
+
+        last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize}; 
+
         ticksCoords.push(last);
     }
 

diff --git a/test/axis-interval.html b/test/axis-interval.html
@@ -54,9 +54,8 @@ <h1>[ Test category axis interval ]&nbsp;&nbsp;&nbsp; interval of xAxis should b
         <div class="chart" id="main1"></div>
         <h1>[ Test time axis interval ]&nbsp;&nbsp;&nbsp; should not overlap when data zoom.</h1>
         <div class="chart" id="main2"></div>
-
-
-
+        <h1>[ Test xAxis.axisTick.interval ]&nbsp;&nbsp;&nbsp; let list = [true, false, true, true];axisTick.interval = function(index){return list[index]} </h1>
+        <div class="chart" id="main3"></div>
 
 
 
@@ -338,6 +337,67 @@ <h1>[ Test time axis interval ]&nbsp;&nbsp;&nbsp; should not overlap when data z
         </script>
 
 
+<script>
+
+    require([
+        'echarts'
+    ], function (echarts) {
+
+        let dataIndex = 0;
+
+        let testArr = [
+            [true, false, true, true],
+            [true, false, true, false],
+            [false, true, true, false],
+            [false, true, false, true],
+            [false, false, true, true],
+            [true, true, false, false]
+        ];
+
+        function print(index){
+            return `intervalList = [${testArr[index].toString()}] ,currentIndex is ${index}`
+        }
+
+        var option = {
+            title:{
+                text:print(dataIndex)
+            },
+            xAxis: {
+                type: 'category',
+                data: ['Mon', 'Tue', 'Wed', 'Thu'],
+                axisTick: {
+                    show: true,
+                    interval: function (index) {
+                    // return index && !!x2Data[index]
+                    return testArr[dataIndex][index]
+                },
+                length:50,
+                alignWithLabel: false,
+                },
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [{
+                data: [820, 932, 901, 934],
+                type: 'bar'
+            }]
+        };
+        let ec = echarts.init(document.getElementById('main3'));
+
+        setInterval(function(){
+            let next = ++dataIndex;
+            dataIndex = next > 5 ? 0: next;
+            option.title.text = print(dataIndex);
+            ec.setOption(option);
+        },6000);
+
+        ec.setOption(option);
+
+    });
+
+</script>
+