echarts图表宽度设置100%，结果echarts宽度只有100px，解决图表自适应宽度问题

问题

我的echarts在tab选项卡中显示，为了自适应，用来渲染图表的div的宽度为100%，但是charts渲染出来以后默认设置为了100px。

原因

图表的父容器  li  是隐藏的，我默认设置 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px

 

 

解决方法有两种（一种是切换tab以后，li显示以后再初始化图表，二是给li中渲染图表的div提前设置好width 宽度）

1. 第一种可以把图表的实例化写到tab的点击事件中  li 显示之后。
2. 第二种可以给  li   中的 渲染图表的div 提前设置好宽度。因为  li  的宽度100%；h-chart的宽度 赋值为 li的父元素的宽度就好了