for循环绘制Echarts图表之后，点击添加图表向前插入图表遇到实例未更新

一、问题及预期

for循环绘制图表之后，点击添加图表，应该展示空表的初始状态，但是展示的是上一个图表正常有数据的图表

二、复盘

采用index 作为下标去渲染图表实例
导致点击【添加图表】按钮的时候向前添加的下标为0 ，和原来存在为0的下标实例重复，从而导致会展示【上一个图表正常有数据的图表】
不使用index作为图表实例渲染，采用随机数或者是时间戳去做绘制图表
新增的数据会初始展示空表【正确】
新增的数据点击查询正常出现图表【正确】

三、案例代码

为了确保点击“添加新图表”后，新图表展示为空白的初始状态，同时之前的图表展示正常有数据的状态，你需要在addNewChart方法中正确初始化新图表，并保证不影响已有图表的状态。以下是修改后的addNewChart方法，以及相关的初始化图表的逻辑：

修改addNewChart方法：确保添加新图表时，不会影响到已有图表的显示。

private addNewChart() {const timestamp = new Date().getTime(); // 使用时间戳生成唯一标识const obj = {formCustom: {groupField: '',calculateField: 'requestId',granularity: 60,},name: '',chartType: 1,isCollect: false,isInitChart: false,cardItemId: `${timestamp}`, // 为每个图表卡片分配一个唯一IDtableData: [], // 确保新图表的数据为空chartTableData: [], // 确保新图表的数据为空numberTotal: 0, // 对于数字类型的图表，初始化总数为0};this.chartCardList.unshift(obj); // 将新图表添加到数组的开头this.$nextTick(() => {this.initChartInstances(); // 初始化图表实例});
}

初始化图表实例：在添加新图表后，你需要重新初始化所有图表的实例，以确保新添加的图表能够正确显示。这里我们添加一个initChartInstances方法来处理这个逻辑。

private initChartInstances() {this.chartCardList.forEach((cardItem, index) => {if (cardItem.chartType !== 1 && cardItem.chartType !== 2) { // 假设只有类型3, 4, 5, 6需要初始化图表const chartRef = this.$refs[`chart_${cardItem.cardItemId || cardItem.formCustom.id}`];const chartDom = Array.isArray(chartRef) ? chartRef[0] : chartRef;if (chartDom) {this.initChart(chartDom, cardItem.cardItemId, cardItem.chartType, cardItem.chartTableData);}}});
}

调整initChartHandle方法：确保initChartHandle方法能够正确处理新添加的图表卡片。

private initChartHandle(cardItem: any, resRows: any, cardItemId: number) {// 你的原始逻辑...this.$nextTick(() => {this.initChartInstances(); // 确保在DOM更新后重新初始化图表实例});
}

通过上述修改，每次添加新图表时，都会重新初始化所有图表的实例，确保新添加的图表展示为空白的初始状态，而不会影响到已有图表的显示。请注意，这里的initChartInstances方法假设只有特定类型的图表需要初始化ECharts实例，你可能需要根据实际情况调整这部分逻辑。

四、实例案例

  <mtd-cardclass="card-box"v-for="(cardItem, index) in chartCardList":key="cardItem.cardItemId"><div:ref="`chart_${cardItem.cardItemId || cardItem.formCustom.id}`"class="chart-box"></div>
</mtd-card>

 private chartInstances: any = [];private addNewChart() {const timestamp = new Date().getTime(); // 使用时间戳生成唯一标识const obj = {formCustom: {groupField: '',calculateField: 'requestId',granularity: 60,},name: '',chartType: 1,isCollect: false,cardItemId: `${timestamp}`, // 为每个图表卡片分配一个唯一ID};this.chartCardList.unshift(obj);this.$nextTick(() => {this.initChartInstances(); // 初始化图表实例});}// 初始化图表实例private initChartInstances() {this.chartCardList.forEach((cardItem: any) => {if (cardItem.chartType !== 1 && cardItem.chartType !== 2) {// 类型3, 4, 5, 6需要初始化图表const chartRef =this.$refs[`chart_${cardItem.cardItemId || cardItem.formCustom.id}`];const chartDom = Array.isArray(chartRef) ? chartRef[0] : chartRef;if (chartDom) {this.initChart(chartDom,cardItem.cardItemId,cardItem.chartType,cardItem.chartTableData,);}}});}private initChartHandle(cardItem: any, resRows: any) {// 获取新添加的DOM元素并初始化图表this.$nextTick(() => {const chartRef =this.$refs[`chart_${cardItem.cardItemId || cardItem.formCustom.id}`];const chartDom = Array.isArray(chartRef)? (chartRef[0] as Element): null;if (chartDom) {this.initChart(chartDom,cardItem.cardItemId,cardItem.chartType,resRows,);}});}private initChart(dom: any,index: number,chartType: number,resRows: SearchPicTableType[],) {const myChart = echarts.init(dom);const option = switchChart(chartType, resRows);myChart.setOption(option, true);// 存储ECharts实例以便后续更新this.chartInstances[index] = myChart;}