<template>
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1">
      <el-breadcrumb-item :to="{ path: '/data_analysis' }">{{ $t("lang.dataAnalysis") }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t("lang.myServiceDataAnalysis") }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="in_analysis">
      <!-- 可横向铺满 -->
      <el-col :span="6" class="in_left">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius class="block left_1">
              <div ref="left_1_l" class="left_1_l"></div>
              <dashboard ref="left_1_r" class="left_1_r"></dashboard>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block">
              <multiple-circle :data="mult_data" :text="text"></multiple-circle>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="in_center">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius class="block"></block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block">
              <line-chart :data="line_data"></line-chart>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block">

            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" class="in_right">
        <el-row>
          <el-col :span="24" class="in_block">
            <block-radius class="block">
              <toplist></toplist>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block">
              <single-circle :data="single_data"></single-circle>
            </block-radius>
          </el-col>
          <el-col :span="24" class="in_block">
            <block-radius class="block">
              <starlist></starlist>
            </block-radius>
          </el-col>
        </el-row>
      </el-col>
      <!-- 不可横向铺满，一般为最后一行 -->
      <el-col :span="6" class="in_block">
        <block-radius class="block"></block-radius>
      </el-col>
      <el-col :span="18" class="in_block default">
        <block-radius class="block">
          <img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
        </block-radius>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BlockRadius from "@/components/general/block-radius";
import Dashboard from "@/components/e-charts/dashboard";
import multipleCircle from '@/components/e-charts/multiple_circle'
import singleCircle from '@/components/e-charts/single_circle'
import lineChart from '@/components/e-charts/line_chart'
import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
export default {
  components: {
    BlockRadius,
    Dashboard,
    multipleCircle,
    singleCircle,
    Toplist,
    Starlist,
    lineChart
  },
  data: () => ({
    navList: [],
    mult_data:[
      {"name":"基础工具","value":40},
      {"name":"通用应用","value":0},
      {"name":"业务应用","value":2}
    ],
    text:'应用总数',
    single_data:{
      num:12,
      color:'#515fe7',
      text:'共享'
    },
    line_data:{
      xaxis:['01-01','01-02','01-03','01-04','01-05','01-06','01-07','01-08'],
      data:[
        {
          name:'开发者应用',
          arr:[100,120,130,150,160,120,110,100]
        },
        {
          name:'平台应用',
          arr:[120,130,140,130,140,120,100,90]
        },
        {
          name:'未上架',
          arr:[80,90,100,110,100,70,80,90]
        },
      ],
    }
  }),
  mounted() {},
  methods: {}
};
</script>
<style scoped>
.in_analysis {
  padding: 0 10px 10px;
  height: 100%;
  width: 100%;
  min-width: 1700px;
}
.in_l {
}
.in_r {
}
.in_c {
}
.in_block {
  height: 280px;
  padding: 10px;
}
.block {
  width: 100%;
  height: 100%;
}
.left_1 {
  display: flex;
}
.left_1_l {
  width: 50%;
  height: 100%;
  display: inline-block;
}
.left_1_r {
  width: 50%;
  height: 100%;
  display: inline-block;
}
.default {
  text-align: center;
}
.default_img {
  width: 330px;
  height: 230px;
}
</style>