<template>
  <div class="team-build">
    <div v-if="showChart">
      <m-chart :data="data" :config="config"/>
    </div>
    <div v-if="showChart">
      <m-chart :data="data2" :config="config2" :options="{xAxis: {splitLine: {show: false}}, yAxis: {splitLine: {show: false}}}"/>
    </div>
    <Select v-model="area" class="custom-select" size="small">
      <Option v-for="item in options" :key="item" :value="item">{{item}}</Option>
    </Select>
  </div>
</template>

<script>
export default {
  name: 'TeamBuild',
  data() {
    return {
      showChart: false,
      area: '华北地区',
      options: ['华北地区'],
      config: {
        colors: ['#535af1', '#39d655', '#ffd825'],
        legend: {
          align: 'left',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', radius: [20, 40], roseType: 'radius', center: ['65%', '50%']}
        ]
      },
      data: [
        {name: '执业人员', value: 50},
        {name: '乡村兽医', value: 30},
        {name: '官方兽医', value: 20},
      ],
      config2: {
        colors: ['#00d2ff'],
        legend: {
          hide: true,
        },
        shape: [
          {type: 'bar', barWidth: '50%', key: 'value', label: {show: true, position: 'top', color: '#fff'}},
        ],
        xAxis: {
          key: 'name',
        },
        yAxis: {
          axisLabel: {show: false},
          axisLine: {show: false},
          max: 15,
        }
      },
      data2: [
        {name: '北京', value: 3},
        {name: '天津', value: 4},
        {name: '河北', value: 2},
        {name: '山西', value: 7},
        {name: '内蒙古', value: 10},
      ],
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 0)
  },
}
</script>

<style lang="stylus" scoped>
.team-build
  width 100%
  height 100%
  display flex
  >div
    flex 1
    &:first-child
      border-right .1rem solid #175d83
      margin-right 1rem
</style>
