多條折線圖 - daniel-qa/Vue GitHub Wiki

<template>
  <div class="test-component">
    <div class="chart-title">年度課堂數統計圖 (測試)</div>
    <Echart :options="chartOptions" height="400px" width="100%"></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
import * as echarts from 'echarts'

export default {
  name: 'TestComponent',
  components: {
    Echart
  },
  data() {
    return {
      chartOptions: {}
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 模擬數據 - 根據圖片中的數據
      const monthData = {
        2024: [32273, 71713, 66027, 65471, 76403, 51262, 22857, 43650, 134392, 114011, 127092, 76977],
        2025: [30207, 49343, 60273, 46898, 44233, 28448, 8672, 13671, 60952, 53867, 54985, 46681],
        2026: [24687, 33650, 21021, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      }
      
      this.chartOptions = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['2024', '2025', '2026'],
          bottom: 10,
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          itemWidth: 30,
          itemHeight: 14
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            }
          },
          axisLabel: {
            color: '#fff',
            formatter: '{value}'
          }
        },
        series: [
          {
            name: '2024',
            type: 'line',
            data: monthData[2024],
            smooth: false,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#5B8FF9',
              width: 2
            },
            itemStyle: {
              color: '#5B8FF9'
            },
            label: {
              show: true,
              position: 'top',
              color: '#5B8FF9',
              fontSize: 10,
              formatter: '{c}'
            }
          },
          {
            name: '2025',
            type: 'line',
            data: monthData[2025],
            smooth: false,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#FF9845',
              width: 2
            },
            itemStyle: {
              color: '#FF9845'
            },
            label: {
              show: true,
              position: 'top',
              color: '#FF9845',
              fontSize: 10,
              formatter: '{c}'
            }
          },
          {
            name: '2026',
            type: 'line',
            data: monthData[2026],
            smooth: false,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              color: '#9E9E9E',
              width: 2
            },
            itemStyle: {
              color: '#9E9E9E'
            },
            label: {
              show: true,
              position: 'top',
              color: '#9E9E9E',
              fontSize: 10,
              formatter: function(params) {
                return params.value > 0 ? params.value : ''
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.test-component {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: rgba(0, 30, 60, 0.95);
  border-bottom: 3px solid #00b5ef;
  color: #00ffff;
  font-size: 18px;
  z-index: 99999;
  box-shadow: 0 4px 20px rgba(0, 181, 239, 0.5);
}

.chart-title {
  color: #00ffff;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}
</style>