VUE使用Echarts制作的图太窄，怎么处理

我在网上仿写了一段VUE使用Echarts制作图的代码，但生成的图太窄了与网上的效果不同。请帮助看看是什么原因啊？
我的代码如下：

draw.vue

<template>
  <div :id="echartsId" class="echarts"></div>
</template>

<script>
export default {
  name: "draw",
  /**父组件传值 */
  props:{
    idCode: {
      type: Number,
      required: true
    }
  },

  /**数据 */
  data(){
    return{
      xAxisData: [1,2,3,4,5,6,7,8,9,10,11,12],
      dataTest:[5,9,3,7,8,12,10,20,11,6,9,20],
    }
  },

  /**计算属性 */
  computed:{
    echartsId(){
      return 'echarts' + this.idCode
    }
  },

  /**挂在函数 */
  mounted(){
    this.drowLine()
  },

  methods: {
    /**绘制折线图 */
    drowLine() {
      let echarts = this.$echarts.init(document.getElementById(this.echartsId));
      let echartsid = document.getElementById(this.echartsId);
      echarts.setOption({
        backgroundColor: '#000',

        title: {
          text: 'vue项目中echarts的使用',
          textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: 'bold',
          },
          subtext: '用于测试的数据展示',
          subtextStyle: {
            color: '#ddd',
          },
        },
        legend: {
          bottom: '5%',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
          data: ['测试数据'],
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#ddd',
            },
          },
        },
        grid: {
          left: 20,
          right: 20,
          top: 80,
          bottom: 20,
          containLabel: true,
        },
        xAxis: {
          show: true,
          axisLabel: {
            interval: 1,
            rotate: -20,
            margin: 30,
            textStyle: {
              color: '#ddd',
              align: 'center'
            },
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#ddd',
            },
          },
          data: this.xAxisData,
        },
        yAxis: [
          {
            type: 'value',
            name: '(人/次)',
            nameTextStyle: {
              color: '#ddd',
            },
            axisLabel: {
              textStyle: {
                color: '#ddd',
              },
            },
            axisTick: {
              alignWithLabel: true,
              lineStyle: {
                color: '#ddd',

              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: 'line',
            name: '测试',
            stack: '人数',
            data: this.dataTest,
            label: {
              normal: {
                show: true,
                position: 'insideTop',
                offset: [0, 20],
                textStyle: {
                  color: '#000',
                },
              },
              emphasis: {
                textStyle: {
                  color: '#fff',
                },
              },
            },
          },
        ]
      });
    },
  }
}
</script>

<style scoped>
.echarts{
  width: 100%;
  height: 35vh;
  background-color: #fff;
  margin: 5px
}
</style>

index.vue

<template>
  <div>
        <div class="echartsStyle">
          <el-row>
            <el-col span="6" v-for="i in 12" :key="i">
              <draw
                :idCode='i'>
              </draw>
            </el-col>
          </el-row>
        </div>
  </div>
</template>

<script>
import draw from '@/views/claim/claim_data/draw'

export default {
  components:{
    draw
  },

}
</script>
<style>
  .body{
  width: 100%;
  height: 100vh;
  }
  .echartsStyle{
  background-color:#000;
  width: 100%;
  height: 500px;
  margin: 10px
  }
</style>

错误的效果：

正确的效果：

请大家帮我看看吧。

继续顶一下。