dtm_vue/src/views/order/ordervalue/FunnelChart/index.vue

<template>

  <div class="chart-card">

    <h3 class="chart-title">支付决策漏斗图</h3>

    <OrderLoadingPanel
      v-if="loading"
      title="正在加载支付决策数据"
      detail="正在读取订单支付状态与响应时长"
    />

    <div ref="funnelChart" style="width: 100%; height: 300px;"></div>

  </div>

</template>



<script>
import * as echarts from 'echarts';
import { getOrderPaymentDecisionFunnel } from '@/api/order';
import OrderLoadingPanel from '../../components/OrderLoadingPanel.vue';



export default {

  name: 'FunnelChart',
  components: {
    OrderLoadingPanel
  },

  props: {

    dateRange: {

      type: Object,

      default: () => ({ start: '', end: '' })

    }

  },

  data() {

    return {

      totalOrders: 0,

      unpaidOrders: 0,

      rawData: {},

      loading: true

    };

  },

  watch: {

    dateRange: {

      handler(newRange) {

        this.fetchFunnelData(newRange);

      },

      deep: true

    }

  },

  mounted() {

    this.fetchFunnelData();

  },

  methods: {

    getMockData() {

      return {

        paidWithin5Mins: 7000,

        paidBetween5And30Mins: 1000,

        paidAfter30Mins: 0,

        unpaidOrders: 2000

      };

    },

    async fetchFunnelData(dateRange = null) {

      this.loading = true;

      try {
        const params = dateRange && dateRange.start && dateRange.end
          ? { startDate: dateRange.start, endDate: dateRange.end }
          : undefined;

        const response = await getOrderPaymentDecisionFunnel(params);

        const data = response.data;

        this.rawData = data;

        const paidSum = data.paidWithin5Mins + data.paidBetween5And30Mins + data.paidAfter30Mins;

        this.totalOrders = paidSum + data.unpaidOrders;

        this.unpaidOrders = data.unpaidOrders;

      } catch (error) {

        console.error('获取支付决策漏斗数据失败', error);

        const mockData = this.getMockData();

        this.rawData = mockData;

        const paidSum = mockData.paidWithin5Mins + mockData.paidBetween5And30Mins + mockData.paidAfter30Mins;

        this.totalOrders = paidSum + mockData.unpaidOrders;

        this.unpaidOrders = mockData.unpaidOrders;

      }

      this.renderChart();

      this.loading = false;

    },

    renderChart() {

      const chartEl = this.$refs.funnelChart;

      if (!this.rawData || !chartEl) return;

      const myChart = echarts.getInstanceByDom(chartEl) || echarts.init(chartEl);

      const categories = ['30分钟以上', '5-30分钟', '5分钟内', '未支付'];

      const seriesData = [

        this.rawData.paidAfter30Mins || 0,

        this.rawData.paidBetween5And30Mins || 0,

        this.rawData.paidWithin5Mins || 0,

        this.totalOrders

      ];

      const option = {

        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },

        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },

        xAxis: {

          type: 'value',

          axisLabel: { formatter: value => value.toLocaleString() }

        },

        yAxis: {

          type: 'category',

          data: categories

        },

        series: [

          {

            name: '订单数',

            type: 'bar',

            data: seriesData,

            itemStyle: {

              color: params => (params.dataIndex === 3 ? '#3366CC' : '#6699FF')

            },

            label: {

              show: true,

              position: 'right',

              formatter: '{c}'

            }

          }

        ]

      };

      myChart.setOption(option);

      window.addEventListener('resize', () => myChart.resize());

    }

  }

};

</script>





<style scoped>

.chart-card {

  background-color: white;

  padding: 20px;

  border-radius: 8px;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  position: relative;

  overflow: hidden;

}

.chart-title {

  text-align: center;

  font-size: 16px;

  font-weight: 600;

  color: #333;

  margin-bottom: 20px;

}

</style>