compat: compat `barBorderColor` `barBorderWidth` `barBorderRadius`.

src/chart/bar/BarSeries.ts

@@ -19,7 +19,7 @@
 
 import BaseBarSeriesModel, {BaseBarSeriesOption} from './BaseBarSeries';
 import SeriesModel from '../../model/Series';
-import { ItemStyleOption, OptionDataValue, LabelOption, SeriesStackOptionMixin } from '../../util/types';
+import { ItemStyleOption, OptionDataValue, LabelOption, SeriesStackOptionMixin, ZRColor } from '../../util/types';
 import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
 import type Polar from '../../coord/polar/Polar';
 import { inheritDefaultOption } from '../../util/component';
@@ -29,10 +29,12 @@ import { BrushCommonSelectorsForSeries } from '../../component/brush/selector';
 type BarDataValue = OptionDataValue | OptionDataValue[];
 
 export interface BarItemStyleOption extends ItemStyleOption {
-    /**
-     * Border radius is not supported for bar on polar
-     */
+    // Border radius is not supported for bar on polar
+    borderRadius?: number | number[]
+    // Compat. See `src/chart/bar/barItemStyle`.
     barBorderRadius?: number | number[]
+    barBorderColor?: ItemStyleOption['borderColor']
+    barBorderWidth?: ItemStyleOption['borderWidth']
 }
 export interface BarDataItemOption {
     name?: string

src/chart/bar/BarView.ts

@@ -46,8 +46,11 @@ import type { RectLike } from 'zrender/src/core/BoundingRect';
 import type Model from '../../model/Model';
 import { isCoordinateSystemType } from '../../coord/CoordinateSystem';
 import { getDefaultLabel } from '../helper/labelHelper';
+import {
+    getBarItemStyle, fixBarItemStyle, getBarItemModelBorderWidth,
+    getBarBorderColor, getBarBorderRadius, getBarItemModelBorderRadius
+} from './barItemStyle';
 
-const BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const;
 const _eventPos = [0, 0];
 
 const mathMax = Math.max;
@@ -166,7 +169,7 @@ class BarView extends ChartView {
 
         const drawBackground = seriesModel.get('showBackground', true);
         const backgroundModel = seriesModel.getModel('backgroundStyle');
-        const barBorderRadius = backgroundModel.get('barBorderRadius') || 0;
+        const barBorderRadius = getBarBorderRadius(backgroundModel) || 0;
 
         const bgEls: BarView['_backgroundEls'] = [];
         const oldBgEls = this._backgroundEls;
@@ -179,7 +182,7 @@ class BarView extends ChartView {
                 if (drawBackground) {
                     const bgLayout = getLayout[coord.type](data, dataIndex);
                     const bgEl = createBackgroundEl(coord, isHorizontalOrRadial, bgLayout);
-                    bgEl.useStyle(backgroundModel.getItemStyle());
+                    bgEl.useStyle(getBarItemStyle(backgroundModel));
                     // Only cartesian2d support borderRadius.
                     if (coord.type === 'cartesian2d') {
                         (bgEl as Rect).setShape('r', barBorderRadius);
@@ -219,7 +222,7 @@ class BarView extends ChartView {
 
                 if (drawBackground) {
                     const bgEl = oldBgEls[oldIndex];
-                    bgEl.useStyle(backgroundModel.getItemStyle());
+                    bgEl.useStyle(getBarItemStyle(backgroundModel));
                     // Only cartesian2d support borderRadius.
                     if (coord.type === 'cartesian2d') {
                         (bgEl as Rect).setShape('r', barBorderRadius);
@@ -553,13 +556,13 @@ function updateStyle(
     isPolar: boolean
 ) {
     const style = data.getItemVisual(dataIndex, 'style');
-    const hoverStyle = itemModel.getModel(['emphasis', 'itemStyle']).getItemStyle();
+    const hoverStyle = getBarItemStyle(itemModel.getModel(['emphasis', 'itemStyle']));
 
     if (!isPolar) {
-        (el as Rect).setShape('r', itemModel.get(['itemStyle', 'barBorderRadius']) || 0);
+        (el as Rect).setShape('r', getBarItemModelBorderRadius(itemModel) || 0);
     }
 
-    el.useStyle(style);
+    el.useStyle(fixBarItemStyle(itemModel, style));
 
     el.ignore = isZeroOnPolar(layout as SectorLayout);
 
@@ -595,7 +598,7 @@ function getLineWidth(
     itemModel: Model<BarSeriesOption>,
     rawLayout: RectLayout
 ) {
-    const lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
+    const lineWidth = getBarItemModelBorderWidth(itemModel) || 0;
     // width or height may be NaN for empty data
     const width = isNaN(rawLayout.width) ? Number.MAX_VALUE : Math.abs(rawLayout.width);
     const height = isNaN(rawLayout.height) ? Number.MAX_VALUE : Math.abs(rawLayout.height);
@@ -757,8 +760,8 @@ function setLargeBackgroundStyle(
     backgroundModel: Model<BarSeriesOption['backgroundStyle']>,
     data: List
 ) {
-    const borderColor = backgroundModel.get('borderColor') || backgroundModel.get('color');
-    const itemStyle = backgroundModel.getItemStyle(['color', 'borderColor']);
+    const borderColor = getBarBorderColor(backgroundModel) || backgroundModel.get('color');
+    const itemStyle = getBarItemStyle(backgroundModel);
 
     el.useStyle(itemStyle);
     el.style.fill = null;

src/chart/bar/barItemStyle.ts

+/*
+* 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.
+*/
+
+import makeStyleMapper from '../../model/mixin/makeStyleMapper';
+import * as zrUtil from 'zrender/src/core/util';
+import Model from '../../model/Model';
+import { ItemStyleOption, Dictionary } from '../../util/types';
+import { PathStyleProps } from 'zrender/src/graphic/Path';
+import { BarDataItemOption, BarItemStyleOption } from './BarSeries';
+
+const ITEM_STYLE_BAR_BORDER_COLOR = ['itemStyle', 'barBorderColor'] as const;
+const ITEM_STYLE_BAR_BORDER_WIDTH = ['itemStyle', 'barBorderWidth'] as const;
+const ITEM_STYLE_BORDER_WIDTH = ['itemStyle', 'borderWidth'] as const;
+const ITEM_STYLE_BAR_BORDER_RADIUS = ['itemStyle', 'barBorderRadius'] as const;
+const ITEM_STYLE_BORDER_RADIUS = ['itemStyle', 'borderRadius'] as const;
+
+const getBarItemStyleInner = makeStyleMapper(
+    [
+        ['fill', 'color'],
+        ['stroke', 'borderColor'],
+        ['lineWidth', 'borderWidth'],
+        // Previously echarts2 use 'barBorderXxx' to distinguish
+        // with `borderXxx` for "magic type" feature. That seams
+        // not a neat strategy. We should better unify the name
+        // of those props to `borderXxx` rather than `barBorderXxx`.
+        // But the echarts-doc has been describing it as `barBorderXxx`
+        // until echarts4. So we still compat that settings to reduce
+        // the break change.
+        ['stroke', 'barBorderColor'],
+        ['lineWidth', 'barBorderWidth'],
+        ['opacity'],
+        ['shadowBlur'],
+        ['shadowOffsetX'],
+        ['shadowOffsetY'],
+        ['shadowColor']
+    ]
+);
+
+export function getBarItemStyle(
+    model: Model,
+    excludes?: readonly (keyof ItemStyleOption)[]
+) {
+    const style = getBarItemStyleInner(model, excludes);
+    if (model.getBorderLineDash) {
+        const lineDash = model.getBorderLineDash();
+        lineDash && (style.lineDash = lineDash);
+    }
+    return style;
+}
+
+/**
+ * If has `barBorderColor` or `barBorderWidth`, return a new style.
+ * Otherwise return the input style.
+ */
+export function fixBarItemStyle(
+    itemModel: Model<BarDataItemOption>,
+    style: PathStyleProps
+): PathStyleProps {
+
+    const barBorderColor = itemModel.get(ITEM_STYLE_BAR_BORDER_COLOR);
+    const barBorderWidth = itemModel.get(ITEM_STYLE_BAR_BORDER_WIDTH);
+    let newProps: Dictionary<unknown>;
+
+    if (barBorderColor != null) {
+        newProps = newProps || {};
+        newProps.barBorderColor = barBorderColor;
+    }
+    if (barBorderWidth != null) {
+        newProps = newProps || {};
+        newProps.barBorderColor = barBorderWidth;
+    }
+    if (newProps) {
+        style = zrUtil.createObject(style, newProps);
+    }
+
+    return style;
+}
+
+export function getBarBorderColor(styleModel: Model<BarItemStyleOption>): BarItemStyleOption['borderColor'] {
+    return zrUtil.retrieve2(
+        styleModel.get('borderColor'),
+        styleModel.get('barBorderColor')
+    );
+}
+export function getBarBorderRadius(styleModel: Model<BarItemStyleOption>): BarItemStyleOption['borderRadius'] {
+    return zrUtil.retrieve2(
+        styleModel.get('borderRadius'),
+        styleModel.get('barBorderRadius')
+    );
+}
+
+export function getBarItemModelBorderWidth(itemModel: Model<BarDataItemOption>): BarItemStyleOption['borderWidth'] {
+    return zrUtil.retrieve2(
+        itemModel.get(ITEM_STYLE_BORDER_WIDTH),
+        itemModel.get(ITEM_STYLE_BAR_BORDER_WIDTH)
+    );
+}
+
+export function getBarItemModelBorderRadius(itemModel: Model<BarDataItemOption>): BarItemStyleOption['borderRadius'] {
+    return zrUtil.retrieve2(
+        itemModel.get(ITEM_STYLE_BORDER_RADIUS),
+        itemModel.get(ITEM_STYLE_BAR_BORDER_RADIUS)
+    );
+}
+

src/model/mixin/itemStyle.ts

@@ -55,7 +55,7 @@ class ItemStyleMixin {
     ): ItemStyleProps {
         const style = getItemStyle(this, excludes, includes);
         const lineDash = this.getBorderLineDash();
-        lineDash && ((style as any).lineDash = lineDash);
+        lineDash && (style.lineDash = lineDash);
         return style;
     }