returnture 2022-03-14 16:20 采纳率: 66.7%
浏览 96
已结题

element 的tabs 中使用 ECharts

问题遇到的现象和发生背景 : 使用element 的tabs 每一项是不同的 表格
问题相关代码,请勿粘贴截图 <el-tabs v-model="activeName" @tab-click="clickECharts">
        <el-tab-pane label="订单统计" name="first" :lazy="true">
         
            <div id="mychart1" ref="mychart1"></div>
         
        </el-tab-pane>
        <el-tab-pane label=" 素材数据" name="second" :lazy="true">
          <div id="mychart2"></div>
        </el-tab-pane>
        <el-tab-pane label="合成数据" name="third" :lazy="true">
          <div id="mychart3"></div>
        </el-tab-pane>
      </el-tabs>

    if (tab.name == "second") {
      this.$nextTick(() => {
         console.log(document.getElementById("mychart2"));
        this.initEcharts(echarts.init(document.getElementById("mychart2")), ["1111111111", "2", "3", "4", "5",
          "6", "7"
        ]);
      });
    } else if (tab.name == "third") {
      this.$nextTick(() => {
         console.log(document.getElementById("mychart3"));
        this.initEcharts(echarts.init(document.getElementById("mychart3")), ["122222222222222", "2", "3", "4",
          "5", "6", "7"
        ]);
      });
    } else if (tab.name == "first") {
      this.$nextTick(() => {
         console.log(document.getElementById("mychart1"));
        this.initEcharts(echarts.init(document.getElementById("mychart1")), ["13333333333333333", "2", "3", "4",
          "5", "6", "7"
        ]);
      });
    }
运行结果及报错内容

There is a chart instance already initialized on the dom.

我的解答思路和尝试过的方法

想到了tabs 切换的时候重新渲染了页面。 所以猜想这因为这个问题。

我想要达到的结果
  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 9月14日
      • 已采纳回答 9月6日
      • 创建了问题 3月14日

      悬赏问题

      • ¥15 Java的问题解答一下呗
      • ¥20 怎么将vs中的程序同步到sql中的表中
      • ¥15 用flask框架接收前端上传的文本文件后怎么读取该文件
      • ¥15 有没有嵌入式ubuntu的朋友
      • ¥50 diddler Burp Suite
      • ¥20 关于UE5.1的问题,求专家解答!
      • ¥30 关于#爬虫#的问题:百度为您找到相关结果约100,000,000个 但只展现70页 有没有可能提取出来全部的搜索结果
      • ¥40 IIS部署API,弄了几天没弄出来,希望带佬远程帮我弄一下,有偿
      • ¥15 关于#c##的问题:winform中利用delegate更新ui的顺序错误
      • ¥15 qt5.6.1读取oracle8中文数据乱码