luohe_fronted/src/pages/index/components/parking_period_analysis.vue

<template>
  <div class="body-wrapper">
    <h4 style="color: white">停车高峰时段分析</h4>
    <br>
    <div style="width: 100%; height: 400px">
      <linechart
        :autoStop="false"
        :top="30"
        :bottom="30"
        :left="40"
        :legendTop="0"
        yAxisName="(辆)"
        :dataset="linedata"
        :tooltipFormat="lineTooltipFormat"
        :encode="[
              { x: 'mouth', y: 'lastYearAmount', seriesName: '入场',bool:'true' },
              { x: 'mouth', y: 'thisYearAmount', seriesName: '出场',bool:'true' },
            ]"
        id="sxcyfzqk"
      />
    </div>
    <h4 style="color: white">出入场压力分析</h4>
    <br>
    <div style="width: 100%; height: 580px">
      <barchart
        class="side-chart"
        :autoStop="false"
        :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
        legendIcon="react"
        :bottom="180"
        :xlabelFormat="xLabelFormat"
        :top="60"
        yAxisName="(辆)"
        :tooltip="tooltipFormat"
        :dataset="bardata1"
        :encode="[
            {x: 'month', y: 'hs', seriesName: '入场'},
            {x: 'month', y: 'cs', seriesName: '出场'}]"
        :labelSize="15"
        id="fxdqhszzt"
      />
    </div>
    <h4 style="color: white">停车饱和度分析</h4>
    <br/>
    <div  style="width: 100%; height: 580px">
      <barchart
        class="side-chart"
        :autoStop="false"
        :colorArr="['#ffd201', '#00eacb', '#01b4ff', '#5d78ff']"
        legendIcon="react"
        :bottom="180"
        :xlabelFormat="xLabelFormat"
        :top="60"
        yAxisName="(辆)"
        :tooltip="tooltipFormat1"
        :dataset="bardata2"
        :encode="[
            {x: 'month', y: 'hs', seriesName: '占用'},
            {x: 'month', y: 'cs', seriesName: '空闲'}]"
        :labelSize="15"
        id="fxdqhszzt1"
      />
    </div>
  </div>
</template>
<script>
import linechart from "@/components/lineChart";
import barchart from "@/components/barChart";
import api from '@/api/audit'

export default {
  components: {
    linechart,
    barchart
  },
  data() {
    return {
      linedata: [],
      bardata1: [],
      bardata2: []
    }
  },
  mounted() {
    this.getLineData()
    this.getBarData1()
    this.getBarData2()
  },
  watch: {},
  methods: {
    getLineData() {
      api.tcsdfx1().then(res => {
        this.linedata = res.data || []
      })
    },
    getBarData1() {
      api.tcsdfx2().then(res => {
        this.bardata1 = res.data || []
      })
    },
    getBarData2() {
      api.tcsdfx2().then(res => {
        this.bardata2 = res.data || []
      })
    },
    lineTooltipFormat(params) {
      const data = params[0].data;
      return `<div class="line-tooltip">
        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
        params[0].data.lastYearAmount || "--"
      }(辆)</div>
        <div style="color: ${params[1].color}">${params[1].seriesName}: ${
        params[0].data.thisYearAmount || "--"
      }(辆)</div>
      </div>`;
    },
    tooltipFormat(params) {
      const type = params[0].seriesType;
      const data = params[0].data;
      // ${params[0].name || "--"}月：
      return `<div class="line-tooltip">
<div>${params[0].seriesName}: ${
        params[0].data.hs || "--"}辆</div>
<div>${params[1].seriesName}: ${
        params[0].data.cs || "--"}辆</div>
</div>`;
    },
    tooltipFormat1(params) {
      const type = params[0].seriesType;
      const data = params[0].data;
      // ${params[0].name || "--"}月：
      return `<div class="line-tooltip">
<div>${params[0].seriesName}: ${
        params[0].data.hs || "--"}个</div>
<div>${params[1].seriesName}: ${
        params[0].data.cs || "--"}个</div>
</div>`;
    },
    xLabelFormat(name) {
      var str = name.split("");
      return str.join("\n");
    },
  }
}
</script>

<style lang="scss" scoped>
.body-wrapper {
  padding: 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0c0c0c;

}
</style>