bizcharts内部的canvas在页面中的布局位置

// 先计算出外框的宽高,传入内部的Chart部分,由于我的card中还有其他的内容,所以Charts的 forceFit 要设置成false(图表的宽度自适应开关,默认为 false,设置为 true 时表示自动取 dom(实例容器)的宽度)
// padding 设置图表内边距
<Card cumulateContainerRange={(width, height) => { this.setState({ chartStyle: { width: width, height: height } }) }}>
    <div>其他自定义内容区域,高度是x</div>
    <Chart forceFit={false} width={this.chartStyle.width} height={this.chartStyle.height - x} padding={[20, 50, 20, 50]}></Chart>
</Card>

// Card 相关
componentDidMount(){
    this.props.cumulateContainerRange(this.refs.custom_card_container.clientWidth, this.refs.custom_card_container.clientHeight)
}
<div ref="custom_card_container">
</div>

 

posted @ 2020-05-26 16:28  第一神坑  Views(622)  Comments(0Edit  收藏  举报