关于echarts图表宽度不能占满整个100%宽度以及不能自由伸缩的的解决办法（vue2，vue3应该换汤不药）

效果：

问题类型：

有时候制作图表会出现一种很诡异的现象图表明明设置的宽度占满但是死活占不满，而且有时候还偏小。相信到这就已经明白是什么问题了，不做演示了。

解决办法：

第一步：设置div容器的宽度为100%

      <div ref="chart" style="width: 100%;height:400px;"></div>

网上有些教程说echarts的容器宽度单位必须为像素，对此我也不太了解，但是我这么写可以实现宽度占满。

第二步：定义创建图表的函数

createEcharts() {
      // 1 、基于准备好的容器初始化echarts实例对象
      let eChartsType = this.$echarts.init(this.$refs.chart)
      // 2 、指定图表的配置项和数据
      let option = {
        grid: {
          // 调整距离
          left: '5%', // 左
          right: '5%', // 右
          bottom: '3%', // 下
          top: '4%', // 上
        },
        // 标题设置
        title: {
          text: 'xxx', // 标题内容
          left: 'center'
        },
        // X轴
        xAxis: {
          type: 'category', // 类型 
          name: '公司名称', // X轴名称
          data: x 
        },
        // Y轴信息设置
        yAxis: {
          type: 'value', // 类型
          name: '效率值',// Y轴名称
        },
        // 图例组件
        legend: {
          data:['xxx']
        },
        series: {
          // 以下类同
          name: 'xxx', // 名称
          data: s,// 数据
          type: 'line', // 类型
        }
      }
      eChartsType.setOption(option);
    },

第三步：在需要调用创建图表函数的时候，按照下面这个调用

this.$nextTick(() => {
    this.createEcharts();
}

vue内的nextTick函数的定义如下：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

固不难猜测不加这代码，执行创建图表函数的时候chart（DOM）可能还未完成更新，固图表宽度比较诡异（猜测哈不是很确定）。

第四步：让echarts图表可以根据DOM更自由的变化（可以根据浏览器宽度自由变化）

完成第三步及以前，只能让图表可以占满浏览器宽度，但是不能随着浏览器宽度改变而改变。

// 以下代码在执行这段代码之后 eChartsType.setOption(option);
window.addEventListener('resize',function(){
  eChartsType.resize();
})