一、问题及预期
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}
, // 为每个图表卡片分配一个唯一ID
tableData: [], // 确保新图表的数据为空
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-card
class="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;
}