Echarts动态切换主题以及出现的There is a chart instance already initialized on the dom错误。

最新推荐文章于 2024-08-04 00:00:00 发布

zt_koko

最新推荐文章于 2024-08-04 00:00:00 发布

阅读量3.4k

点赞数

文章标签： Echarts HTML Echarts主题

本文链接：https://blog.csdn.net/qq_18620153/article/details/82621457

版权

今天在Echarts官网下载了几个主题js文件，import引入到HTML中，

myChart = echarts.init(document.getElementById('main'),'主题名字');myChart.setOption(option);

就可以完成刚开始进来Echarts的初始化了。

但是如果想要切换主题,再myChart = echarts.init(document.getElementById('main'),'另一个主题名字');就不可以了。

就会出现There is a chart instance already initialized on the dom错误，意思是echarts已经初始化一个dom了。必须要将echarts先清除，怎么做呢，一个函数搞定，myChart.dispose();再调用myChart = echarts.init(document.getElementById('main'),'另一个主题名字')就可以顺利切换主题了。(＾－＾)V。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zt_koko

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Echarts动态切换主题以及出现的There is a chart instance already initialized on the dom错误。

今天在Echarts官网下载了几个主题js文件，import引入到HTML中，myChart = echarts.init(document.getElementById('main'),'主题名字');myChart.setOption(option);就可以完成刚开始进来Echarts的初始化了。但是如果想要切换主题,再myChart = echarts.init(document...
复制链接

扫一扫

echarts 动态切换主题_JavaScript 图表库 ECharts

weixin_35683330的博客

01-19

530

ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts提供大量常用的数据可视化图表，底层基于ZRender(一个全新的轻量级canvas类库)，创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图...

【React ECharts】There is a chart instance already initialized on the dom

weixin_56461542的博客

05-30

748

解决React使用ECharts时报错：There is a chart instance already initialized on the dom. import React from "react" import * as echarts from "echarts" import styled from "components-styled" export default class BarChart extends React.Component { constructor(props) {

2 条评论您还未登录，请先登录后发表或查看评论

Echarts实训混搭图表之动态切换主题

2301_77751917的博客

04-15

384

【代码】Echarts实训混搭图表。

“There is a chart instance already initialized on the dom.”Echarts报的告警

澜岚伊人的博客

12-17

1971

摘要：开始用Echarts的时候，报了如下的错去解决：需要在使用echarts发现需要及时对新建的myChart实例进行销毁,否则会出现上述警告代码实现如下：主要是这句代码 if (oneTimeStatisticsEchart != null && oneTimeStatisticsEchart != "" && oneTimeStatist...

echarts警告提示:There is a chart instance already initialized on the dom.

最新发布

我从不打没有准备的仗！

08-04

424

echarts警告提示:There is a chart instance already initialized on the dom.

解决echarts警告提示:There is a chart instance already initialized on the dom.

qq_42396791的博客

06-28

7813

There is a chart instance already initialized on the dom.

There is a chart instance already initialized on the dom(可能导致浏览器崩溃)

AinUser的博客

11-05

754

这个主要是echarts重复加载的原因导致的解决方法步骤一：将var myChart;设置为全局变量步骤二：在方法开始判断mychart对象，进行销毁操作 if (myChart != null && myChart != "" && myChart != undefined) { ...

echarts中解决警告 There is a chart instance already initialized on the dom.

MISS_zhang_0110的博客

02-26

551

解决警告 There is a chart instance already initialized on the dom.主要代码完整代码主要代码 // 基于准备好的dom，初始化echarts实例 this.myChart = echarts.init(document.getElementById(this.elId)); watch: { xAxis: { handler(newValue, oldValue) { this.myChart.setOption({

解决echarts控制台警告：There is a chart instance already initialize on the dom

細水、長流√的专栏

09-10

4339

当我们把创建一个echarts图表的代码封装成一个方法，一旦多次调用这个方法创建图表的时候使用的dom节点都是同一个，每次都会init一个echarts实例，就会在控制台报如下警告:There is a chart instance already initialize on the dom（在dom上已经初始化了一个图表实例）。

vue项目 echarts中出现“There is a chart instance already initialized on the dom.”的警告

yuhan___的博客

12-13

1万+

在项目开发中创建echart图表时遇到“There is a chart instance already initialized on the dom.”的警告，意思即为dom上已经初始化了一个图表实例，并且如果你图表中定义了点击方法，多次覆盖之后，点击方法会触发多次。更新页面重复加载这个图表实例时就会出现这类警告。以下写法可以避免这类警告。 1、例如你的echart图表代码写在一个单独的echarts.js文件中，建议在export defalut之外定义varmyChart; 在方法最外..

vue3路由切换页面使用Echarts时出现There is a chart instance already initialized on the dom.

m0_71683629的博客

08-29

519

利用vue3的钩子函数(onUnmounted)对页面进行切换时销毁实例对象，使用echarts.getInstanceByDom(对应的dom结点)获取元素来判断是否初始化。若为空则进行初始化。销毁时也进行非空判断，获取元素中有内容则调用销毁方法。

Vue3 切换tabs页销毁了echarts 还是出现There is a chart instance already initialized on the dom.

11-10

问题原因：在Vue3切换tabs页时，由于没有及时销毁echarts实例，导致出现"There is a chart instance already initialized on the dom"的错误提示。解决思路：可以在Vue3的生命周期函数中使用echarts.dispose()方法...

vue手风琴切换时echarts报错There is a chart instance already initialized on the dom

02-02

当在Vue的手风琴组件中切换时，可能会出现echarts报错"There is a chart instance already initialized on the dom"。这个错误通常是由于echarts实例没有正确销毁导致的。在Vue中，当手风琴组件切换时，组件的DOM...

解决echarts报错 There is a chart instance already initialized on the dom.

Lucky铂爵

09-19

1277

echarts.init()在页面切换时没有及时进行销毁，实例重复创建导致的。

echarts出现“There is a chart instance already initialized on the dom.”警告的解决办法

qq_41920758的博客

04-27

3865

由于项目中二次封装了echarts折线图，并且父组件通过选择不同时间，像后端请求不同数据，显示在折线图上，频繁切换会出现“There is a chart instance already initialized on the dom.”的警告，在网络上找办法后，解决了这个问题。这个问题的出现在于，在一张表上渲染不同数据，其实dom已经存在了，但是我们在每次数据发生改变的时间都重新进行了一次渲染，导致出现警告。// 检测是否已经存在echarts实例，如果不存在，则不再去初始化。

使用echarts防止出现“There is a chart instance already initialized on the dom.”的警告

热门推荐

剑雪封喉

10-15

2万+

var myChart; function historyMapInit(query_date) { //防止出现“There is a chart instance already initialized on the dom.”的警告 //在使用echarts发现需要及时对新建的myChart实例进行销毁,否则会出现上述警告 console.log(myChart !

Echarts3 主题设置

灯塔的CSDN博客

07-26

2万+

前言现在此感谢百度Echarts团队提供的这款优秀的开源产品。Echarts是一款原生js写的图表类库，Echarts能为我们打造一款数据可视化平台提供了良好的图表支持。在如今的前端开发中，站点样式主题css 是要和样式组件的css样式分离的，这样我们就可以根据不同的需求改变我们的站点风格，如春节、中秋等节假日我们都要改变我们的站点风格。同理，百度Echarts团队也为我们提供了这样一套机制（类是B

echarts 动态切换主题_Bootstrap4如何动态切换主题

weixin_34452086的博客

01-01

320

bootstrap4有个网站叫做bootswatch(文末给出链接)，其中已经设计了一些很美的主题：要想使用也是很简单的，只需要下载其中的bootstrap.css或者bootstrap.min.css并覆盖到自己项目的对应文件就行了。如果你想动态切换的话，现在提供的思路是：用JavaScript写一个函数响应页面上一个按钮的点击，这个函数主要是获取页面导入css的链接 < link &gt...

Echarts 开发图表自定义主题，并实现动态切换

Nick.Peng's Blogs

02-24

4661

文章目录一、下载官方主题二、引入主题JS文件三、初始化主题 - 静态配置四、动态切换主题配置五、完整源代码好文章记得收藏+点赞+关注额！！！ ---- Nick.Peng 一、下载官方主题下载地址：官网 Echarts 主题下载，除了下面官方提供的主题外，还可以定制你自己的主题将下载的主题js文件，保存在项目同级theme文件夹下二、引入主题JS文件指定 Echarts 的...