bizcharts渐变的问题

Question

bizcharts的柱状图怎么设置上下渐变呢，而不是左右渐变。看官网文档和demo都没有这样的API，但是它截图里又有这种上下渐变的
这个明显是上下渐变的，但是是截图

我需要这种上下这种效果

class Bar extends Component {

state = {
    autoHideXLabels: false,
};
root = undefined;
node = undefined;
resize = Debounce(() => {
  if (!this.node || !this.node.parentNode) {
    return;
  }
  const canvasWidth = this.node.parentNode.clientWidth;
  const { data = [], autoLabel = true } = this.props;

  if (!autoLabel) {
    return;
  }

  const minWidth = data.length * 30;
  const { autoHideXLabels } = this.state;

  if (canvasWidth <= minWidth) {
    if (!autoHideXLabels) {
      this.setState({
        autoHideXLabels: true,
      });
    }
  } else if (autoHideXLabels) {
    this.setState({
      autoHideXLabels: false,
    });
  }
}, 500);
componentDidMount() {
    window.addEventListener('resize', this.resize, {
        passive: true,
    });
}
componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
}
handleRoot = n => {
    this.root = n;
};
handleRef = n => {
    this.node = n;
};
render() {
    const { autoHideXLabels } = this.state;
    const { height = 1, forceFit = true, scale = [1.14, 3], title, className  } = this.props;
    const barClassName = classNames(styles.bar, className);
    const data = [
        {
            name: "正常",
            "自动站": 18.9,
            "激光雷达": 28.8,
            "风廓线雷达": 40.3,
            "微波辐射计": 81.4
        },
        {
            name: "故障",
            "自动站": 12.4,
            "激光雷达": 23.2,
            "风廓线雷达": 44.5,
            "微波辐射计": 99.7
        },
        {
            name: "不确定",
            "自动站": 12.4,
            "激光雷达": 23.2,
            "风廓线雷达": 54.5,
            "微波辐射计": 99.7
        },
        {
            name: "可用",
            "自动站": 12.4,
            "激光雷达": 23.2,
            "风廓线雷达": 64.5,
            "微波辐射计": 99.7
        },
        {
            name: "维护",
            "自动站": 20.4,
            "激光雷达": 43.2,
            "风廓线雷达": 34.5,
            "微波辐射计": 49.7
        },
    ];
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
        type: "fold",
        fields: ["自动站", "激光雷达", "风廓线雷达", "微波辐射计"],
        key: "x",
        value: "y" 
    });
    return (
    <div className={barClassName} ref={this.handleRoot}>
        <div className={styles.chart} ref={this.handleRef}>
            { title && (<h4 className={styles.title}>{title}</h4>) }
            <Chart 
                height={title ? height - 31 : height}
                data={dv} 
                forceFit={forceFit}
            >
                <Coord scale={scale} />
                <Axis name="x" />
                <Axis name="y" 
                    label={autoHideXLabels ? undefined : {}}
                    tickLine={autoHideXLabels ? undefined : {}}
                />
                {/* <Legend /> */}
                <Tooltip
                    crosshairs={{
                        type: "y"
                    }}
                />
                <Geom
                    type="interval"
                    position="x*y"
                    color={['name', '#FF9E4C-#FB6051-#FF69A6-#FF3636-#4BFCFA-#199EFF-#D6F417-#46BD16-#B8DEFF-#5D80A4']}
                    adjust={[
                    {
                        type: "dodge",
                        marginRatio: 1 / 32
                    }
                    ]}
                />
            </Chart>
        </div>
    </div>
    );
}

}

export default autoHeight()(Bar)

Answer 1

需要修改color的定义