<template>
  <div class="tourist-wrap">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane
          label="游客年龄统计"
          name="first">
          <Age></Age>
        </el-tab-pane>

        <el-tab-pane
          label="游客性别统计"
          name="second">
          <Sex></Sex>
        </el-tab-pane>

        <el-tab-pane
          label="游客来源统计"
          name="third">
          <AreaStatics></AreaStatics>
        </el-tab-pane>
        <el-tab-pane
          label="各渠道占比"
          name="fourth">
          <ChannelBar></ChannelBar>
        </el-tab-pane>
        <el-tab-pane
          label="各渠道销售额占比"
          name="fifth">
          <ChannelPie></ChannelPie>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import Age from './Staticstics/Age'
import Sex from './Staticstics/Sex'
import AreaStatics from './Staticstics/Area'
import ChannelBar from './chart/ChannelBar'
import ChannelPie from './chart/ChannelPie'

export default {
  components: {
    Age,
    Sex,
    AreaStatics,
    ChannelBar,
    ChannelPie
  },
  data () {
    return {
      activeName: 'first'
    }
  }
}
</script>

<style lang="scss" scoped>
.tourist-wrap{
  padding: 20px;
  .echarts{
    margin:0 auto;
  }
}
</style>
