<template>
  <div style=" position: relative;" class="paiming">
    <el-tabs v-model="activeName2" type="card">
      <el-tab-pane label="个人趋势与架构图" name="ChartPersonal">
        <ChartPersonal></ChartPersonal>
      </el-tab-pane>
      <el-tab-pane label="部门趋势与架构图" name="ChartDept">
        <ChartDept></ChartDept>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
  import ChartPersonal from './ChartPersonal'
  import ChartDept from './ChartDept'
  import HighCharts from 'highcharts';

  require('highcharts/modules/no-data-to-display')(HighCharts)
  export default {
    components: {ChartPersonal, ChartDept},
    data() {
      return {
        activeName2: 'ChartPersonal'
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      }
    }
  }
</script>

<style>


  .paiming .el-tabs__content {
    overflow: visible;
  }

  .paiming .el-tabs__nav-wrap {
    background-color: #5B8BF7;
    padding: 3px 3px 0 3px;
    border-radius: 3px 3px 0 0;
  }

  .paiming .el-tabs__item {
    color: #fff;
    border: none;
    font-weight: normal;
  }

  .paiming .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
  }

  .paiming .el-tabs--card > .el-tabs__header .el-tabs__item {
    border: none;
  }

  .paiming .is-active {
    background-color: #fff;
    color: rgba(96, 98, 102, 1);
    border-radius: 3px 3px 0 0;
  }

  .paiming .el-tabs__item.is-active {
    color: rgba(96, 98, 102, 1);
  }
</style>
