echarts宽度随屏幕宽度改变自适应

1、大屏正常，小屏超出

宽：1920px

宽：1550px

2、解决：使用echarts的resize()API （官网地址：https://echarts.apache.org/zh/api.html#%2Fsearch%2Fresize）

<div class="contentLeft">
  <div id="echartBox" ref="echartBox"></div>
</div>

data() {
  return {
    myChart: null
  };
},
mounted() {
  this.$nextTick(() => {
  	// 获取元素
    this.myChart = echarts.init(document.getElementById("echartBox"));
    // 请求数据，初始化图表
    this.getBarData();
  })
  // 监听屏幕宽度变化：当浏览器发生resize事件的时候，触发echart的resize事件，重绘canvas
  window.addEventListener("resize", () => {
    this.changeWidth();
  })
},
methods: {
	changeWidth() {
      this.myChart.resize();
    },
}

3、注意：如果div是隐藏的，ECharts 可能会获取不到div的高宽导致初始化失败，这时候可以明确指定div的style.width和style.height，或者在div显示后手动调用 echartsInstance.resize 调整尺寸。

4、报错：Initialize failed: invalid dom. 这是因为元素未创建完成就渲染图表（在vue中有时使用了v-if或者v-show而未进行判断）

梦想因热情而明亮，未来因拼搏而精彩！