``` <template> <div id="box"> <div id="qinshigaikuang"></div> <br><br><br> <el-row :gutter="20"> <el-col :span="12"> <div class="grid-content bg-purple row12"> </div> </el-col> <el-col :span="12"> <div class="grid-content bg-purple row12"> </div> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"><div id="chart"></div></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"><div id="chart1"></div></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> </el-row> </div> </template> <script> export default { name: 'Home', mounted () { this.$chart.first_barq('qinshigaikuang'), // 方法调用 this.$chart.first_bar('chart'), // 方法调用 this.$chart.first_bar1('chart1') // 方法调用 } } </script> <style scoped> .el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .bg-purple-dark { background: #99a9bf; } .bg-purple { /* background: #d3dce6; */ } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } .row-bg { padding: 10px 0; background-color: #f9fafc; } .row12{ background-color: #e1e1e1; } /* #box{ width:100w; height: 50%; } */ #qinshigaikuang { width: 100%; height: 300px; margin:0 auto; } #chart { width: 300px; height: 300px; margin:0 auto; } #chart1 { width: 300px; height: 300px; margin:0 auto; } </style> ```