echarts:Uncaught TypeError: Cannot read property 'getAttribute' of null_?????⃢?-?⃢的博客-程序员秘密

作者无意间遇到这样的错误，因为昨天还是好好的，今天就出现这个问题：Uncaught TypeError: Cannot read property ‘getAttribute’ of null

我对这个错误整了半小时，还是出现同样的错误。起初我以为是同事添加了什么js代码导致我的东西用不了了，心中不由得一顿ABCDEFG…！

先看错误代码片段

在这里插入图片描述
这是错误后的显示结果，肯定没有，空的
这是base_index.tpl 模板片段

<!doctype html>
<html lang="zh-cn">
	<head>
		<meta name="csrf-token" content="">
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="applicable-device" content="pc;mobile">
		<link rel="stylesheet" href="/statics/js/layui/css/layui.css" media="all">
		<script src="/statics/js/echarts.min.js"  type="text/javascript" charset="utf-8"></script>
		<script src="/statics/js/layui/layui.all.js" charset="utf-8"></script>
		<script src="/statics/js/jquery-3.3.1.js"  type="text/javascript" charset="utf-8"></script>
		<script src="/statics/js/jquery.cookie.js"  type="text/javascript" charset="utf-8"></script>
		<script src="/statics/js/home_index.js"  type="text/javascript" charset="utf-8"></script>
	</head>

下面是继承的html 主要的html 片段

		<ul class="Logo_management_Cbox_second ove_den echarts_ul">
			<li class="echarts_ul_li">
				 <div id="hyfb" class="echarts_ul_li_div"></div>
			</li>
			<li class="echarts_ul_li">
				 <div id="bsgl" class="echarts_ul_li_div"></div>
			</li>
		</ul>

这是home_index.js 这一块的代码片段，因为这一块我没用动

/	行业分布
function hydals() {
    
	$.get("http://localhost:81/industryclassification",'',function(data){
    
		// let jsonObj = $.parseJSON(data);
		hyfb(data.data);
	},'json');
}
hyfb([]);//默认空数组防止页面空旷
hydals();
function hyfb(hyfbs){
    
	// 基于准备好的dom，初始化echarts实例
	let x_title = '行业';
	let y_title = '数量';
	let hyfb_y_min = 0;
	let hyfb_y_max = 200;
	var myChart = echarts.init(document.getElementById('hyfb'));
	// 指定图表的配置项和数据
	var option  = {
    
		title : {
    
			text: '行业分布',
			x:'center',
			textStyle: {
    
				color: '#fafb79',
				fontSize: 20,
				fontWeight:'300',
			},
			top: '3%',
		},

处理了半小时，没有结果。我在svn 查看了这几个文件的更新，发现前端真的动过手脚，我就把关于这部分的代码进行了还原。

这是还原后的base_index.tpl 模板head 代码

<!doctype html>
<html lang="zh-cn">
	<head>
		<meta name="csrf-token" content="">
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<meta name="applicable-device" content="pc;mobile">
		<link rel="stylesheet" href="/statics/js/layui/css/layui.css" media="all">
		<script src="/statics/js/layui/layui.all.js" charset="utf-8"></script>
		<script src="/statics/js/jquery-3.3.1.js"  type="text/javascript" charset="utf-8"></script>
		<script src="/statics/js/jquery.cookie.js"  type="text/javascript" charset="utf-8"></script>
	</head>

好家伙，这俩文件不见了
home_index.js 、 echarts.min.js
好家伙这俩不见了
它们去哪了？
home_index.js 去了base_index.tpl 的下面，就平时srcipt引入部分
在这里插入图片描述
echarts.min.js 则跑去了index.tpl 模板里面
代码依然没变
运行。
可以了，一行代码没敲，就变了两行代码的位置

造成这种错误的原因是 echarts.js引用放在head中或者放在body中HTML代码的前面了，造成加载时阻塞后面的html。

解决方法很简单就是不要把echarts.js放在head中只要将其放在之前就可以了

原文链接: link

本文链接：https://blog.csdn.net/winsmiackeys/article/details/103526362

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

微信开发之获取素材列表并保存_batchget_material_tang05709的博客-程序员秘密

既然自己开发，就需要获取到数据，并给出编号；这个也很简单，根据api能很容易拿到数据，但是封面图片的地址我在写这个记录的时候还是没有拿到，不知道是我的方法不对，还是微信没有这个接口，因为发送图文信息需要一个图片地址链接；因为我要个文章编号，所以我需要一条一条获取，微信可以一次获取20条数据。1、获取token；2、获取文章数量3、获取文章列表；获取tokenht

webpack 打包工具使用案例_webpack打包案例_桃根仙的博客-程序员秘密

index.jsrequire('./index.css');document.write('webpack 打包教程');webpack.config.jsmodule.exports={ entry:'./index.js', output:{ path:__dirname, filename:'bundle.js' }, module:{ loaders:[{ t...

MQ回退消息 springboot_一个风轻云淡的博客-程序员秘密

如果发现该消息不可路由，那么消息会被直接丢弃，

Ubuntu16.04下caffe安装编译全过程（CPU）_pangyunsheng的博客-程序员秘密

caffe是深度学习最好用的框架之一，但caffe的安装编译过程相对较复杂，本人在安装编译时百度了好几个版本，都没有一次成功过，因此在此总结一下自己的编译过程，本文是在Ubuntu16.04下安装编译caffe，其他版本会略有不同。该教程本人亲测三遍，无特殊情况一般都可以编译成功。一、安装依赖包打开linux命令行，先执行下面指令：sudo apt-get update再依次执行以下语句，安装依赖...

python调用谷歌地图_使用Python调用谷歌地图并记录运动轨迹进行可视化_weixin_39620151的博客-程序员秘密

本篇博文主要介绍了如何使用python来调用谷歌地图，并对北京的一个轨迹数据集进行可视化展示。该数据集包含在3年内收集的182个用户的GPS轨迹。我在这个演示中使用了用户001的数据。博文会给出具体可执行代码，小伙伴只需按照文中所说进行操作，即可成功实现如下图所示的结果。后面就看大家需要怎么进一步利用了。由于谷歌地图的限制，只提供个人学习使用，因此会有如上水印。PS：从左下角的轨迹上来看，该用户...

vChart_weixin_33695450的博客-程序员秘密

vue+echarts工具： https://v-charts.js.org转载于:https://www.cnblogs.com/DennyZhao/p/10733033.html