ComDetection/Echarts/vehicleTraffic.vue

<template>
  <div class="chart-container">
    <span>{{ startDate }}-</span>
    <span>{{ endDate }}-</span>
    <div style="width: 5000px;height: 500px;float: left" class="chart" ref="passengerFlowChart"></div>
    <div style="width: 5000px;height: 500px;float: left" class="chart" ref="revenueChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from "axios";

export default {
  name: "vehicleTraffic",
  data() {
    return {
      loading: false,
      tableLoading: true,

    }
  },
  methods: {
    initOption(data) {
      const chartDom = this.$refs.passengerFlowChart;
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '车道车流量排名(辆)',
        },
        grid: {
          left: '5%',
          right: '40%'
        },
        xAxis: {
          type: 'category',
          data: data.legendData
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          formatter: ({name, value, marker}) => {
            return `<div>${name}</div>${marker}车道流量:${value}`
          }
        },
        series: [
          {
            data: data.seriesData,
            type: 'bar'
          }
        ]
      };
      myChart.setOption(option);
    },
    initRevenueChart(data) {
      const chartDom = this.$refs.revenueChart; // 正确引用
      const myChart = echarts.init(chartDom);
      const chart = {
        title: {
          text: '车道收费排名(万元)',
        },
        grid: {
          left: '5%',
          right: '40%'
        },
        xAxis: {
          type: 'category',
          data: data.legendDataReven
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          formatter: ({name, value, marker}) => {
            return `<div>${name}</div>${marker}车道收费:${value}`
          }
        },
        series: [
          {
            data: data.seriesDataReven,
            type: 'bar'
          }
        ]
      };
      myChart.setOption(chart);
    },
    getDatf() {
      // 调用后端API获取数据
      axios
          .post("/WhiteListManagerSys/comNo/trafficVeh", {
            startDate: this.startDate,
            endDate: this.endDate,
          })
          .then((res) => {
            const seriesData = res.data.map((item) => item.CARCOUNT);
            const legendData = res.data.map((item) => item.STANAME);
            // const seriesDataReven = res.data.map((item) => item.CASH);
            // const legendDataReven = res.data.map((item) => item.STANAME);

            this.initOption({
              legendData,
              seriesData,
            });
            // this.initRevenueChart({ // 正确传递数据给 initRevenueChart
            //   legendDataReven,
            //   seriesDataReven
            // });

            this.tableLoading = false;
          });

      axios
          .post("/WhiteListManagerSys/comNo/trafficTool", {
            startDate: this.startDate,
            endDate: this.endDate,
          })
          .then((res) => {
            // const seriesData = res.data.map((item) => item.CARCOUNT);
            // const legendData = res.data.map((item) => item.STANAME);
            const seriesDataReven = res.data.map((item) => item.CASH);
            const legendDataReven = res.data.map((item) => item.STANAME);

            // this.initOption({
            //   legendData,
            //   seriesData,
            // });
            this.initRevenueChart({ // 正确传递数据给 initRevenueChart
              legendDataReven,
              seriesDataReven
            });

            this.tableLoading = false;
          });



    }
  }
}
</script>

<style scoped>

</style>