echarts初始化的getElementById与div 标签id的混淆造成的错误问题

已于 2022-09-30 22:45:10 修改
阅读量799 收藏
点赞数
文章标签： echarts 前端 javascript
于 2022-09-30 22:33:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52371317/article/details/127129866
版权

调入echarts.js后，因为该echarts的初始化使用的是getElementById ，因此在放置echarts的容器

的id即为echarts 中

 

 get的id名如此处的'pie',当然在div中id可以为单纯的用于echarts找到该容器并渲染，也可以同时为css id属性用法和寻找到该div渲染。

let mycharts = echarts.init(document.getElementById('pie'))

 

注意： getElementById('pie') 处的id名就是放置容器的哪个id名。

Icy可乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 为label标签和div标签赋值的方法
12-12
在html中，label是没有value属性的， 他与div以及其他大部分html元素一样，有innerText和innerHTML属性 不能document.getElementByID(“test”).value=”chenhuang”; 应该是下面的 代码如下:<labelid></label>document.getElementById(test).innerText=””;<divid></label>document.getElementById(‘test’)[removed]=””;
vue项目中使用echarts
邹毅的专栏
10-24 170
该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 1 或者使用国内的淘宝镜像： 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 1 使用 cnpm install echarts -S 1 创建图表 全局引入 main.js // 引入echarts ...
echarts实现数据可视化
yiyi_11的博客
05-10 470
1.在全局安装echarts ： cnpm install echarts -S 2.全局引用： import echarts from 'echarts' Vue.prototype.$echarts = echarts; 3.使用$echarts.init <div style='width:800px;height=800px' red="chart"></div> let myChart = this.$echarts.init(this.$refs.chart);
Echarts基本使用
m0_49494051的博客
09-23 85
需要axios,echarts <template> <div class='home'> <div id='myChart' :style="{width: '100%', height: '600px'}"></div> </div> </template> <script> export default { name: 'Home', components: {}, data () {
vue 中 echarts 的简单使用
反本能
11-13 406
首先安装 echarts 依赖 npm install echarts -S 全局引入  main.js // 引入echarts import echarts from 'echarts' 然后更改原型链，这样就可以在全局使用通过this.$echarts来全局使用了 created: function()
uniapp使用echarts图表问题及解决
weixin_55532289的博客
02-07 7446
根据项目功能需要在app上显示一些统计类的图表，因此我使用了echarts插件，后来在使用的过程中遇到了一些问题，特此记录下来： 问题一：在同一页面使用多个echarts图表 开发环境： 基于uniapp框架 vue语法时使用echarts插件 实现：在单页面中需要嵌套一组script标签，通过rander.js文件渲染。如下： // view部分 <view class="customer"><view ref="chart" @click="echarts.onClick" :prop
echarts的使用步骤
m0_57005111的博客
09-21 413
vue使用echarts
ECharts用法及常用配置项详解（Vue环境）
热门推荐
商务合作 | 共同学习 | 携手共进
12-20 9万+
通过一个echarts图表案例的展示来介绍echarts的使用方法及配置项。
echarts学习笔记
a432qbc的博客
06-03 574
var myChart = echarts.init(document.getElementById('main')); // 显示标题，图例和空的坐标轴 myChart.setOption({ title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {},
echarts图使用经验
sail0的博客
11-05 302
echarts图使用 注意点 在vue项目中，一般使用echarts时，由于数据更新或视图切换原因，所以会将echarts的注册（init）放在nextTick里面 this.$nextTick(() => { // 基于准备好的dom，初始化echarts实例 var myChart = this.$echarts.init(document.getElementById('idName')); myChart.setOption(option);
IE中checkbox在刷新后初始化的问题
12-11
初一看这个功能很简单，一个checkbox，加一段脚本，把这个checkbox的checked属性设为false。 代码如下: <input type=”checkbox” id=”chk_UnInital” name=”chk_UnInital” /> [removed]document.getElementById(“chk_UnInital”).checked=false;[removed] 这段代码在firefox等其它浏览器中都能实现这个需求，维独在IE中死活不行，每次把勾勾上，无论是刷新还是后退，这个勾都是勾上的。 难道是在IE下这段代码没工作？ 验证一下，在这段脚本前后各加一个
document.getElementById介绍
12-08
把你的大脑当做浏览器执行下面的代码两次，分别是IE6和IE9： 代码如下: function testFunc(){ alert(‘test’) } $(function(){ var g = document.getElementById , w = window.testFunc ; //g alert(typeof(g)); alert(String(g)); alert(g instanceof Object); alert(g instanceof Function); //w alert(typeof(w)); alert(String(w)); alert(w instance
document.getElementById方法在Firefox与IE中的区别
09-05
相信很多朋友在写JavaScript的时候，对浏览器的兼容问题会感到很头疼。这不，烦什么，什么就来了，特记录下来，与大家分享。
Javascript获取标签ID改变style属性的代码
10-27
下面的这段代码中，我们通过select元素的name属性来设置具体要访问style的哪个属性（本例中为背景色），这样，这个函数就可以用来设置不同的CSS属性了
Vue Echarts实现可视化世界地图代码实例
11-28
Echarts实现可视化世界地图模拟迁徙，以我自己开发过程。 下载Echarts依赖： npm install echarts 成功以后引入依赖： import echarts from 'echarts' peopleInsertCharts为生成echarts容器。 let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高，否则echarts生成初始化页面不会显示。需要自适应的可以js获取宽高给定容器。  直接贴代码 // 绘制图表 myChart.setOption({
Echarts 问题解决 —— div+css 自定义图例 关联 echarts图表
Lyrelion的博客
01-09 2456
目录 场景再现 问题解决 示例演示 场景再现 设计稿如下图： 几个难点： 图例：经过官网查询，不能给每个图例单独设置如图所示的底边，只能定义图例整体最外层的边框 外面的圆环 环状之间的间隙 问题解决 上述图例并非通过 echarts图表 进行设置，而是编写了 html、css 进行了设置，并将其关联 echarts图表 外面的圆环，是给 echarts图表容器，添加背景实现 环状之间的间隙，是通过设置每个扇形之间的边框宽度及颜色，将之设置为背景色，模拟间隙 示例演示 html/.
ECharts样式崩了？我这里有解决方案！！！
weixin_45679977的博客
12-24 1132
一种正常的EChart写法 官网的实例（嘿嘿） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="e...
ECharts快速上手 入门教学
m0_67227657的博客
04-02 7035
ECharts官网网址：Apache ECharts ECharts 是一个制作图表的javascript库 首先引入echarts
Echarts插件中的data绑定一个变量，后面通过访问后端接口获取数据给这个变量，Echarts插件无法渲染数据
阿伟的博客
11-03 2453
我们都知道echarts图标数据是写在option = {}对象里，但是数据不可能是固定值，而是通过后端接口返回来的，本以为只需要在 data里设置一个变量去接收返回的数据，然后再将变量赋值给echarts就可以了，结果踩坑了！发现这样并不能生效。 原先js代码 var timeData = []; var sumCallDuration = []; function initEchart(){ // 基于准备好的dom，初始化echarts实例
echarts初始化地图大小
最新发布
01-25
根据提供的引用内容，以下是关于echarts初始化地图大小的介绍： 在使用echarts初始化地图时，可以通过设置容器的大小来控制地图的大小。一种常见的方法是使用CSS样式来设置容器的宽度和高度。例如，可以为容器添加一个固定的宽度和高度，或者使用百分比来自适应不同的窗口大小。 另外，echarts还提供了自适应功能，可以让地图随着窗口的变化而自动调整大小。可以通过设置`resize`事件来实现自适应功能。当窗口大小发生变化时，echarts会自动重新计算地图的大小并进行相应的调整。 以下是一个示例代码，演示了如何初始化echarts地图的大小和实现自适应功能： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Map</title> <style> #mapContainer { width: 100%; height: 400px; } </style> </head> <body> <div id="mapContainer"></div> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> <script> // 初始化地图容器 var mapContainer = document.getElementById('mapContainer'); var myChart = echarts.init(mapContainer); // 设置地图的配置项和数据 var option = { // 地图的配置项 // ... // 地图的数据 // ... }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); // 监听窗口大小变化事件，实现自适应功能 window.addEventListener('resize', function() { myChart.resize(); }); </script> </body> </html> ``` 通过上述代码，可以初始化一个echarts地图，并设置地图容器的大小为100%宽度和400px高度。同时，通过监听窗口大小变化事件，实现了地图的自适应功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值