一，echarts 自适应 父子组件 二，解决There is a chart instance already initialized on the dom.

一、解决Vue在同一页面引入多个echarts组件无法自适应，resize失效的问题

window.onresize()方法只会对最后一个组件里的图表产生效果，是组件加载顺序导致的，所以将window.onresize监听放到父组件去执行

父组件

子组件

缺点：

按照以上方式其实已经可以实现图标自适应了，但有一个小bug，你打开控制台的时候会显示一个警告（There is a chart instance already initialized on the dom.）

有一个关于dom的图表实例已初始化。

我们在使用图表的时候，常用的使用场景就是数据展示。
我们自然希望，数据的改变会带来图表的重绘。
也就是说，指定的区域作为canvas容器，根据触发条件改动数据之后，依旧沿用之前的的图表配置，把图表重新生成。

就是以下图片：

 解决方法：

1、组件的data定义变量

2、把图表实例化的方法写在methods里

3、mounted里面调用方法

代码方面，父组件不变，子组件小小的改动了一下

父组件：

 子组件：

 

看子组件源码：

<template>
  <div class="panel">
    <div class="panel1" ref="box"></div>
    <div class="panel_footer"></div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
			chart:null,
		};
  },
  methods: {
    resetCharts() {
      if (
        this.chart != null &&
        this.chart != "" &&
        this.chart != undefined
      ) {
        this.chart.dispose(); //销毁
      }
		this.init()
    },
    init() {
      this.chart = this.$echarts.init(this.$refs.box);
      let option = {
				//图表配置
			};
      this.chart.setOption(option);
    },
  },
  components: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {
		this.init()
	},
};
</script>

以上方法我是在网上查阅的，后来我感觉创建和销毁有点太耗性能了，我就用了echarts官网自带的自适应方法，用了之后感觉挺好用的

上面的方法加了一个if判断，和销毁创建的方式实现的，echarts官网的方法我感觉好像也是创建销毁，但我感觉比上面的方法好用，代码更简洁。

这是以上的方法：

这是新的方法：

1、

 这个方法只有一行代码，很简洁，通俗易懂（resize就是echarts自带的自适应方法），就跟我刚开始的方法一样，就是刚开始的时候没有在data里面定义，现在又后知后觉的找到了最简便的解决方法

2、

我刚开始用的方法是onresize,用完这个方法后他只调用子组件的最后一个方法，后来朋友人我说用addEventListener这个方法就可以了

 

 这种方法需要在每一个子组件去使用，上面的父组件的方法也可以改成addEventListener