vue-echarts图形不居中问题

这个问题，自己遇到了两次，第一次没记录，然后第二次，又找了会才发现问题，所以做下记录，闲话不多说，直接说技巧，使用vue-echarts开发，很多人都会写这样的代码

<v-chart :autoresize="true" :options="group_option1"></v-chart>

目的是为了让echarts根据屏幕变化而自动调整，正常情况下，还需要设置

.echarts{
  width:100%;
  height:100%；
}

这样的代码是没问题的，但是如果在echarts上层，用了flex去布局，如下。

    <el-row class="group realTime">
      <article class="title bottom-border">echarts布局</article>
      <main>
        <div>
          <v-chart :autoresize="true" :options="group_option1"></v-chart>
        </div>
        <div>
          <v-chart :autoresize="true" :options="group_option2"></v-chart>
        </div>
        <div>
          <v-chart :autoresize="true" :options="group_option1"></v-chart>
        </div>
      </main>
    </el-row>


//而你的css这样写


  > main {
    display: flex;
    > div {
      flex: 1 1 auto;
      margin: 10px 0px 10px 10px;
      border: 1px solid #ccc;
    }
    > div:last-child {
      margin-right: 10px;
    }
  }

就变成这个样子了，

解决办法很简单，就是在flex布局的时候，要手动设置宽度，不要依赖flex:1 1 auto;进行自适设置

> main {
    display: flex;
    > div {
      flex: 1 1 auto;
      width: 33.3%;
      margin: 10px 0px 10px 10px;
      border: 1px solid #ccc;
    }
    > div:last-child {
      margin-right: 10px;
    }
  }

也就是这样。然后就可以看到居中的样子了。