search

hustcc / echarts-for-react

⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。
https://git.hust.cc/echarts-for-react
MIT License
4.56k stars 633 forks source link

浏览器窗口大小发生改变时，图表高度能否也跟着变化？ #19

Closed maoyr closed 8 years ago

maoyr commented 8 years ago

在窗口变化时，如果获取窗口变化后的宽度按比例计算出高度，把值用setState存入state中（div的height取state里的值），但是这样会调用DidUpdate，图表重新初始化生成，而不是通过echartObj.resize();，请问有什么解决方法可以让宽高都发生变化，并且看上去图表只是放大缩小，并不会重新生成？

hustcc commented 8 years ago

echarts 本身也并不会随着高度变化而自动变化高度吧。

maoyr commented 8 years ago

官网的实例http://echarts.baidu.com/demo.html#bar1 是可以的，但它应该不是在bootstrap里，是resize时获取容器的 clientWidth 和 clientHeight。但bootstrap的row本身没有高度，取百分比也不行（撑开的高度太小）。

hustcc commented 8 years ago 
<div>
    <ReactEcharts
        style={{height: '100%'}}
        option={this.getOption()}  />
</div>

理论上这样是可以的，因为已经做了自动大小适配的。一会我抽时间在 demo website 中加一个例子。

hustcc commented 8 years ago

这样可以实现吗？如果可以的话，希望能关闭 issue，如果能够 pr 一个 website demo 更好了。 ^_^

youngjuning commented 4 years ago

解决了吗

hustcc commented 4 years ago

解决了吗

本身就没有问题，只要你容器的高度变化，图表会自动适配的。

youngjuning commented 4 years ago

image.png 这个label过长的话，会被挡住，而不是撑大图表，这个该怎么处理呢 @hustcc