Lo que estoy tratando de hacer es cambiar el tamaño de mis echarts cada vez que mi elemento de cuadrícula cambia su diseño. Entonces, de acuerdo con la documentación de diseño de cuadrícula de reacción, llamo a mi chart.resize en la función de devolución de llamada de diseño de cuadrícula de reacción.

Inicializo mi instancia de gráfico en mi objeto NewvsReturnVisitors y devuelvo esa instancia de gráfico a index.js, a continuación se muestra el código

 function renderChart() { const renderInstance = echarts.getInstanceByDom(chart.current); if (renderInstance) { chartInstance = renderInstance; } else { chartInstance = echarts.init(chart.current, null, { width: 500, height: 300 }); props.value(chartInstance); } chartInstance.setOption(option); }

Esta es mi función onLayoutChange dentro de index.js

 onLayoutChange(val) { // this.props.onLayoutChange(layout); // console.log("yc ", val); this.setState({ val: val.resize() }); }

Luego lo paso a la función de devolución de llamada dentro del componente ReactGridLayout

 ... render() { return ( <div className="DetailLocationContainer"> <button onClick={this.onAddItem}>Add Item</button> <button onClick={this.onChartItem}>Add Chart</button> <ReactGridLayout onBreakpointChange={this.onBreakpointChange} onLayoutChange={this.onLayoutChange.bind(this)} {...this.props} > {_.map(this.state.items, (el) => this.createElement(el))} {_.map(this.state.charts, (el) => this.createChart(el))} </ReactGridLayout> </div> ); } }

El resultado esperado:

chart.resize obtener llamada y cambiar el tamaño de mi gráfico en consecuencia

Resultado actual:

mensaje de error resize is not a function

Haga clic en my codesandbox para ver el código completo

Realmente no estoy seguro de dónde lo estoy haciendo mal, realmente agradezco cualquier ayuda