出现这个报错的时候，就是在文档没有完全加载之前就运行函数，操作可能失败。解决方法是讲函数在mounted中调用。

Initialize failed: invalid dom.——带你深入因操作dom不当带来的错误_絔离的博客-CSDN博客

入门案例

需要注意的是，使用上面的方法在调用 echarts.init 时需保证容器已经有宽度和高度了。如果不想图标容器不存在宽度和长度。

监听图标容器的大小并改变图表大小

我们希望当容器发生改变的时候，图表的大小也可以进行相应的改变。

      // 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById("main"));//监听页面的resize事件获得游览器的大小改变的事件。window.addEventListener("resize", function () {//调用echartsInstance.resize改变图表的大小myChart.resize();});

数据集

 数据集（dataset）是专门用管理数据的组件，从Echarts4支持数据集开始，推荐使用数据集来管理数据。这样处理，数据可以被多个组件复用，也方便进行“数据和其他配置”分离的配置风格。

在series.data中设置数据：

series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],

这个方法的优点是，适用对一些特殊的数据结构（比如“树”，“图”，超大数据）进行一定的数据类型定制。但是缺点是，需要用户先处理好数据，把数据分割设置到每个系列（和类目轴）中。

在数据集中设置数据

• 能够贴近数据可视化常见思维方式：（1）提供数据，（2）指定数据到视觉的映射，从而形成图表。
• 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
• 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
• 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。

案例

效果图

 或者

  dataset: {// 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，// 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。dimensions: ['product', '2015', '2016', '2017'],source: [{ product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },{ product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },{ product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },{ product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }]},