vue布局样式

 <div class="media align-items-center border">
            <span class="border-right px-3 py-4 bg-light">昨日销量</span>
            <div class="media-body"
                 style="font-size:14px;">
              <div class="border-bottom pl-3 pb-2 mb-2">
                <span>订单量(件)</span>12
              </div>
              <div class="pl-3"><span>订单金额(元)</span>12</div>
            </div>
          </div>

数据

tips: [
        {
          title: '店铺及商品提示',
          desc: '需要关注的店铺信息及待处理事项',
          list: [
            { name: '出售中', num: '64' },
            { name: '待回复', num: '10' },
            { name: '内存预警', num: '0' },
            { name: '仓库中', num: '3' }
          ]
        },
        {
          title: '交易提示',
          desc: '您需要立即处理的交易订单',
          list: [
            { name: '代付款', num: '0' },
            { name: '代发货', num: '10' },
            { name: '已发货', num: '0' },
            { name: '已收货', num: '3' },
            { name: '退款中', num: '3' },
            { name: '待售后', num: '3' }
          ]
        }
      ],

  <!-- 左边部分 店铺及商品提示，交易提示-->
      <el-col :span="12"
              class="d-flex flex-column"
              style="height:460px; justify-content:space-between;">
        <el-card class="box-card"
                 shadow="never"
                 v-for="(tip, ti) in tips"
                 :key="ti">
          <div slot="header"
               class="clearfix">
            <span>{{ tip.title }}</span>
            <el-button style="float: right; padding: 3px 0"
                       type="text">{{
              tip.desc
            }}</el-button>
          </div>
          <div class="row">
            <div :class="tip.list.length | getCol"
                 v-for="(tlist, listi) in tip.list"
                 :key="listi">
              <button class="btn btn-light w-100">
                <h4>{{ tlist.num }}</h4>
                <small class="text-muted">{{ tlist.name }}</small>
              </button>
            </div>
          </div>
        </el-card>
      </el-col>

上边四个，下边六个需要做个筛选

 filters: {
    getCol (total) {
      return `col-${12 / total}`
    }
  },

数据

 counts: [
        {
          icon: 'el-icon-user-solid',
          num: '30',
          desc: '关注人数(个)',
          color: 'bg-primary'
        },
        {
          icon: 'el-icon-s-finance',
          num: '120',
          desc: '订单总数(笔)',
          color: 'bg-success'
        },
        {
          icon: 'el-icon-tickets',
          num: '4183.80',
          desc: '今日订单总金额(元)',
          color: 'bg-danger'
        },
        {
          icon: 'el-icon-s-data',
          num: '100',
          desc: '本月销售(笔)',
          color: 'bg-warning'
        }
      ],

 <!-- 数据统计 -->
    <el-row :gutter="20"
            style="">
      <el-col :span="6"
              v-for="(item, index) in counts"
              :key="index">
        <el-card class="box-card"
                 shadow="hover">
          <div class="d-flex align-items-center">
            <i :class="[item.icon, item.color]"
               class=" h4 mb-0  text-white text-center mr-3"
               style="width:40px;height:40px;line-height:40px;"></i>
            <div>
              <h4 class="mb-0">{{ item.num }}</h4>
              <small class="text-muted">{{ item.desc }}</small>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

 <!-- 右边统计图 -->
      <el-col :span="12">
        <el-card class="box-card"
                 style="height:460px;"
                 shadow="never">
          <div slot="header"
               class="clearfix">
            <span>订单总数统计</span>
            <el-button style="float: right; padding: 3px 0"
                       type="text">订单数量</el-button>
          </div>
          <!-- 统计图容器 -->
          <div id="main"
               style="width:100%;height:360px;"
               ref="myChart"></div>
        </el-card>
      </el-col>

import echarts from 'echarts'

 _drawLine () {
      let myChart = echarts.init(this.$refs.myChart)
      //  配置参数
      myChart.setOption({
        title: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {} },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            areaStyle: { normal: {} },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      })
      window.onresize = function () {
        myChart.resize()
      }
    }

 // dom元素渲染完毕
  mounted () {
    // 统计图
    this.$axios.post(`http://192.168.1.20:8765/honghu-collect-service/favorite/attention_store`).then(res => {
      alert(res)
    })
    this._drawLine()
  },