ComDetection/Echarts/khRevenueFow.vue

<template  v-loading.fullscreen.lock="tableLoading">
  <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";
import {CloseBold, Delete, Edit, Reading, Select, ZoomIn} from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default {
  name: 'khRevenueFow',
  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)'
              }
            }
          }
        ]
      });
    },
    getData(){
      // 调用后端API获取数据
      axios.post('/WhiteListManagerSys/comNo/statistics',
          {
            '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;
      });
     }
  },

}
</script>