Comments (8)
其实问题很简单,应该你设置为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.
Related Issues (20)
- Project status HOT 3
- Not support @typescript-eslint/parser 6.x
- 主题theme似乎不生效?
- react 5.1 增加了resize动画的功能,echarts-for-react v3.0.2 应该如何调用? HOT 1
- Typing does not support charts v5.4.3
- How to override the readonly style for position relative? HOT 2
- I can not append Data while Zooming
- Table Component
- 动态切换主题
- How to connect several charts on chart load? HOT 2
- How to update datasets on zoom event? HOT 2
- [bug] : Inconsistent Zoom Functionality with ECharts: Seeking Guidance on Mouse Scroll and Button Control Integration
- Tree branch once opened does not retract back on closing it HOT 1
- How to rewrite this example with echarts-for-react
- add type to EChartsOption
- Update Required type Opts ( and add support for SSR) HOT 2
- Unable to show date labels inside cells
- There is an error when I install it by pnpm. HOT 1
- feature request: can you add english language to the docs? its really helpfull
- 'HH:mm' 的时间无法被echarts-for-react识别但是可以被echarts识别
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from echarts-for-react.