Merge pull request #13046 from apache/axis-style-optimize

[5.0] [FEATURE] Improve default axis style

src/chart/treemap/TreemapSeries.ts

@@ -247,12 +247,6 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             emptyItemWidth: 25,             // Width of empty node.
             itemStyle: {
                 color: 'rgba(0,0,0,0.7)', //'#5793f3',
-                borderColor: 'rgba(255,255,255,0.7)',
-                borderWidth: 1,
-                shadowColor: 'rgba(150,150,150,1)',
-                shadowBlur: 3,
-                shadowOffsetX: 0,
-                shadowOffsetY: 0,
                 textStyle: {
                     color: '#fff'
                 }

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();
 

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);
 

src/component/axisPointer/AxisPointerModel.ts

@@ -98,13 +98,13 @@ class AxisPointerModel extends ComponentModel<AxisPointerOption> {
         animationDurationUpdate: 200,
 
         lineStyle: {
-            color: '#aaa',
+            color: '#B9BEC9',
             width: 1,
-            type: 'solid'
+            type: 'dashed'
         },
 
         shadowStyle: {
-            color: 'rgba(150,150,150,0.3)'
+            color: 'rgba(210,219,238,0.2)'
         },
 
         label: {
@@ -117,12 +117,7 @@ class AxisPointerModel extends ComponentModel<AxisPointerOption> {
             backgroundColor: 'auto', // default: axis line color
             borderColor: null,
             borderWidth: 0,
-            shadowBlur: 3,
-            shadowColor: '#aaa'
-            // Considering applicability, common style should
-            // better not have shadowOffset.
-            // shadowOffsetX: 0,
-            // shadowOffsetY: 2
+            borderRadius: 3
         },
 
         handle: {

src/component/title.ts

@@ -118,11 +118,12 @@ class TitleModel extends ComponentModel<TitleOption> {
         itemGap: 10,
         textStyle: {
             fontSize: 18,
-            fontWeight: 'bolder',
-            color: '#333'
+            fontWeight: 'bold',
+            color: '#464646'
         },
         subtextStyle: {
-            color: '#aaa'
+            fontSize: 12,
+            color: '#6E7079'
         }
     };
 }

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.

src/coord/axisDefault.ts

@@ -60,7 +60,7 @@ const defaultOption: AxisBaseOption = {
         onZero: true,
         onZeroAxisIndex: null,
         lineStyle: {
-            color: '#333',
+            color: '#6E7079',
             width: 1,
             type: 'solid'
         },
@@ -94,15 +94,15 @@ const defaultOption: AxisBaseOption = {
     splitLine: {
         show: true,
         lineStyle: {
-            color: ['#ccc'],
+            color: ['#E0E6F1'],
             width: 1,
             type: 'solid'
         }
     },
     splitArea: {
         show: false,
         areaStyle: {
-            color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
+            color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)']
         }
     }
 };
@@ -132,6 +132,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]