search

xieziyu / ngx-echarts

An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
https://xieziyu.github.io/ngx-echarts/
MIT License
1.1k stars 195 forks source link

ngx-echarts高度问题 #76

Open jecyhw opened 6 years ago

jecyhw commented 6 years ago

<div echarts [initOpts]="initOpts" ></div> initOpts = { height: '300px' }; 效果 image

image 文档里面https://xieziyu.github.io/ngx-echarts/#/usage/init-opts却是正常的。

xieziyu commented 6 years ago

@jecyhw 如果在initOpts中指定高度的话，就不要写div了，会给默认高度400px：

- <div echarts [initOpts]="initOpts" ></div>
+ <echarts [initOpts]="initOpts" ></echarts >
jecyhw commented 6 years ago

<echarts [initOpts]="initOpts" ></echarts > 这样写宽度怎么设置100%？ initOpts = { height: '300px' , width: '100%'};这样写不起作用

xieziyu commented 6 years ago

这种情况下即使 width: 'auto' 可能也会有问题。

那我建议还是使用div，但是高度设置不放在initOpts里，而是利用样式去指定高度 [ngStyle]="styleObject" styleObject = { height: '300px' };

jecyhw commented 6 years ago

谢谢，可以了

jecyhw commented 6 years ago

[ngStyle]="styleObject" styleObject = { height: '300px' }; 这种用法在firefox下起作用，在chrome还是400. chrome效果 image firefox效果 image

xieziyu commented 6 years ago

你的300px是一个可变的高度么？如果不是，那么可以直接把容器定高，比如css样式里面定义

jecyhw commented 6 years ago

你说的方法之前试过 <div echarts [ngStyle]="initOpts"></div> styleObject = { height: '300px' } 或者 <div echarts style="height: 300px;"></div> 在chrome里面不起作用，调试后发现这段代码在chrome里获取不到prop，所以最后都会被设置成400px。 image image

xieziyu commented 6 years ago

@jecyhw 尽管我无法复现你说的问题，但是我在新版本v2.1.0中增加了dom.style的校验，以避免默认高度的覆盖，不知是否能解决你的问题？

sjcobb commented 5 years ago

I am having this problem as well, I am trying to set a variable height based on an aspect ratio calculation so I have no need for the 400px default height set as an inline style. When I remove the div as suggested above, width is set to 0.

jecyhw commented 5 years ago

@sjcobb my problem had solved in v2.1.0, you can copy you code.