<template>
  <div class="line-chart-example">
    <h3>多线图表示例</h3>
    <LineChart 
      :data="chartData" 
      :lines="lineConfigs"
      height="400px"
      title="销售数据趋势"
      :show-legend="true"
      :show-tooltip="true"
      :show-grid="true"
    />
  </div>
</template>

<script lang="ts" setup>
import LineChart from './LineChart.vue'

// 图表数据 - 每条线对应一个数据字段
const chartData = [
  { date: '2024-01', sales: 1200, profit: 300, cost: 900 },
  { date: '2024-02', sales: 1500, profit: 400, cost: 1100 },
  { date: '2024-03', sales: 1800, profit: 500, cost: 1300 },
  { date: '2024-04', sales: 1600, profit: 450, cost: 1150 },
  { date: '2024-05', sales: 2200, profit: 600, cost: 1600 },
  { date: '2024-06', sales: 2500, profit: 700, cost: 1800 },
  { date: '2024-07', sales: 2800, profit: 800, cost: 2000 },
  { date: '2024-08', sales: 3000, profit: 900, cost: 2100 },
  { date: '2024-09', sales: 3200, profit: 1000, cost: 2200 },
  { date: '2024-10', sales: 3500, profit: 1100, cost: 2400 },
  { date: '2024-11', sales: 3800, profit: 1200, cost: 2600 },
  { date: '2024-12', sales: 4000, profit: 1300, cost: 2700 }
]

// 线条配置 - 定义每条线的样式和行为
const lineConfigs = [
  {
    name: 'sales',        // 对应数据中的字段名
    color: '#167AF0',     // 线条颜色
    smooth: true,         // 是否平滑
    areaStyle: false,     // 是否显示区域填充
    symbolSize: 8,        // 数据点大小
    lineWidth: 2          // 线条宽度
  },
  {
    name: 'profit',
    color: '#52C41A',
    smooth: true,
    areaStyle: true,      // 显示区域填充
    symbolSize: 6,
    lineWidth: 2
  },
  {
    name: 'cost',
    color: '#FA8C16',
    smooth: false,        // 不平滑
    areaStyle: false,
    symbolSize: 8,
    lineWidth: 2
  }
]
</script>

<style scoped lang="scss">
.line-chart-example {
  padding: 20px;
  
  h3 {
    margin-bottom: 20px;
    color: #333;
    font-size: 18px;
    font-weight: 500;
  }
}
</style>
