【Echarts】Uncaught TypeError: Cannot read property 'getAttribute' of null

最新推荐文章于 2024-05-31 17:40:50 发布

xiaobaobao12343

最新推荐文章于 2024-05-31 17:40:50 发布

阅读量2.9w

点赞数 5

本文链接：https://blog.csdn.net/qq_27153595/article/details/82215527

版权

在用echarts制作一个地图时，html代码如下所示：

当在页面中运行时出现了如下错误，第一反应是自己引用的echarts.min.js文件有问题，后来直接去官网重新下载了一个，官网地址：http://www.echartsjs.com/gallery/vendors/echarts/echarts.min.js，但还是出现如下错误;
后来仔细分析了一下控制台错误提示，getAttribute为空，然后去看了下自己的HTML文件代码，发现js中在绘制地图的时候，获取了id为demo的div，但此时HTML中的body还没有执行，所以才会出现获取不到属性，然后尝试调整了代码，如下所示;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

   <script type="text/javascript" src="echarts.min.js"></script>

<script type="text/javascript" src="china.js"></script>

</head>

<body>
<div id='demo' style="height:400px; width:500px"></div>
<script>

option = {
backgroundColor:'RGBa(14,61,107,0)',
   geo:{
       map:'china',
       roam:false,
       itemStyle:{
           areaColor:'rgb(206,206,206)',
           borderColor:'rgba(248,251,253)',
           borderWidth:1,
           emphasis:{
               areaColor:'rgba(254,180,28,0.4)',
           }
       },
       label:{emphasis:{show:true}}
   }
};
chartOutChar = echarts.init(document.getElementById("demo"));
chartOutChar.setOption(option);
</script>

</body>
</html>
修改如上的HTML代码后，效果如下所示;

关注