You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2018/09/03 13:38:14 UTC
[incubator-echarts] branch master updated: fix(axis): fix axes
overlap when two y axes on one x axis. fix #8975
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
The following commit(s) were added to refs/heads/master by this push:
new ceca0fa fix(axis): fix axes overlap when two y axes on one x axis. fix #8975
new 9c4a004 Merge branch 'master' of https://github.com/apache/incubator-echarts
ceca0fa is described below
commit ceca0fad741e17339992bf566bb1401dbde5f43d
Author: sushuang <su...@gmail.com>
AuthorDate: Mon Sep 3 21:36:57 2018 +0800
fix(axis): fix axes overlap when two y axes on one x axis. fix #8975
---
src/coord/cartesian/Grid.js | 45 +++++---
test/axis-multiple.html | 256 ++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 287 insertions(+), 14 deletions(-)
diff --git a/src/coord/cartesian/Grid.js b/src/coord/cartesian/Grid.js
index a98181c..458a166 100644
--- a/src/coord/cartesian/Grid.js
+++ b/src/coord/cartesian/Grid.js
@@ -100,11 +100,15 @@ gridProto.update = function (ecModel, api) {
each(axesMap.y, function (yAxis) {
niceScaleExtent(yAxis.scale, yAxis.model);
});
+
+ // Key: axisDim_axisIndex, value: boolean, whether onZero target.
+ var onZeroRecords = {};
+
each(axesMap.x, function (xAxis) {
- fixAxisOnZero(axesMap, 'y', xAxis);
+ fixAxisOnZero(axesMap, 'y', xAxis, onZeroRecords);
});
each(axesMap.y, function (yAxis) {
- fixAxisOnZero(axesMap, 'x', yAxis);
+ fixAxisOnZero(axesMap, 'x', yAxis, onZeroRecords);
});
// Resize again if containLabel is enabled
@@ -112,11 +116,11 @@ gridProto.update = function (ecModel, api) {
this.resize(this.model, api);
};
-function fixAxisOnZero(axesMap, otherAxisDim, axis) {
+function fixAxisOnZero(axesMap, otherAxisDim, axis, onZeroRecords) {
axis.getAxesOnZeroOf = function () {
// TODO: onZero of multiple axes.
- return otherAxis ? [otherAxis] : [];
+ return otherAxisOnZeroOf ? [otherAxisOnZeroOf] : [];
};
// onZero can not be enabled in these two situations:
@@ -124,7 +128,7 @@ function fixAxisOnZero(axesMap, otherAxisDim, axis) {
// 2. When no axis is cross 0 point.
var otherAxes = axesMap[otherAxisDim];
- var otherAxis;
+ var otherAxisOnZeroOf;
var axisModel = axis.model;
var onZero = axisModel.get('axisLine.onZero');
var onZeroAxisIndex = axisModel.get('axisLine.onZeroAxisIndex');
@@ -136,18 +140,31 @@ function fixAxisOnZero(axesMap, otherAxisDim, axis) {
// If target axis is specified.
if (onZeroAxisIndex != null) {
if (canOnZeroToAxis(otherAxes[onZeroAxisIndex])) {
- otherAxis = otherAxes[onZeroAxisIndex];
+ otherAxisOnZeroOf = otherAxes[onZeroAxisIndex];
}
- return;
}
-
- // Find the first available other axis.
- for (var idx in otherAxes) {
- if (otherAxes.hasOwnProperty(idx) && canOnZeroToAxis(otherAxes[idx])) {
- otherAxis = otherAxes[idx];
- break;
+ else {
+ // Find the first available other axis.
+ for (var idx in otherAxes) {
+ if (otherAxes.hasOwnProperty(idx)
+ && canOnZeroToAxis(otherAxes[idx])
+ // Consider that two Y axes on one value axis,
+ // if both onZero, the two Y axes overlap.
+ && !onZeroRecords[getOnZeroRecordKey(otherAxes[idx])]
+ ) {
+ otherAxisOnZeroOf = otherAxes[idx];
+ break;
+ }
}
}
+
+ if (otherAxisOnZeroOf) {
+ onZeroRecords[getOnZeroRecordKey(otherAxisOnZeroOf)] = true;
+ }
+
+ function getOnZeroRecordKey(axis) {
+ return axis.dim + '_' + axis.index;
+ }
}
function canOnZeroToAxis(axis) {
@@ -185,7 +202,7 @@ gridProto.resize = function (gridModel, api, ignoreContainLabel) {
if (axis.position === 'top') {
gridRect.y += labelUnionRect.height + margin;
}
- else if (axis.position === 'left') {
+ else if (axis.position === 'left') {
gridRect.x += labelUnionRect.width + margin;
}
}
diff --git a/test/axis-multiple.html b/test/axis-multiple.html
new file mode 100644
index 0000000..a467b2a
--- /dev/null
+++ b/test/axis-multiple.html
@@ -0,0 +1,256 @@
+<!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>
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ .test-title {
+ background: #146402;
+ color: #fff;
+ }
+ </style>
+
+
+ <!-- <div id="main0"></div> -->
+ <div id="main1"></div>
+
+
+ <script>
+
+ var chart;
+ var myChart;
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+
+ var option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999'
+ }
+ }
+ },
+ toolbox: {
+ feature: {
+ dataView: {show: true, readOnly: false},
+ magicType: {show: true, type: ['line', 'bar']},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ legend: {
+ data:['蒸发量','降水量','平均温度']
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+ axisPointer: {
+ type: 'shadow'
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: '水量',
+ min: 0,
+ max: 250,
+ interval: 50,
+ axisLabel: {
+ formatter: '{value} ml'
+ }
+ },
+ {
+ type: 'value',
+ name: '温度',
+ min: 0,
+ max: 25,
+ interval: 5,
+ axisLabel: {
+ formatter: '{value} °C'
+ }
+ }
+ ],
+ series: [
+ {
+ name:'蒸发量',
+ type:'bar',
+ data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+ },
+ {
+ name:'降水量',
+ type:'bar',
+ data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+ },
+ {
+ name:'平均温度',
+ type:'line',
+ yAxisIndex: 1,
+ data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+ }
+ ]
+ };
+
+ chart = myChart = testHelper.create(echarts, 'main0', {
+ option: option,
+ title: 'One category X axis with multiple Y value axes'
+ });
+ });
+
+ </script>
+
+
+
+
+
+
+ <script>
+
+ var chart;
+ var myChart;
+ var option;
+
+ require([
+ 'echarts'/*, 'map/js/china' */
+ ], function (echarts) {
+
+ var data = [[10, 16, 3, 'A'], [16, 18, 15, 'B'], [18, 26, 12, 'C'], [26, 32, 22, 'D'], [32, 56, 7, 'E'], [56, 62, 17, 'F']];
+ var colorList = ['#4f81bd', '#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];
+ data = echarts.util.map(data, function (item, index) {
+ return {
+ value: item,
+ itemStyle: {
+ normal: {
+ color: colorList[index]
+ }
+ }
+ };
+ });
+
+ function renderItem(params, api) {
+ var yValue = api.value(2);
+ var start = api.coord([api.value(0), yValue]);
+ var size = api.size([api.value(1) - api.value(0), yValue]);
+ var style = api.style();
+ return {
+ type: 'rect',
+ shape: {
+ x: start[0],
+ y: start[1],
+ width: size[0],
+ height: size[1]
+ },
+ style: style
+ };
+ }
+
+ var option = {
+ title: {
+ text: 'Profit',
+ left: 'center'
+ },
+ tooltip: {
+ },
+ xAxis: {
+ },
+ yAxis: [{
+ name: 'Y Left'
+ }, {
+ name: 'Y Right'
+ }],
+
+ series: [{
+ type: 'scatter',
+ data: [[12, 33], [33, 55]]
+ }, {
+ type: 'scatter',
+ yAxisIndex: 1,
+ data: [[123, 233], [133, 255]]
+ }]
+ // series: [{
+ // type: 'custom',
+ // renderItem: renderItem,
+ // label: {
+ // normal: {
+ // show: true,
+ // position: 'top'
+ // }
+ // },
+ // dimensions: ['from', 'to', 'profit'],
+ // encode: {
+ // x: [0, 1],
+ // y: 2,
+ // tooltip: [0, 1, 2],
+ // itemName: 3
+ // },
+ // data: data
+ // }, {
+ // type: 'custom',
+ // renderItem: renderItem,
+ // yAxisIndex: 1,
+ // label: {
+ // normal: {
+ // show: true,
+ // position: 'top'
+ // }
+ // },
+ // dimensions: ['from', 'to', 'profit'],
+ // encode: {
+ // x: [0, 1],
+ // y: 2,
+ // tooltip: [0, 1, 2],
+ // itemName: 3
+ // },
+ // data: data
+ // }]
+ };
+
+ chart = myChart = testHelper.create(echarts, 'main1', {
+ title: 'One value X axis with multiple Y value axes (the right Y axis should not be effected by onZero)',
+ option: option
+ });
+ });
+
+ </script>
+
+
+
+
+
+ </body>
+</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org