ComDetection/Echarts/exportedModels.vue

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

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

export default {
  name: 'exportedModels',
  data() {
    return {
      tableLoading:true
    }
  },
  methods: {
    initPassengerFlowChart(data) {
      const chartDom = this.$refs.passengerFlowChart;
      const myChart = echarts.init(chartDom);
      //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)'
              }
            }
          }
        ]
      });

    },
    getDatg(){
      // 调用后端API获取数据
      axios.post('/WhiteListManagerSys/comNo/carModels',
          {
            'selectedCompany':this.selectedCompany,
            'selectedStation':this.selectedStation,
            'startDate':this.startDate,
            'endDate':this.endDate
          }
      ).then((res) => {
        var legendData = [];
        var seriesData = [];
        for (let item of res.data) {
              legendData.push(item.TEXT);
              seriesData.push({
                name: item.TEXT,
                value: item.CARCOUNT
              });
        }
        this.initPassengerFlowChart({
          legendData: legendData,
          seriesData: seriesData,
        });
        this.tableLoading = false;

        // this.initRevenueChart({
        //   legendData: legendDataReven,
        //   seriesData: seriesDataReven,
        // });
      });
      // 调用后端API获取数据
      axios.post('/WhiteListManagerSys/comNo/carModelsON',
          {
            'selectedCompany':this.selectedCompany,
            'selectedStation':this.selectedStation,
            'startDate':this.startDate,
            'endDate':this.endDate
          }
      ).then((res) => {
        var legendDataReven = [];
        var seriesDataReven = [];
        for (let item of res.data) {
          legendDataReven.push(item.TEXT);
          seriesDataReven.push({
            name: item.TEXT,
            value: item.CARCOUNT
          });
        }
        this.initRevenueChart({
          legendDataReven: legendDataReven,
          seriesData: seriesDataReven,
        });
        this.tableLoading = false;


      });
    }
  },
  props:['selectedCompany','selectedStation','startDate','endDate']
}
</script>
<style>

.chart-containers {
  display: flex;
}

.chart {
  flex: 1;
  height: 300px; /* 设置图表高度 */
}

</style>