echarts为什么用getElementsByClassName()方法显示不了图表

最新推荐文章于 2023-03-07 23:10:18 发布
原创 最新推荐文章于 2023-03-07 23:10:18 发布 · 330 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端

本文介绍了如何使用ECharts初始化图表实例。通常使用`document.getElementById`获取DOM元素，但当需要通过类名选择元素时，则应使用`getElementsByClassName`并确保正确地选取目标元素。

一般情况下，初始化echarts实例，获取存放图表的div盒子时，使用的都是：

var myChart = echarts.init(document.getElementById('main'));

但如果想用getElementsByClassName()获取div盒子，就需要这样写：

var myChart = echarts.init(document.getElementsByClassName('main')[0]);

因为 getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象

echarts 图表 说明
LueDong的博客
11-21 281
visualMap：设置视觉映射，包括最小值、最大值、颜色映射等。dataZoom：设置数据缩放，包括最小值、最大值、缩放比例等。series：设置数据系列，包括数据类型、数据值、图形样式等。xAxis：设置X轴，包括数据类型、坐标轴范围、刻度线等。yAxis：设置Y轴，包括数据类型、坐标轴范围、刻度线等。tooltip：设置提示框，包括显示内容、触发类型等。legend：设置图例，包括图例的位置、排列方式等。grid：设置网格，包括左右上下的边距、背景色等。borderColor：设置图表的边框颜色。
echarts动态循环出多个相同图表但不同数据动态渲染图表
seeeeeeeeeee的博客
09-06 4487
效果图 代码 html部分 <!-- 图表 --> <div style="height: 60vh; margin-top: 70px" v-for="(item, index) in aaa" :key="index" > <div style="height: 100%; width: 100%" class="roseChart"></div> </div>
js中getElementsByClassName和getElementsByTagName无法获取元素
Jclam的博客
03-07 2122
js中getElementsByClassName和getElementsByTagName无法获取元素
vue中echarts动态刷新数据（x轴y轴和title）
qq_34672907的博客
05-30 1万+
最近需求做一个数据表，根据筛选条件不一样，渲染不同的内容。，主要如下图 如图，一开始什么都没有的时候默认显示title，当进行筛选的时候横轴和纵轴都显示相应的数据。问题就是，我按照其他百度问题说的做，直接赋值语句上this.chart.setOption(newVal); 然而并没有什么屁用。。。。。 因为需求是有数据时改变x轴和y轴数据，隐藏标题的渲染，百度到几乎都是差不多一样的解法之...
Echarts入门教程
weixin_54362381的博客
02-10 462
引语：echarts.js是百度团队推出的一款用于图表可视化的插件，用于以图表的形式展现数据，功能强大，上手简单 1、从 官方网站 中下载所需的echarts.js文件，该文件因功能广泛，包体较大，可自行决定按需打包下载。 2、从前端页面引入echarts.js，后即可使用 <script src="js/echarts.min.js"></script> 3、请看如下使用案例： 大致就是引入js 选一个图表容器（DIV） 初始化echarts对象并绑定到该容器上 给绑定的ech
echarts报错Uncaught (in promise) Error: Initialize failed: invalid dom.
zkx529的博客
05-11 3万+
问题描述 在使用echarts时报错Uncaught (in promise) Error: Initialize failed: invalid dom. 原因 这是由于echarts在初始化化时是需要获取dom的。 let myChart = this.$echarts.init(document.getElementById('main')); 例如在上面这个 myChart初始化时需要获取到 id="main" 的这个dom元素，所以在图表初始化的时候获取不到dom的时候就会出现这样的
在Vue 中实现循环渲染多个相同echarts图表
10-15
最后，为了确保图表在数据加载完成后正确显示，你可能需要在组件挂载后调用`drawRose`方法： ```javascript mounted() { this.drawRose(); } ``` 这样，你就可以在Vue组件中循环渲染多个相同的Echarts图表，并...
浅谈vue单页面中有多个echarts图表时的公用代码写法
10-15
在`watch`属性中可以监听需要更新图表的数据变化，然后调用echarts实例的`setOption`方法来更新图表。 当页面被销毁时，为了防止内存泄漏，需要清除echarts实例，并移除`resize`事件监听器。这可以通过在Vue的`...
关于vue 结合原生js 解决echarts resize问题
11-20
本问题中提到的解决方案是通过结合Vue和原生JavaScript来实现ECharts图表的自适应resize，以避免使用第三方插件如`element-resize-detector`带来的性能问题。 首先，我们需要理解ECharts图表的初始化和更新过程。在...
document.getElementBy("id")与$("#id")有什么区别
09-05
有朋友问document.getElementBy("id")与$("#id")的区别，其实第一个就是js中获取对象的方法， 第二个是通过自定义函数方便调用，而第三个是jquery中获取id对象的方法
ECharts使用折线图报错：this.dom.getContext is not a function
weixin_44195250的博客
11-10 1535
错误写法，因为页面只有一个echart的折线图 所以 写了如下代码 this.initEcharts(document.getElementByClassName('line-charts'),option); 修改后的代码如下 ： var a = document.getElementsByClassName('line-charts').length; for(let i=0;i<a;i++){ this.initEcharts(document.getElementByClassName('l
getElementbyclassName错误
docwangsir的博客
07-12 1891
朋友们 有一个js函数叫做 document.getElementsByClassName 不是document.getElementByClassName 这错我找半天 ，一直看着也没错啊，最后发现他妈的少个s,是元素们，不是元素 ...
这或许是最美的Vue+Element开源后台管理UI
MarkerHub的博客
10-17 963
作者：EuiAdmin原文：http://suo.im/5AkUrQ前言：EuiAdmin是基于Vue+Element等组件联合开发的一个免费的开源后台，你可以通过（euiadmin.c...
ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项
weixin_30781775的博客
07-25 2482
一、相关js文件的引入 这里我们采用标签式引入文件的方式，我们引入两个js文件，一个是esl.js文件和一个echarts.js。 <script src="js/esl.js" type="text/javascript"></script> <script src="js/echarts.js" type="text/javascript">&lt...
js通过getElementById或getElementsByClassName（）【】等方式获取元素为null或undefined
baidu_34197758的博客
04-08 8376
用getElementById取到的值居然是null，而getElementsByClassName获取到对象，但是用数组方式访问时却不识别，百思不得其解，后来琢磨着是不是这个页面是删除掉了，达到某个条件才加载出来的，导致了页面未渲染出来，js已经先执行了才导致了这个后果，然后用了setTimeout延迟了几秒后加载js，果然就可以了
玩转数据可视化，从入门到精通 Echarts
热门推荐
希望看完文章的你能够带着答案离开。
11-16 7万+
玩转数据可视化，从入门到精通 Echarts
elementUI表格中插入燃尽图，步骤条（假数据模拟）
CuiCui_web的博客
08-24 2547
首先看一下效果图，再做讲解 在el-table中插入某个标签，我们通常是采用插槽的方式进行插入，但是实现图片中的功能的时候，你会发现，步骤条插入就显示出来了，但是用echarts绘制的燃尽图却出不来。打开控制台，你会发现报错了。 现在我们来分析一下，报错的原因。因为我们用echart绘制图表的时候，第一行代码首先写的是 var myChart = echarts.init(docu...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值