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

一、问题及预期

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

二、复盘

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

三、案例代码

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

  1. 修改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(); // 初始化图表实例
    });
    }

  2. 初始化图表实例:在添加新图表后,你需要重新初始化所有图表的实例,以确保新添加的图表能够正确显示。这里我们添加一个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);
    }
    }
    });
    }

  3. 调整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;
  }
相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui7 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui