1、问题

我的echarts在卡片里面，为了自适应，我设置.stat图表div的宽度为100%，但是默认设置为了100px。

<nz-card [ngStyle]="{display:statShow}" class="statInfo" [nzExtra]="statTemplate">
        <div #statInfo class="stat"></div>
</nz-card>

2、原因

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

3、解决方法

首先，我们要获取到echarts图表标签元素，设置初始宽度。我使用的是 window.innerWidth - 200 + “px”;
可以根据自己的需求，设置相应的宽度。
window.addEventListener 主要是为了实现宽度自适应，会根据浏览器窗口的变化，来自动改变图表宽度。示例代码如下：

    const statInfo = this.statInfos.nativeElement; // 获取图表元素
    statInfo.style.width = window.innerWidth - 200 + "px";  //初始化echarts图表宽度
    const myChart = echarts.init(statInfo);
      // 设置宽度自适应
      window.addEventListener('resize', () => { 
        statInfo.style.width = window.innerWidth - 200 + "px";
        myChart.resize();
       });

这样就能实现echarts图表的自适应了。如果对你有帮助，请点赞。