<template>
  <div class="example-container">
    <h2>柱状图使用示例</h2>
    
    <!-- 单系列数据示例 -->
    <div class="example-section">
      <h3>单系列数据（有百分比）</h3>
      <BarChart 
        :data="singleSeriesData" 
        title="单系列柱状图"
        style="height: 300px;"
      />
    </div>

    <!-- 单系列数据无百分比示例 -->
    <div class="example-section">
      <h3>单系列数据（无百分比）</h3>
      <BarChart 
        :data="singleSeriesDataNoPercentage" 
        title="单系列柱状图（无百分比）"
        style="height: 300px;"
      />
    </div>

    <!-- 多系列数据示例 -->
    <div class="example-section">
      <h3>多系列数据对比</h3>
      <BarChart 
        :data="multiSeriesData" 
        :is-multi-series="true"
        :series-names="['2023年', '2024年']"
        title="多系列对比柱状图"
        style="height: 300px;"
      />
    </div>

    <!-- 多系列数据部分有百分比示例 -->
    <div class="example-section">
      <h3>多系列数据（部分有百分比）</h3>
      <BarChart 
        :data="multiSeriesDataMixed" 
        :is-multi-series="true"
        :series-names="['产品A', '产品B', '产品C']"
        title="多系列混合数据柱状图"
        style="height: 300px;"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import BarChart from './BarChart.vue'

// 单系列数据（有百分比）
const singleSeriesData = ref([
  { name: '6次以上', value: 45, percentage: '45.0%' },
  { name: '5次', value: 23, percentage: '23.0%' },
  { name: '4次', value: 15, percentage: '15.0%' },
  { name: '3次', value: 8, percentage: '8.0%' },
  { name: '2次', value: 6, percentage: '6.0%' },
  { name: '1次', value: 3, percentage: '3.0%' }
])

// 单系列数据（无百分比）
const singleSeriesDataNoPercentage = ref([
  { name: '北京', value: 1200 },
  { name: '上海', value: 980 },
  { name: '广州', value: 850 },
  { name: '深圳', value: 720 },
  { name: '杭州', value: 650 }
])

// 多系列数据对比
const multiSeriesData = ref([
  {
    name: 'Q1',
    values: [
      { value: 120, percentage: '30.0%' },
      { value: 140, percentage: '35.0%' }
    ]
  },
  {
    name: 'Q2',
    values: [
      { value: 180, percentage: '45.0%' },
      { value: 160, percentage: '40.0%' }
    ]
  },
  {
    name: 'Q3',
    values: [
      { value: 100, percentage: '25.0%' },
      { value: 100, percentage: '25.0%' }
    ]
  }
])

// 多系列数据（部分有百分比）
const multiSeriesDataMixed = ref([
  {
    name: '1月',
    values: [
      { value: 100, percentage: '25.0%' },
      { value: 120 },
      { value: 80, percentage: '20.0%' }
    ]
  },
  {
    name: '2月',
    values: [
      { value: 150, percentage: '37.5%' },
      { value: 130 },
      { value: 120, percentage: '30.0%' }
    ]
  },
  {
    name: '3月',
    values: [
      { value: 150, percentage: '37.5%' },
      { value: 150 },
      { value: 200, percentage: '50.0%' }
    ]
  }
])
</script>

<style scoped lang="scss">
.example-container {
  padding: 20px;
  
  h2 {
    color: #333;
    margin-bottom: 30px;
  }
  
  .example-section {
    margin-bottom: 40px;
    
    h3 {
      color: #666;
      margin-bottom: 15px;
      font-size: 16px;
    }
  }
}
</style>
