关于dynamic chart图片显示堆叠的问题 about echarts-for-react HOT 8 CLOSED

其实问题很简单，应该你设置为100%高度，所以图表的高度和父节点一致，所以图表的高度也就取决于父节点的高度了…

父节点高度不够，就导致图表高度也不够了-_-||

解决办法就是：增大父div的高度。或者使用js计算屏幕高度，然后设置为div的height。

from echarts-for-react.

虽然我们本地对echarts-for-react进行了简单的再次封装后，在shouldComponetUpdate()中进行了resize()操作暂时解决了这个堆叠的问题，但是感觉这并不是最完美的解决方案，而且效率和性能并不高。

代码如下:

shouldComponentUpdate(nextProps){
            let echarts_instance = this.refs.echarts_react.getEchartsInstance();
            echarts_instance.resize();
            return true;
 }

如果能在echarts-for-react内部解决，将是Very Good了。 @hustcc

from echarts-for-react.

问题我已经提到issue中了。

我的父div的高度很大，没有对图表有影响。

而且你的例子我下载到了本地，设置为height：100%。存在同样的问题，issue中的堆叠截图就运行的是你的Sample。

在 2016年9月22日，上午3:09，hustcc [email protected] 写道：

其实问题很简单，应该你设置为100%高度，所以图表的高度和父节点一致，所以图表的高度也就取决于父节点的高度了…

父节点高度不够，就导致图表高度也不够了-_-||

解决办法就是：增大父div的高度。或者使用js计算屏幕高度，然后设置为div的height。

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #15 (comment), or mute the thread https://github.com/notifications/unsubscribe-auth/ATPexWmvYZfr9rVuP0QNVq9z3O1tMAofks5qslPtgaJpZM4KDuGo.

from echarts-for-react.

执行resize()之后的效果是什么样子的？

from echarts-for-react.

resize是正常显示了啊。

在 2016年9月22日，上午3:16，hustcc [email protected] 写道：

执行resize()之后的效果是什么样子的？

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #15 (comment), or mute the thread https://github.com/notifications/unsubscribe-auth/ATPexfS7j0eUeyz3x0PfYfxVHV3fBrfxks5qslV9gaJpZM4KDuGo.

from echarts-for-react.

charts高度百分之百，就是占满整个屏幕的高度？你的父div高度怎么设置的？

from echarts-for-react.

这是你的Sample，我更改后的代码。红色字体是我更改的，你可以自己实验一下，将height改为100%。

render: function() {
        let code = "<ReactEcharts ref='echartsInstance' \n" +
                    "    option={this.state.option} />\n";
        return (
            <div className='examples'>
                <div className='parent'>
                    <label> use React state to render dynamic chart</label>
                    <ReactEcharts ref='echarts_react'
                        option={this.state.option}
                        style={{height: '100%'}} />
                    <label> code below: QQQQQQQQQQQQuse state of react to render dynamic chart</label>
                    <pre>
                        <code>{code}</code>
                    </pre>
                </div>
            </div>
        );
    }

在 2016年9月22日，上午3:22，hustcc [email protected] 写道：

高度百分之百，就是占满整个屏幕的高度？你的父div高度怎么设置的？

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub #15 (comment), or mute the thread https://github.com/notifications/unsubscribe-auth/ATPexZAG-3ClVUtJ5ncmmhCA-boKA_sMks5qslbggaJpZM4KDuGo.

from echarts-for-react.

这个我试过了，但是父div的高度是不够的。所以这个chart的高度只有那么一点点，你把父div加高之后，这个chart高度就可以展开了。

from echarts-for-react.