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

这里持续更新我在学习echarts的过程~
上篇不是说到怎么引入图表吗，然后我们应该开始学习最为重要的配置项和数据了是吧。
但是我呢，平时就有点死脑筋 。 哎！ 我就不喜欢用id盒子，我就喜欢用class盒子。

// 基于准备好的dom，初始化echarts实例
 var myChart = echarts.init(document.getElementById('main'));

我就把这一段代码一改，把getElementById改成了getElementsByClassName() ，当然前面我也把盒子的id="main"改成了class="main"。然后此时一位信心满满的靓仔在vs code下保存代码，点开浏览器运行一看，我滴乖乖我的图呢。当时这位靓仔还仔细检查了一下代码有没有出错，看了半天没看出来。
我：好 我明白了，这里只能用id盒子。
直到下午他去看了看别人的代码，我靠，怎么肥事。？？？他的怎么可以用class盒子啊。
看了看他写的，嗯基本都对的上，就是这句对不上
这是我写的

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

这是他写的

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

为啥啊，不都是获取class name 吗？没问题，只是写法不一样吧。。。
此刻的我心底多多少少有点虚了，肯定是我这代码有问题啊。然后、然后、我就想起来了。getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。所以啊，你用这个写，你压根就没有获取DOM元素，当然显示不出来了。
当然你要是非得用getElementsByClassName()来写，也不是不可以，但是不是这样写的

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

而是

var myChart = echarts.init(document.getElementsByClassName('main')[0]);
var myChart = echarts.init(document.getElementsByClassName('main')[0]);
var myChart = echarts.init(document.getElementsByClassName('main')[0]);
嗯重要的事情强调三遍，我不允许你下次犯我一样的错误。

好了我下班了下次再编......