Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: category axis label disappear #11536

Merged
merged 1 commit into from Oct 31, 2019
Merged

fix: category axis label disappear #11536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/coord/axisTickLabelBuilder.js
View file
Open in desktop
Expand Up @@ -243,19 +243,27 @@ 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
&& Math.abs(lastTickCount - tickCount) <= 1
// 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;
}
Expand All @@ -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;
Expand Down
140 changes: 140 additions & 0 deletions test/axis-interval2.html
View file
Open in desktop
Expand Up @@ -27,6 +27,7 @@
<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>
Expand Down Expand Up @@ -56,6 +57,8 @@
<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>
Expand Down Expand Up @@ -1213,5 +1216,142 @@




<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>
7 changes: 7 additions & 0 deletions test/lib/testHelper.js
View file
Open in desktop
Expand Up @@ -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.
Expand Down Expand Up @@ -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});
}

Expand Down
1 change: 1 addition & 0 deletions test/runTest/actions/__meta__.json
View file
Open in desktop
Expand Up @@ -10,6 +10,7 @@
"axis": 1,
"axis-boundaryGap": 1,
"axis-interval": 3,
"axis-interval2": 3,
"axis-lastLabel": 5,
"axis-multiple": 1,
"axis-style": 2,
Expand Down
1 change: 1 addition & 0 deletions test/runTest/actions/axis-interval2.json
View file
Open in desktop
@@ -0,0 +1 @@
[{"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}]