You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2019/10/29 15:02:24 UTC
[incubator-echarts] 01/01: fix(axis): fix extra ticks added caused
by rounding error. add test cases for splitArea
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch test-for-splitArea
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 3b5461735cdd29bdc619f45cf98cca70d7520fb1
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Oct 29 23:01:44 2019 +0800
fix(axis): fix extra ticks added caused by rounding error. add test cases for splitArea
---
src/coord/Axis.js | 8 ++-
test/axis-splitArea.html | 182 +++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 188 insertions(+), 2 deletions(-)
diff --git a/src/coord/Axis.js b/src/coord/Axis.js
index 2db0138..1af761a 100644
--- a/src/coord/Axis.js
+++ b/src/coord/Axis.js
@@ -18,7 +18,7 @@
*/
import {each, map} from 'zrender/src/core/util';
-import {linearMap, getPixelPrecision} from '../util/number';
+import {linearMap, getPixelPrecision, round} from '../util/number';
import {
createAxisTicks,
createAxisLabels,
@@ -307,7 +307,6 @@ function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWith
last = ticksCoords[1] = {coord: axisExtent[0]};
}
else {
-
var crossLen = ticksCoords[ticksLen - 1].tickValue - ticksCoords[0].tickValue;
var shift = (ticksCoords[ticksLen - 1].coord - ticksCoords[0].coord) / crossLen;
@@ -330,6 +329,7 @@ function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWith
var inverse = axisExtent[0] > axisExtent[1];
+ // Handling clamp.
if (littleThan(ticksCoords[0].coord, axisExtent[0])) {
clamp ? (ticksCoords[0].coord = axisExtent[0]) : ticksCoords.shift();
}
@@ -344,6 +344,10 @@ function fixOnBandTicksCoords(axis, ticksCoords, tickCategoryInterval, alignWith
}
function littleThan(a, b) {
+ // Avoid rounding error cause calculated tick coord different with extent.
+ // It may cause an extra unecessary tick added.
+ a = round(a);
+ b = round(b);
return inverse ? a > b : a < b;
}
}
diff --git a/test/axis-splitArea.html b/test/axis-splitArea.html
new file mode 100644
index 0000000..2ac8686
--- /dev/null
+++ b/test/axis-splitArea.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <script src="lib/esl.js"></script>
+ <script src="lib/config.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ </style>
+
+
+
+ <div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ axisLine: {
+ lineStyle: {
+ color: '#EAECF6'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#EAECF6'
+ }
+ },
+ axisLabel: {
+ show: true
+ },
+ splitArea: {
+ show: true,
+ areaStyle: {
+ color: ['white', 'white', 'white', 'white', 'white', 'white', '#008cd5'],
+ opacity: 0.1,
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#EAECF6'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'transparent'
+ }
+ },
+ },
+ series: [{
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line'
+ }, {
+ data: [820, 932, 901, 934, 1290, 1330, 1320].map(t => t * 0.1),
+ type: 'line'
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Color array should be in right order in splitArea.',
+ "'white', 'white', 'white', 'white', 'white', 'white', '#008cd5'",
+ 'Case from issue #10948'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+
+ option = {
+ color: ['#3398DB'],
+ tooltip : {
+ trigger: 'axis',
+ axisPointer : { // 坐标轴指示器，坐标轴触发有效
+ type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis : [
+ {
+ type : 'category',
+ data : ['1', '2', '3', '4', '5', '6', '7','8'],
+ axisTick: {
+ alignWithLabel: true
+ },
+ splitArea:{
+ show:true,
+ areaStyle:{
+ color:['green','red','red','red','red','red','red','black']
+ }
+ }
+ }
+ ],
+ yAxis : [
+ {
+ type : 'value'
+ }
+ ],
+ series : [
+ {
+ name:'直接访问',
+ type:'bar',
+ barWidth: '60%',
+ data:[10, 52, 200, 334, 390, 330, 220,100]
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Color array should be in right order in splitArea.',
+ "'green','red','red','red','red','red','red','black'",
+ 'Case from issue #11438'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ </body>
+</html>
+
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org