用引入react及echart的方式做了一个页面，页面有多个图表，每一个图表都是一个组件

Question

Answer 1

如果你使用的是未被封装的echarts，只能手动的调整宽高了……echarts默认不支持自适应，至少我看官方没有找到相关资料；没找过其它版本的图标库，所以，不知道有没有自适应的；

Answer 2

window.onresize = myChart.resize;

Answer 3

多个图表只要避免覆盖掉 window.onresize 方法就行了。当然多个组件批处理的话，不妨写个高阶组件封装一下。const ChartWrapper = ChildComponent => class extends Component {&nbsp; &nbsp; componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; if (window) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const onresize = window.onresize;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.onresize = () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (onresize) onresize();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.child.resize();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ChildComponent {...this.props} ref={(child) => { this.child = child; }} />&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }};export default ChartWrapper;然后确保每个子组件内部实现 resize 方法。class Line extends Component {&nbsp; &nbsp; resize = () => {&nbsp; &nbsp; &nbsp; &nbsp; // myChart.resize();&nbsp; &nbsp; };}export default ChartWrapper(Line);//&nbsp;class Bar extends Component {&nbsp; &nbsp; resize = () => {&nbsp; &nbsp; &nbsp; &nbsp; // myChart.resize();&nbsp; &nbsp; };}export default ChartWrapper(Bar);