echarts图表宽度设置100%,结果echarts宽度只有100px,解决图表自适应宽度问题
问题我的echarts在tab选项卡中显示,为了自适应,用来渲染图表的div的宽度为100%,但是charts渲染出来以后默认设置为了100px。原因图表的父容器 li 是隐藏的,我默认设置 display:none,图表在执行js初始化的时候找不到这个元素,所以自动将“100%”转成了“100”,最后计算出来的图表就成了100px解决方法有两种(一种是切换tab以后,li显示以后再初始化图表,二
·
问题
我的echarts在tab选项卡中显示,为了自适应,用来渲染图表的div的宽度为100%,但是charts渲染出来以后默认设置为了100px。
![](https://img-blog.csdnimg.cn/20210811113203304.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5naHVhbmh1YW4x,size_16,color_FFFFFF,t_70)
原因
图表的父容器 li 是隐藏的,我默认设置 display:none,图表在执行js初始化的时候找不到这个元素,所以自动将“100%”转成了“100”,最后计算出来的图表就成了100px
解决方法有两种(一种是切换tab以后,li显示以后再初始化图表,二是给li中渲染图表的div提前设置好width 宽度)
- 第一种可以把图表的实例化写到tab的点击事件中 li 显示之后。
- 第二种可以给 li 中的 渲染图表的div 提前设置好宽度。因为 li 的宽度100%;h-chart的宽度 赋值为 li的父元素的宽度就好了
更多推荐
所有评论(0)