echarts 自动铺满父级div容器的宽高

初次在使用vue+echarts柱状图的时候，发现了没有铺满父级div的问题，特此记录。

使用步骤：

1. 设置一个div用作渲染柱状图。并设置这个容器的宽高（其实我这个div还有上级，但是于本次问题无关，不做记录）

2. 使用echarts的方法渲染柱状图。这个方法放到vue的【methods】生命周期中，在【mounted】中调用该方法渲染

initChart2(){
      let chart = this.$echarts.init(document.getElementById('chart-2'))
      chart.setOption({
        xAxis: {  
          splitLine:{
            show:false
          }
        },
        yAxis: {
          splitLine:{
            show:false
          },
          type: 'category',
          data: ['绿色', '黄色', '橙色', '红色']
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                value: 40,
                itemStyle: {
                  color: '#33CC00'
                }
              },
              {
                value: 30,
                itemStyle: {
                  color: '#FFFF00'
                }
              },
              {
                value: 20,
                itemStyle: {
                  color: '#FF6600'
                }
              },
              {
                value: 10,
                itemStyle: {
                  color: '#a90000'
                }
              },
            ],
          }
        ]
      });
    }

初步实现效果：

 问题一：首先这个实现效果对我来说是不满意的，因为它没有铺满我外层div设置的宽高

解决办法：经过查阅文档，echarts中有一个属性，可以设置柱状图距离容器上下左右的距离

       /** 配置图标离容器上下左右的距离 */
        grid: {
             top: "15%", 
             right: "15%",
             left:"12%",
             bottom: "15%",
        },

实现效果：目前我这里调成这样，已经是我需要的效果了。你可以根据自己需求，自行调整

 问题二：第一个问题解决之后，我尝试缩放屏幕，看看自适应宽高的效果，发现这个柱状图设置完之后，在缩放屏幕的时候，它不会改变（也就是不会跟着容器宽高的改变而改变）

 解决办法：监听浏览器窗口的变化，如果浏览器发生变化了，调用echarts的resize()方法，重新设置柱状图的大小

window.addEventListener('resize',function(){
   chart.resize()
})

到此实现了我想要的效果，柱状图自动铺满指定的宽高。而且在屏幕缩放的时候，可以自动调整宽高，达到自适应的效果。这里就不截图展示了。

最终给出来调整后的，echarts渲染柱状图的完整代码，方便大家理解。

initChart2(){
      let chart = this.$echarts.init(document.getElementById('chart-2'))
      // 绘制图表
      chart.setOption({
        xAxis: {  
          splitLine:{
            show:false
          }
        },
        yAxis: {
          splitLine:{
            show:false
          },
          type: 'category',
          data: ['绿色', '黄色', '橙色', '红色']
        },
        /** 配置图标离容器上下左右的距离 */
        grid: {
            top: "15%", 
            right: "15%",
            left:"12%",
            bottom: "15%",
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                value: 40,
                itemStyle: {
                  color: '#33CC00'
                }
              },
              {
                value: 30,
                itemStyle: {
                  color: '#FFFF00'
                }
              },
              {
                value: 20,
                itemStyle: {
                  color: '#FF6600'
                }
              },
              {
                value: 10,
                itemStyle: {
                  color: '#a90000'
                }
              },
            ],
          }
        ]
      });
      window.addEventListener('resize',function(){
          chart.resize()
      })
    }