yunsan-pc/src/views/traffic/components/Traffic4.vue

<template>
  <section class="traffic-4">
    <StationFilter class="traffic-4__filter" v-model:line="selectedLine" v-model:station="selectedStation"
      />
    <div class="chart-shell">
      <v-chart class="traffic-4__chart" :option="chartOption" autoresize />
    </div>
  </section>
</template>

<script setup>
import { computed ,ref} from 'vue'
import StationFilter from './StationFilter.vue'
import VChart from 'vue-echarts'
import * as echarts from 'echarts'



const selectedLine = ref('3')
const selectedStation = ref('0313')



const hours = ['5', '7', '9', '11', '13', '15', '17', '19', '21', '23']

const topActual = [800, 900, 2100, 4050, 1500, 1450, 1200, 2300, 900, 900]
const topCompare = [1400, 1800, 3400, 4500, 2950, 2600, 2800, 4300, 4300, 4850]

const bottomActual = [4800, 4400, 3000, 1600, 3150, 3500, 3350, 1850, 1450, 1650]
const bottomCompare = [5400, 5300, 4900, 2200, 4700, 5000, 3850, 4700, 5350, 5350 ]

const pointGlowSymbol = 'image:///imgs/traffic/4-item.png'
const pointGlowSymbol1 = 'image:///imgs/traffic/4-item1.png'
const topPointGlow = hours.map((hour, index) => [hour, topActual[index]])
const bottomPointGlow = hours.map((hour, index) => [hour, bottomActual[index]])


const chartOption = computed(() => ({
  backgroundColor: 'transparent',
  animationDuration: 900,
  animationDurationUpdate: 700,
  animationEasing: 'cubicOut',

  grid: [
    {
      left: 0,
      right: 16,
      top: 15,
      height: 225,
      containLabel: true
    },
    {
      left: 0,
      right: 16,
      bottom: 20,
      height: 225,
      containLabel: true
    }
  ],
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: hours,
      gridIndex: 0,
      axisLine: {
        show: true
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: 'rgba(226, 239, 255, 0.95)',
        fontSize: 13,
        fontWeight: 600,
        margin: 12
      },
      splitLine: {
        show: false
      }
    },
    {
      type: 'category',
      boundaryGap: false,
      data: hours,
      gridIndex: 1,
      position: 'top',
      axisLine: {
        show: true
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      gridIndex: 0,
      interval: 1000,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: 'rgba(222, 236, 255, 0.9)',
        fontSize: 12,
        margin: 10
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(225, 238, 255, 0.48)',
          type: 'dashed',
          width: 1.5,
          dashOffset: 10
        }
      }
    },
    {
      type: 'value',
      gridIndex: 1,
      interval: 1000,
      inverse: true,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: 'rgba(222, 236, 255, 0.9)',
        fontSize: 12,
        margin: 10
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(225, 238, 255, 0.48)',
          type: 'dashed',
          width: 1.5,
          dashOffset: 10
        }
      }
    }
  ],
  series: [
    {
      type: 'scatter',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: topPointGlow,
      symbol: pointGlowSymbol,
      symbolSize: [47, 109],
      symbolOffset: [4, 0],
      symbolKeepAspect: false,
      silent: false,
      z: 4,
      tooltip: {
        show: false
      }
    },
    {
      type: 'scatter',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: bottomPointGlow,
      symbol: pointGlowSymbol1,
      symbolSize: [47, 109],
      symbolOffset: [4,0],
      symbolKeepAspect: true,
      silent: true,
      z: 4,
      tooltip: {
        show: false
      }
    },
    {
      name: '进出站',
      type: 'line',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: topActual,
      smooth: false,
      symbol: 'circle',
      symbolSize: 6,
      z: 5,
      lineStyle: {
        color: '#44d9ff',
        width: 4,
        cap: 'round',
        join: 'round',
        shadowBlur: 6,
        shadowColor: 'rgba(68, 217, 255, 0.25)'
      },
      itemStyle: {
        color: '#ffffff',
        borderColor: 'rgba(167, 244, 255, 0.55)',
        borderWidth: 1,
        shadowBlur: 10,
        shadowColor: 'rgba(90, 224, 255, 0.48)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(42, 200, 255, 0.9)' },
          { offset: 0.55, color: 'rgba(28, 132, 222, 0.5)' },
          { offset: 1, color: 'rgba(20, 88, 188, 0.2)' }
        ])
      }
    },
    {
      name: '进出站对比',
      type: 'line',
      xAxisIndex: 0,
      yAxisIndex: 0,
      data: topCompare,
      smooth: false,
      symbol: 'none',
      z: 4,
      lineStyle: {
        color: '#F5C10B',
        width: 3,
        cap: 'round',
        join: 'round'
      }
    },
    {
      name: '换乘站',
      type: 'line',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: bottomActual,
      smooth: false,
      symbol: 'circle',
      symbolSize: 6,
      z: 5,
      lineStyle: {
        color: '#29ffd0',
        width: 4,
        cap: 'round',
        join: 'round',
        shadowBlur: 6,
        shadowColor: 'rgba(41, 255, 208, 0.22)'
      },
      itemStyle: {
        color: '#ffffff',
        borderColor: 'rgba(180, 255, 238, 0.55)',
        borderWidth: 1.5,
        shadowBlur: 10,
        shadowColor: 'rgba(93, 255, 220, 0.42)'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(16, 172, 138, 0.2)' },
          { offset: 0.42, color: 'rgba(22, 202, 168, 0.5)' },
          { offset: 1, color: 'rgba(22, 224, 174, 0.9)' }
        ])
      }
    },
    {
      name: '换乘站对比',
      type: 'line',
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: bottomCompare,
      smooth: false,
      symbol: 'none',
      z: 4,
      lineStyle: {
        color: '#F5C10B',
        width: 3,
        cap: 'round',
        join: 'round'
      }
    }
  ],
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0, 0, 0, 0.75)',
    textStyle: {
      color: '#fff',
      fontSize: 12
    },
    formatter: params => {
      const { name, seriesName, value } = params[0]
      return `${name}时<br>${seriesName}: ${value}`
    }
  }
}))
</script>

<style lang="scss" scoped>
  .traffic-4 {
    position: absolute;
    left: 2948px;
    top: 128px;
    width: 892px;
    height: 564.59px;
    background: url('/imgs/traffic/4-bg.png') no-repeat center center;
    background-size: cover;


    
    .traffic-4__filter {
      position: absolute;
      top: 12px;
      right: 30px;
      z-index: 2;
    }

    .chart-shell {
      position: absolute;
      left: 56px;
      right: 8px;
      top: 66px;
      bottom: 4px;
    }

    &__chart {
      width: 100%;
      height: 100%;
    }
  }
</style>