解决重复使用eChart时，遇到eChart不显示的问题

        最近在试着写前端代码，由于没有angular经验，导致在写的过程中给自己挖了不少坑。特此记录一下，以备后用。

        现有一个页面，2个tab。tab1显示主机当前的cpu，内存等的使用情况；tab2显示主机的历史cpu，内存等的使用情况。

        tab1的伪代码如下：

<div>
  <ul>
	<li>
        <tab1>current</tab1>
    </li>
	<li>
        <tab2>history</tab2>
    </li>
  </ul>
</div>

tab1: 

<div>
  <my-chart [key]="'cpu'" [data]="data['cpu']"></my-chart>
  <my-chart [key]="'mem'" [data]="data['mem']"></my-chart>
  <my-chart [key]="'disk'" [data]="data['disk']"></my-chart>
</div>

tab2:

<div>
  <my-chart [key]="'cpu'" [data]="history['cpu']"></my-chart>
  <my-chart [key]="'mem'" [data]="history['mem']"></my-chart>
  <my-chart [key]="'disk'" [data]="history['disk']"></my-chart>
</div>

my-chart的html源码：

<div id="{{'chart_' + key}}"></div>

 my-chart的ts源码：

ngOnInit() {
	const chartElement = document.getElementById('chart_' + this.key);
	if (chartElement) {
	  this.charts = echarts.init(chartElement);
	  setTimeout(() => {
		setData(); // 添加数据
	  }, 100);
	} else {
	  console.error('element not found with ID:', 'chart_' + this.key);
	}
}  

大致代码如上，当在tab1和tab2之间来回切换时会发现，总是有chart不会显示的问题。

        一番折腾才发现，原来是传入key的时候重复，导致上述问题发生。也就是这一句：

<my-chart [key]="'xxx'" [data]="history['xxx']"></my-chart>

当两个tab中同时存在key为xxx的组件时，就会导致另一个界面的该组件无法显示。

问题找到了，那改起来也很简单，我这里提供两种方法：

        1. 两个tab页使用不同的key，比如tab1设置为：tab1_xxx，tab2设置为：tab2_xxx。这样就可以避免key值重复了。

        2. 可以保持key值相同，每次切换tab时，将之前的元素删掉，代码如下：

ngOnDestroy() {
	if (this.charts) {
	  this.charts.dispose();
	  this.charts = null;
	  
	  const chartElement = document.getElementById('chart_' + this.key);
	  if (chartElement) {
		console.error('chart element exist:', chartElement);
		chartElement.remove(); // 手动移除 DOM 元素
		console.log('chart element removed ');
	  }
	}
}

对比起来，第一种简单，第二种改动较大。