ComDetection/Echarts/pkhRevenueFow.vue

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

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

export default {
  name: 'pkhRevenueFow',
  mounted() {
  },
  data() {
    return {
      tableLoading: true
    }
  },

  methods: {
    initPassengerFlowChart(data) {
      const chartDom = this.$refs.passengerFlowChart;
      const myChart = echarts.init(chartDom);
      const numDataPoints = 50;
      //const data = genData(numDataPoints);
      // 普通客货流量统计图表
      myChart.setOption({
        // 图表配置选项
        title: {
          text: '普通公路客,货流量统计(辆)',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 10,
          top: 20,
          bottom: 20,
          data: data.legendData
        },
        series: [
          {
            name: '流量',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: data.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });

    },
    initRevenueChart(data) {
      const chartDom = this.$refs.revenueChart;
      const myChart = echarts.init(chartDom);
      const numDataPoints = 50;
      //const data = genData(numDataPoints);
      // 在这里配置你的客货收入统计图表
      myChart.setOption({
        title: {
          text: '普通公路客,货收入统计(万元)',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: 10,
          top: 20,
          bottom: 20,
          data: data.legendData
        },
        series: [
          {
            name: '收入',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: data.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });

    },
    getDatc() {
      // 调用后端API获取数据
      axios.post('/WhiteListManagerSys/comNo/pstatistics',
          {
            'selectedCompany': this.selectedCompany,
            'selectedStation': this.selectedStation,
            'startDate': this.startDate,
            'endDate': this.endDate
          }
      ).then((res) => {
        var legendData = [];
        var seriesData = [];
        var legendDataReven = [];
        var seriesDataReven = [];
        legendData.push("客车");
        legendData.push("货车");
        seriesData.push({
          name: "客车",
          value: res.data.KE
        }, {
          name: "货车",
          value: res.data.HUO
        });
        this.initPassengerFlowChart({
          legendData: legendData,
          seriesData: seriesData,
        });

        legendDataReven.push("客车");
        legendDataReven.push("货车");
        seriesDataReven.push({
          name: "客车",
          value: res.data.KECASH
        }, {
          name: "货车",
          value: res.data.HUOCASH
        });
        this.initRevenueChart({
          legendData: legendDataReven,
          seriesData: seriesDataReven,

        })
        this.tableLoading = false;
      });
    }
  },
  props: ['selectedCompany', 'selectedStation', 'startDate', 'endDate']
}
</script>