VUE+ECharts 自适应宽度

 

 card的边框，chart div  width: '100%'

 

代码：

 <el-row :gutter="5" style="padding-top: 0px">

      <el-col :span="12">

        <el-card>

          <div id="myChart1" :style="{ width: '100%', height: '260px' }"></div>

        </el-card>

      </el-col>

      <el-col :span="12">

        <el-card>

          <div id="myChart2" :style="{ width: '100%', height: '260px' }"></div>

        </el-card>

      </el-col>

    </el-row>

    <el-row :gutter="5" style="padding-top: 0px">

      <el-col :span="12">

        <el-card>

          <div id="myChart3" :style="{ width: '100%', height: '260px' }"></div>

        </el-card>

      </el-col>

      <el-col :span="12">

        <el-card>

          <div id="myChart4" :style="{ width: '100%', height: '260px' }"></div>

        </el-card>

      </el-col>

    </el-row>

    <el-row :gutter="5" style="padding-top: 0px">

      <el-col :span="12">

        <el-card>

          <div id="myChart5" :style="{ width: '100%', height: '260px' }"></div>

        </el-card>

      </el-col>

      <el-col :span="12">

        <el-card>

          <div id="myChart6" :style="{ width: '100%', height: '260px' }"></div>

        </el-card>

      </el-col>

    </el-row>