CABaggageData2.0/src/views/flightStatistics/views/flightStatisticsCharts.vue

<template>
  <div class="statstics-wrapper">
    <div
      ref="headerWrapper"
      class="statstics-header"
    >
      <FlightStatisticsHeader title="航班量统计" />
    </div>
    <div class="statstics-content">
      <div
        id="chart"
        class="flight-statistics-chart"
        :style="{ height: chartHeight }"
      />
    </div>
  </div>
</template>

<script>
import FlightStatisticsHeader from '../components/flightStatisticsHeader.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'FlightStatisticsCharts',
  components: { FlightStatisticsHeader },
  data() {
    return {
      myChart: null,
      debounceTime: 300,
      chartHeight: '70vh',
      options: {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          top: '5%',
          right: '5%',
          data: ['航班量数量', '航班量同比', '航班量环比'],
          textStyle: {
            fontFamily: 'Helvetica, "Microsoft YaHei"',
            color: '#101116'
          }
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: '5%'
        },
        xAxis: {
          data: [
            '2020.01',
            '2020.02',
            '2020.03',
            '2020.04',
            '2020.05',
            '2020.06',
            '2020.07',
            '2020.08',
            '2020.09',
            '2020.10',
            '2020.11',
            '2020.12',
            '2021.01',
            '2021.02',
            '2021.03',
            '2021.04'
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#000000'
            }
          },
          axisTick: {
            show: false // 隐藏X轴刻度
          },
          axisLabel: {
            fontFamily: 'Helvetica, "Microsoft YaHei"',
            color: '#101116'
          },
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: [
          {
            min: 0,
            max: 60000,
            interval: 5000,
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#B0B3C3',
                opacity: 0.5
              }
            },
            axisPointer: {
              label: {
                formatter: ({ value }) => value.toFixed()
              }
            },
            axisLabel: {
              fontFamily: 'Helvetica, "Microsoft YaHei"',
              color: '#101116'
            }
          },
          {
            min: -0.3,
            max: 0.5,
            interval: 0.1,
            axisLabel: {
              formatter: value => (value * 100).toFixed(2) + '%',
              fontFamily: 'Helvetica, "Microsoft YaHei"',
              color: '#101116'
            },
            axisPointer: {
              label: {
                formatter: ({ value }) => (value * 100).toFixed(2) + '%'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '航班量数量',
            type: 'bar',
            z: 2,
            itemStyle: {
              color: '#6682B5'
            },
            barWidth: 40,
            data: [
              54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000, 54000,
              54000
            ]
          },
          {
            name: '航班量同比',
            type: 'line',
            z: 4,
            yAxisIndex: 1,
            symbol: 'circle',
            itemStyle: {
              color: '#F2B849',
              borderColor: '#ffffff',
              borderWidth: 4
            },
            lineStyle: {
              width: 4,
              color: '#F2B849'
            },
            symbolSize: 32,
            tooltip: {
              valueFormatter: value => (value * 100).toFixed(2) + '%'
            },
            data: [0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3, 0.3]
          },
          {
            name: '航班量环比',
            type: 'line',
            z: 3,
            yAxisIndex: 1,
            symbol: 'circle',
            itemStyle: {
              color: '#E33D3D',
              borderColor: '#ffffff',
              borderWidth: 4
            },
            lineStyle: {
              width: 4,
              color: '#E33D3D'
            },
            symbolSize: 32,
            tooltip: {
              valueFormatter: value => (value * 100).toFixed(2) + '%'
            },
            data: [0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2]
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    // 监听数据变化 重绘图形
    options: {
      handler(obj) {
        this.myChart.setOption(obj)
      },
      deep: true
    },
    'sidebar.expand'() {
      this.resizeHandler()
    }
  },
  mounted() {
    this.setChartHeight()
    this.myChart = this.$echarts.init(document.getElementById('chart'))
    this.myChart.setOption(this.options)
    // 监听页面缩放
    window.addEventListener('resize', this.setChartHeight)
    window.addEventListener('resize', this._.debounce(this.resizeHandler, this.debounceTime))
    this.$nextTick(() => {
      this.resizeHandler()
    })
  },
  beforeDestroy() {
    // 销毁实例和移除监听
    window.removeEventListener('resize', this.setChartHeight)
    if (this.myChart) {
      this.myChart.dispose()
      window.removeEventListener('resize', this.resizeHandler)
      this.myChart = null
    }
  },
  methods: {
    setChartHeight() {
      const topBarHeight = 80
      const headerHeight = this.$refs['headerWrapper'].offsetHeight
      const footerBlackHeight = 24
      this.chartHeight = `calc(100vh - ${topBarHeight + headerHeight + footerBlackHeight}px)`
    },
    resizeHandler() {
      if (this.myChart) {
        this.myChart.resize()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.statstics-wrapper {
  padding-left: 24px;
  padding-right: 36px;
  .statstics-header {
    padding-top: 16px;
  }
  .flight-statistics-chart {
    width: 100%;
  }
}
</style>