[angular]JS太快导致的BUG

起因：

最近在做一个前端的页面，需求是点击完按钮：图表，在页面中间弹出一个折线图来展示数据的变化。

开动：

拿到需求之后开始动手，

1. ①div做盒子，里边中间放要展示的折线图的容器②div

2. 在盒子①div上加if条件来控制元素是否显示

3. 写ts来实现往容器②div里放echarts画布

4. 测试

上代码：

<div class="antd-box">
  <div class="button-box">
    <button nz-button nzType="primary" (click)="openChart()"><span nz-icon nzType="search"></span>图表</button>
  </div>
  <div class="antd-body" *ngIf="chartShow">
    <div class="chart-box">
      <div class="chart-body">
        <div class="chart-body-close"><span nz-icon nzType="close" nzTheme="outline" (click)="closeChart()"></span></div>
        <div class="chart-body-echarts" id="line-bar-body"></div>
      </div>
    </div>
  </div>

</div>

import { Component } from '@angular/core';
import * as echarts from 'echarts';

@Component({
  selector: 'app-antds',
  templateUrl: './antds.component.html',
  styleUrls: ['./antds.component.less']
})
export class AntdsComponent {
  chartShow: boolean = false;

  openChart() {
    this.chartShow = true;
    this.initLineChart('line-bar-body');
  }

  closeChart() {
    this.chartShow = false;
  }

  initLineChart(idName: any) {
    var chartDom = document.getElementById(idName);
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['销量']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        data: ['2021', '2022', '2023', '2024']
      },
      yAxis: {
        type: 'value'
      },
      series: [2457, 3323, 2312, 4231]
    };
    myChart.clear();
    myChart.setOption(option);
    window.addEventListener('resize', function (ev) {
      myChart.resize();
    });
  }
}

点击完图表按钮后画面：

echarts画布没显示？

检查后发现控制台报错：

公司框架的报错信息：

我自己起的官方框架的报错信息：

说明：看公司框架的以为是echarts引用的不对（因为只能用引入JS文件的方式来使用三方库）所以按照直觉排查了半天，发现不对。
点击报错位置导航到了：echarts.init(chartDom)这里，不debug的情况下我的直觉感觉是echarts引入的有问题，但是检查后发现不是，然后又debug调试看：

发现是没获取到dom！

突然想到会不会是JS运行速度大于页面渲染速度了：在JS跑到获取容器那一步的时候页面还没有把容器显示出来，然后才报错的？

然后设置延迟执行initLineChart方法，延迟100毫秒，发现问题解决了！获取到dom了

画面：

总结：

遇到bug后就赶紧debug。