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

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条回答 默认 最新

  • 你好!机器人 2022-03-14 16:27
    关注

    在使用Echarts插件的方法外面定义一个全局变量(注意:一定得是全局变量),然后在插件使用的方法内,添加判断,调用eChart.dispose()方法先将图表销毁,然后再初始化

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 c++多文件编译报错:undefined reference to
  • ¥20 为什么zynq CAN IP 无法进入config配置模式,XCan_SelfTest函数失效?
  • ¥15 Pycharm中程序直接运行可以但进入调试报错
  • ¥15 MATLAB动图问题
  • ¥15 有段代码不知道怎么理解,const isToken = (config.headers || {}).isToken === false
  • ¥15 我的显卡支持CUDA最高版本是12.3,这个版本也支持VS 2022 17.0这种情况下如果我想下载CUDA11.8,需要下载旧版本的VS2022吗
  • ¥15 pointnet2包安装
  • ¥20 射频功率问题,解答者有酬谢!
  • ¥80 构建降雨和积水的预测模型
  • ¥15 #Qt Transform setTransform()在鼠标拖动移动视角是一致在原地不动,无法变换视角(细微观察似乎视图有在原地抖动),无法变换视角(细微观察似乎视图有在原地抖动)