fix: category axis label cache causes that label disappear but can not show...

fix: category axis label cache causes that label disappear but can not show again when resize. Fixed that. Fix #11112

src/coord/axisTickLabelBuilder.js

@@ -243,12 +243,16 @@ export function calculateCategoryInterval(axis) {
     var interval = Math.max(0, Math.floor(Math.min(dw, dh)));
 
     var cache = inner(axis.model);
+    var axisExtent = axis.getExtent();
     var lastAutoInterval = cache.lastAutoInterval;
     var lastTickCount = cache.lastTickCount;
 
     // Use cache to keep interval stable while moving zoom window,
     // otherwise the calculated interval might jitter when the zoom
     // window size is close to the interval-changing size.
+    // For example, if all of the axis labels are `a, b, c, d, e, f, g`.
+    // The jitter will cause that sometimes the displayed labels are
+    // `a, d, g` (interval: 2) sometimes `a, c, e`(interval: 1).
     if (lastAutoInterval != null
         && lastTickCount != null
         && Math.abs(lastAutoInterval - interval) <= 1
@@ -256,6 +260,10 @@ export function calculateCategoryInterval(axis) {
         // Always choose the bigger one, otherwise the critical
         // point is not the same when zooming in or zooming out.
         && lastAutoInterval > interval
+        // If the axis change is caused by chart resize, the cache should not
+        // be used. Otherwise some hiden labels might not be shown again.
+        && cache.axisExtend0 === axisExtent[0]
+        && cache.axisExtend1 === axisExtent[1]
     ) {
         interval = lastAutoInterval;
     }
@@ -264,6 +272,8 @@ export function calculateCategoryInterval(axis) {
     else {
         cache.lastTickCount = tickCount;
         cache.lastAutoInterval = interval;
+        cache.axisExtend0 = axisExtent[0];
+        cache.axisExtend1 = axisExtent[1];
     }
 
     return interval;

test/axis-interval2.html

@@ -27,6 +27,7 @@ under the License.
         <script src="lib/jquery.min.js"></script>
         <script src="lib/facePrint.js"></script>
         <script src="lib/testHelper.js"></script>
+        <script src="lib/draggable.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="stylesheet" href="lib/reset.css">
     </head>
@@ -56,6 +57,8 @@ under the License.
         <div class="chart" id="main6.5"></div>
         <div class="chart" id="main7"></div>
         <div class="chart" id="main8"></div>
+        <div class="chart" id="main9"></div>
+        <div class="chart" id="main10"></div>
 
 
         <script>
@@ -1213,5 +1216,142 @@ under the License.
 
 
 
+
+        <script>
+
+            require([
+                'echarts'
+            ], function (echarts) {
+
+                var option = {
+                    legend: {
+                    },
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    dataZoom: [{
+                        type: 'inside',
+                        xAxisIndex: 0
+                    }, {
+                    }],
+                    grid: {
+                        top: 10,
+                        left: 100
+                    },
+                    xAxis: [{
+                        type: 'category',
+                        splitArea: {
+                            show: true
+                        },
+                        splitLine: {
+                            show: true
+                        }
+                    }],
+                    yAxis: [{
+                        type: 'category',
+                        axisLabel: {
+                            formatter: 'GOOD {value}',
+                            fontSize: 20
+                        }
+                    }, {
+                        axisLabel: {
+                            showMaxLabel: false
+                        }
+                    }],
+                    series: [{
+                        type: 'scatter',
+                        data: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]]
+                    }]
+                };
+
+                chart = myChart = testHelper.create(echarts, 'main9', {
+                    title: [
+                        'Drag to resize the yAxis util labels changes, and then drag back.',
+                        'Labels of yAxis should be able to back too the original state.'
+                    ],
+                    width: 300,
+                    height: 300,
+                    option: option,
+                    draggable: true
+                });
+
+            });
+
+        </script>
+
+
+
+
+        <script>
+
+            require([
+                'echarts'
+            ], function (echarts) {
+
+                var xAxisData = [];
+                var data1 = [];
+
+                for (var i = 0; i < 100; i++) {
+                    xAxisData.push('c' + i);
+                    data1.push((Math.random() * 5).toFixed(2));
+                }
+
+                var option = {
+                    legend: {
+                    },
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    dataZoom: [{
+                        type: 'inside',
+                        xAxisIndex: 0,
+                        start: 14.63022259346915,
+                        end: 77.06506102371338
+                    }, {
+                        start: 14.63022259346915,
+                        end: 77.06506102371338
+                    }],
+                    xAxis: [{
+                        data: xAxisData,
+                        splitArea: {
+                            show: true
+                        },
+                        splitLine: {
+                            show: true
+                        }
+                    }],
+                    yAxis: [{
+                    }],
+                    series: [{
+                        name: 'bar',
+                        type: 'line',
+                        stack: 'one',
+                        cursor: 'move',
+                        data: data1
+                    }]
+                };
+
+                chart = myChart = testHelper.create(echarts, 'main10', {
+                    title: [
+                        'The dataZoom window range is at the critical value of changing axis interval from 2 to 3.',
+                        'Move the dataZoom bar, the **xAxis labels should be stable**.',
+                        'That is, xAxis labels should not be sometimes [c21, c24, c27] sometimes [c20, c24, c28]'
+                    ],
+                    option: option,
+                    // Should be fixed this width to make the dataZoom window range at the critical value.
+                    width: 653,
+                    height: 300,
+                    autoResize: false
+                });
+
+            });
+
+        </script>
+
+
+
+
+
+
     </body>
 </html>
\ No newline at end of file

test/lib/testHelper.js

@@ -53,6 +53,7 @@
      * @param {boolean} [opt.draggable]
      * @param {boolean} [opt.lazyUpdate]
      * @param {boolean} [opt.notMerge]
+     * @param {boolean} [opt.autoResize=true]
      * @param {Array.<Object>|Object} [opt.button] {text: ..., onClick: ...}, or an array of them.
      * @param {Array.<Object>|Object} [opt.buttons] {text: ..., onClick: ...}, or an array of them.
      * @param {boolean} [opt.recordCanvas] 'ut/lib/canteen.js' is required.
@@ -232,6 +233,12 @@
             var chart = echarts.init(dom);
 
             if (opt.draggable) {
+                if (!window.draggable) {
+                    throw new Error(
+                        'Pleasse add the script in HTML: \n'
+                        + '<script src="lib/draggable.js"></script>'
+                    );
+                }
                 window.draggable.init(dom, chart, {throttle: 70, addPlaceholder: true});
             }
 

test/runTest/actions/__meta__.json

@@ -10,6 +10,7 @@
   "axis": 1,
   "axis-boundaryGap": 1,
   "axis-interval": 3,
+  "axis-interval2": 3,
   "axis-lastLabel": 5,
   "axis-multiple": 1,
   "axis-style": 2,

test/runTest/actions/axis-interval2.json

+[{"name":"Action 1","ops":[{"type":"mousemove","time":145,"x":415,"y":252},{"type":"mousemove","time":377,"x":418,"y":254},{"type":"mousemove","time":610,"x":428,"y":265},{"type":"mousemove","time":866,"x":430,"y":266},{"type":"mousemove","time":1227,"x":432,"y":266},{"type":"mousemove","time":1476,"x":434,"y":266},{"type":"mousewheel","time":1660,"x":434,"y":266,"deltaY":-1},{"type":"mousewheel","time":1747,"x":434,"y":266,"deltaY":-17},{"type":"mousewheel","time":1799,"x":434,"y":266,"deltaY":-5},{"type":"mousewheel","time":1855,"x":434,"y":266,"deltaY":-15},{"type":"mousewheel","time":1904,"x":434,"y":266,"deltaY":-12},{"type":"mousewheel","time":1948,"x":434,"y":266,"deltaY":-4},{"type":"mousewheel","time":2012,"x":434,"y":266,"deltaY":-1},{"type":"mousewheel","time":2067,"x":434,"y":266,"deltaY":0},{"type":"mousewheel","time":2219,"x":434,"y":266,"deltaY":-1},{"type":"mousewheel","time":2305,"x":434,"y":266,"deltaY":-10},{"type":"mousewheel","time":2368,"x":434,"y":266,"deltaY":1},{"type":"mousewheel","time":2459,"x":434,"y":266,"deltaY":24},{"type":"mousewheel","time":2505,"x":434,"y":266,"deltaY":8},{"type":"mousewheel","time":2571,"x":434,"y":266,"deltaY":15},{"type":"mousewheel","time":2615,"x":434,"y":266,"deltaY":7},{"type":"mousewheel","time":2689,"x":434,"y":266,"deltaY":9},{"type":"mousewheel","time":2739,"x":434,"y":266,"deltaY":7},{"type":"mousewheel","time":2807,"x":434,"y":266,"deltaY":11},{"type":"mousewheel","time":2849,"x":434,"y":266,"deltaY":5},{"type":"mousewheel","time":2912,"x":434,"y":266,"deltaY":2},{"type":"mousemove","time":3103,"x":427,"y":279},{"type":"mousemove","time":3329,"x":340,"y":445},{"type":"mousemove","time":3556,"x":349,"y":459},{"type":"mousemove","time":3794,"x":350,"y":461},{"type":"mousedown","time":3904,"x":350,"y":461},{"type":"mousemove","time":3924,"x":374,"y":464},{"type":"mousemove","time":4128,"x":435,"y":466},{"type":"mousemove","time":4331,"x":496,"y":469},{"type":"mousemove","time":4546,"x":498,"y":469},{"type":"mousemove","time":4771,"x":410,"y":454},{"type":"mousemove","time":5041,"x":357,"y":446},{"type":"mouseup","time":5165,"x":357,"y":446},{"time":5166,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5190,"x":371,"y":406},{"type":"mousemove","time":5401,"x":443,"y":117},{"type":"mousemove","time":5610,"x":400,"y":117},{"type":"mousemove","time":5820,"x":404,"y":104},{"type":"mousedown","time":6024,"x":405,"y":104},{"type":"mouseup","time":6040,"x":405,"y":104},{"time":6041,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6094,"x":405,"y":104},{"type":"mousedown","time":6663,"x":405,"y":104},{"type":"mouseup","time":6706,"x":405,"y":104},{"time":6707,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6989,"x":401,"y":104},{"type":"mousemove","time":7228,"x":344,"y":105},{"type":"mousedown","time":7520,"x":342,"y":105},{"type":"mouseup","time":7537,"x":342,"y":105},{"time":7538,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7570,"x":342,"y":105},{"type":"mousedown","time":8055,"x":342,"y":105},{"type":"mouseup","time":8073,"x":342,"y":105},{"time":8074,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1572262099790},{"name":"Action 2","ops":[{"type":"mousemove","time":51,"x":667,"y":329},{"type":"mousemove","time":292,"x":439,"y":500},{"type":"mousemove","time":524,"x":318,"y":551},{"type":"mousemove","time":730,"x":285,"y":572},{"type":"mousemove","time":956,"x":277,"y":576},{"type":"mousedown","time":1615,"x":277,"y":576},{"type":"mousemove","time":1641,"x":279,"y":576},{"type":"mousemove","time":1862,"x":282,"y":576},{"type":"mousemove","time":2124,"x":287,"y":576},{"type":"mousemove","time":2343,"x":291,"y":576},{"type":"mousemove","time":2603,"x":296,"y":576},{"type":"mousemove","time":2827,"x":297,"y":576},{"type":"mousemove","time":3056,"x":300,"y":576},{"type":"mousemove","time":3260,"x":306,"y":576},{"type":"mousemove","time":3460,"x":310,"y":576},{"type":"mousemove","time":3710,"x":310,"y":576},{"type":"mousemove","time":3932,"x":321,"y":578},{"type":"mousemove","time":4154,"x":330,"y":579},{"type":"mousemove","time":4379,"x":341,"y":579},{"type":"mousemove","time":4633,"x":342,"y":579},{"type":"mousemove","time":4648,"x":340,"y":579},{"type":"mousemove","time":4856,"x":324,"y":580},{"type":"mousemove","time":5070,"x":311,"y":583},{"type":"mousemove","time":5293,"x":306,"y":583},{"type":"mousemove","time":5518,"x":299,"y":583},{"type":"mousemove","time":5746,"x":294,"y":583},{"type":"mousemove","time":5985,"x":281,"y":583},{"type":"mousemove","time":6234,"x":273,"y":583},{"type":"mousemove","time":6507,"x":263,"y":584},{"type":"mousemove","time":6774,"x":261,"y":583},{"type":"mouseup","time":6910,"x":261,"y":583},{"time":6911,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6972,"x":300,"y":539},{"type":"mousemove","time":7198,"x":217,"y":578},{"type":"mousemove","time":7426,"x":136,"y":566},{"type":"mousemove","time":7627,"x":127,"y":573},{"type":"mousemove","time":7852,"x":126,"y":574},{"type":"mousedown","time":7979,"x":126,"y":574},{"type":"mousemove","time":8010,"x":131,"y":574},{"type":"mousemove","time":8237,"x":147,"y":574},{"type":"mousemove","time":8460,"x":156,"y":575},{"type":"mousemove","time":8691,"x":165,"y":574},{"type":"mousemove","time":8927,"x":173,"y":573},{"type":"mousemove","time":9129,"x":185,"y":572},{"type":"mousemove","time":9377,"x":185,"y":572},{"type":"mousemove","time":9494,"x":188,"y":572},{"type":"mousemove","time":9730,"x":190,"y":572},{"type":"mousemove","time":9780,"x":190,"y":572},{"type":"mousemove","time":10029,"x":193,"y":572},{"type":"mousemove","time":10060,"x":195,"y":572},{"type":"mousemove","time":10307,"x":197,"y":572},{"type":"mousemove","time":10550,"x":197,"y":572},{"type":"mousemove","time":10810,"x":197,"y":572},{"type":"mousemove","time":11044,"x":202,"y":573},{"type":"mousemove","time":11289,"x":215,"y":572},{"type":"mouseup","time":11784,"x":215,"y":572},{"time":11785,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":11809,"x":244,"y":581},{"type":"mousemove","time":12049,"x":253,"y":583},{"type":"mousedown","time":12129,"x":253,"y":583},{"type":"mousemove","time":12154,"x":257,"y":583},{"type":"mousemove","time":12380,"x":285,"y":586},{"type":"mousemove","time":12585,"x":291,"y":586},{"type":"mousemove","time":12805,"x":304,"y":585},{"type":"mousemove","time":13061,"x":304,"y":585}],"scrollY":4858,"scrollX":0,"timestamp":1572458908676},{"name":"Action 3","ops":[{"type":"mousedown","time":879,"x":308,"y":496},{"type":"mousemove","time":894,"x":308,"y":495},{"type":"mousemove","time":1098,"x":307,"y":490},{"type":"mousemove","time":1320,"x":303,"y":478},{"type":"mousemove","time":1520,"x":299,"y":460},{"type":"mousemove","time":1728,"x":296,"y":435},{"type":"mousemove","time":1960,"x":295,"y":428},{"type":"mousemove","time":2165,"x":294,"y":412},{"type":"mousemove","time":2411,"x":293,"y":405},{"type":"mousemove","time":2460,"x":293,"y":404},{"type":"mousemove","time":2676,"x":289,"y":391},{"type":"mousemove","time":2983,"x":285,"y":375},{"type":"mousemove","time":3027,"x":285,"y":374},{"type":"mousemove","time":3277,"x":285,"y":367},{"type":"mousemove","time":3490,"x":283,"y":368},{"type":"mousemove","time":3714,"x":292,"y":411},{"type":"mousemove","time":3917,"x":295,"y":422},{"type":"mousemove","time":4126,"x":297,"y":433},{"type":"mousemove","time":4364,"x":300,"y":447},{"type":"mousemove","time":4606,"x":302,"y":456},{"type":"mousemove","time":4818,"x":302,"y":455},{"type":"mousemove","time":5022,"x":303,"y":424},{"type":"mousemove","time":5252,"x":303,"y":409},{"type":"mousemove","time":5423,"x":303,"y":406},{"type":"mousemove","time":5630,"x":302,"y":395},{"type":"mousemove","time":5882,"x":302,"y":375},{"type":"mousemove","time":6119,"x":298,"y":350},{"type":"mousemove","time":6375,"x":294,"y":323},{"type":"mousemove","time":6631,"x":293,"y":317},{"type":"mousemove","time":6763,"x":293,"y":315},{"type":"mousemove","time":6978,"x":282,"y":264},{"type":"mousemove","time":7216,"x":273,"y":225},{"type":"mousemove","time":7427,"x":287,"y":268},{"type":"mousemove","time":7636,"x":296,"y":330},{"type":"mousemove","time":7881,"x":300,"y":366},{"type":"mousemove","time":8087,"x":303,"y":389},{"type":"mousemove","time":8291,"x":306,"y":408},{"type":"mousemove","time":8540,"x":310,"y":430},{"type":"mousemove","time":8928,"x":311,"y":436},{"type":"mousemove","time":9133,"x":315,"y":451},{"type":"mouseup","time":9955,"x":315,"y":451},{"time":9956,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":9984,"x":371,"y":444},{"type":"mousemove","time":10265,"x":437,"y":441}],"scrollY":4566,"scrollX":0,"timestamp":1572458927427}]
\ No newline at end of file