This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch axis-style-optimize
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 4acb689f0b28f42165e99e5c9c148def12d29b2a
Author: pissang <bm2736...@gmail.com>
AuthorDate: Tue Jul 28 21:41:08 2020 +0800
feat(axis): not show axisLine,axisTick for value axis if other is cateory
or time.
tweak color
---
src/component/axis/AxisBuilder.ts | 25 ++++++++++++++++++-------
src/component/axis/CartesianAxisView.ts | 17 +++++++++++++++--
src/coord/axisCommonTypes.ts | 4 ++--
src/coord/axisDefault.ts | 15 +++++++++++++--
4 files changed, 48 insertions(+), 13 deletions(-)
diff --git a/src/component/axis/AxisBuilder.ts
b/src/component/axis/AxisBuilder.ts
index 3430c31..bb755e0 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -62,7 +62,7 @@ type AxisLabelText = graphic.Text & {
__truncatedText: string
} & ECElement;
-interface AxisBuilderCfg {
+export interface AxisBuilderCfg {
position?: number[]
rotation?: number
/**
@@ -96,6 +96,8 @@ interface AxisBuilderCfg {
nameTruncateMaxWidth?: number
silent?: boolean
+
+ handleAutoShown?(elementType: 'axisLine' | 'axisTick'): boolean
}
interface TickCoord {
@@ -149,7 +151,8 @@ class AxisBuilder {
nameDirection: 1,
tickDirection: 1,
labelDirection: 1,
- silent: true
+ silent: true,
+ handleAutoShown: () => true
} as AxisBuilderCfg
);
@@ -244,7 +247,11 @@ const builders: Record<'axisLine' | 'axisTickLabel' |
'axisName', AxisElementsBu
axisLine(opt, axisModel, group, transformGroup) {
- if (!axisModel.get(['axisLine', 'show'])) {
+ let shown = axisModel.get(['axisLine', 'show']);
+ if (shown === 'auto' && opt.handleAutoShown) {
+ shown = opt.handleAutoShown('axisLine');
+ }
+ if (!shown) {
return;
}
@@ -344,7 +351,7 @@ const builders: Record<'axisLine' | 'axisTickLabel' |
'axisName', AxisElementsBu
axisTickLabel(opt, axisModel, group, transformGroup) {
- const ticksEls = buildAxisMajorTicks(group, transformGroup, axisModel,
opt.tickDirection);
+ const ticksEls = buildAxisMajorTicks(group, transformGroup, axisModel,
opt);
const labelEls = buildAxisLabel(group, transformGroup, axisModel, opt);
fixMinMaxLabelShow(axisModel, labelEls, ticksEls);
@@ -650,18 +657,22 @@ function buildAxisMajorTicks(
group: graphic.Group,
transformGroup: graphic.Group,
axisModel: AxisBaseModel,
- tickDirection: number
+ opt: AxisBuilderCfg
) {
const axis = axisModel.axis;
const tickModel = axisModel.getModel('axisTick');
- if (!tickModel.get('show') || axis.scale.isBlank()) {
+ let shown = tickModel.get('show');
+ if (shown === 'auto' && opt.handleAutoShown) {
+ shown = opt.handleAutoShown('axisTick');
+ }
+ if (!shown || axis.scale.isBlank()) {
return;
}
const lineStyleModel = tickModel.getModel('lineStyle');
- const tickEndCoord = tickDirection * tickModel.get('length');
+ const tickEndCoord = opt.tickDirection * tickModel.get('length');
const ticksCoords = axis.getTicksCoords();
diff --git a/src/component/axis/CartesianAxisView.ts
b/src/component/axis/CartesianAxisView.ts
index 711b487..bdf060a 100644
--- a/src/component/axis/CartesianAxisView.ts
+++ b/src/component/axis/CartesianAxisView.ts
@@ -19,7 +19,7 @@
import * as zrUtil from 'zrender/src/core/util';
import * as graphic from '../../util/graphic';
-import AxisBuilder from './AxisBuilder';
+import AxisBuilder, {AxisBuilderCfg} from './AxisBuilder';
import AxisView from './AxisView';
import * as cartesianAxisHelper from
'../../coord/cartesian/cartesianAxisHelper';
import {rectCoordAxisBuildSplitArea, rectCoordAxisHandleRemove} from
'./axisSplitHelper';
@@ -66,7 +66,20 @@ class CartesianAxisView extends AxisView {
const layout = cartesianAxisHelper.layout(gridModel, axisModel);
- const axisBuilder = new AxisBuilder(axisModel, layout);
+ const axisBuilder = new AxisBuilder(axisModel, zrUtil.extend({
+ handleAutoShown(elementType) {
+ const cartesians = gridModel.coordinateSystem.getCartesians();
+ for (let i = 0; i < cartesians.length; i++) {
+ const otherAxisType =
cartesians[i].getOtherAxis(axisModel.axis).type;
+ if (otherAxisType === 'value' || otherAxisType === 'log') {
+ // Still show axis tick or axisLine if other axis is
value / log
+ return true;
+ }
+ }
+ // Not show axisTick or axisLine if other axis is category /
time
+ return false;
+ }
+ } as AxisBuilderCfg, layout));
zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts
index fb00c4b..6fb36cc 100644
--- a/src/coord/axisCommonTypes.ts
+++ b/src/coord/axisCommonTypes.ts
@@ -127,7 +127,7 @@ interface AxisNameTextStyleOption extends TextCommonOption {
}
interface AxisLineOption {
- show?: boolean,
+ show?: boolean | 'auto',
onZero?: boolean,
onZeroAxisIndex?: number,
// The arrow at both ends the the axis.
@@ -138,7 +138,7 @@ interface AxisLineOption {
}
interface AxisTickOption {
- show?: boolean,
+ show?: boolean | 'auto',
// Whether axisTick is inside the grid or outside the grid.
inside?: boolean,
// The length of axisTick.
diff --git a/src/coord/axisDefault.ts b/src/coord/axisDefault.ts
index 3777855..677fa18 100644
--- a/src/coord/axisDefault.ts
+++ b/src/coord/axisDefault.ts
@@ -89,12 +89,14 @@ const defaultOption: AxisBaseOption = {
showMaxLabel: null,
margin: 8,
// formatter: null,
- fontSize: 12
+ fontSize: 12,
+
+ color: '#6E7079'
},
splitLine: {
show: true,
lineStyle: {
- color: ['#ccc'],
+ color: ['#ECEFF5'],
width: 1,
type: 'solid'
}
@@ -132,6 +134,15 @@ const categoryAxis: AxisBaseOption = zrUtil.merge({
const valueAxis: AxisBaseOption = zrUtil.merge({
boundaryGap: [0, 0],
+ axisLine: {
+ // Not shown when other axis is categoryAxis in cartesian
+ show: 'auto'
+ },
+ axisTick: {
+ // Not shown when other axis is categoryAxis in cartesian
+ show: 'auto'
+ },
+
// TODO
// min/max: [30, datamin, 60] or [20, datamin] or [datamin, 60]
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
