<template>
  <div class="chart-page">
    <section
      class="chart-section"
      style="display: flex; width: 100%;">
      <el-card
        class="chart-card"
        style="flex-shrink: 0; width: 650px; margin-right: 10px;">
        <div slot="header">
          <span>客源地分布</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 350px; ">
          <Chart1/>
        </div>
      </el-card>
      <el-card
        class="chart-card"
        style="flex-grow: 1;">
        <div slot="header">
          <span>年龄性别分析</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 350px; ">
          <Chart2/>
        </div>
      </el-card>
    </section>
    <section
      class="chart-section"
      style="display: flex; width: 100%;">
      <el-card
        class="chart-card"
        style="flex-shrink: 0; width: 650px; margin-right: 10px;">
        <div slot="header">
          <span>性别分析</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 350px; ">
          <Chart3/>
        </div>
      </el-card>
      <el-card
        class="chart-card"
        style="flex-grow: 1;">
        <div slot="header">
          <span>游客购票次数分析</span>
          <el-button type="text">操作按钮</el-button>
        </div>
        <div
          class="content"
          style="height: 350px; ">
          <chart4/>
        </div>
      </el-card>
    </section>
  </div>
</template>
<script>
import './chartAnalysis.scss'
import Chart1 from './guestAnalysisCharts/chart1.vue'
import Chart2 from './guestAnalysisCharts/chart2.vue'
import Chart3 from './guestAnalysisCharts/chart3.vue'
import Chart4 from './guestAnalysisCharts/chart4.vue'
export default {
  name: 'GuestAnalysisCharts',
  components: {
    Chart1,
    Chart2,
    Chart3,
    Chart4
  }
}
</script>
