订单页面统计图

zxl

昨天 292ee989196ec5ab4351cdbb6f3ef6ccf45dba31

 manager/src/views/statistics/order.vue

@@ -74,6 +74,19 @@
    </Card>

    <Card class="card">
      <div class="my-chart-container">
        <div class="chart-wrapper">
          <div class="chart-header">
            <h2>浏览数据/订单时间段 趋势图</h2>
          </div>
          <div ref="orderTimePeriodChartDom" class="chart-container"></div>
        </div>
      </div>

    </Card>


    <Card class="card">
      <div>
        <h4>交易概况</h4>
        <div class="flex">
@@ -271,7 +284,7 @@
import refundRow from "./order/refundOrder";
import affixTime from "@/components/affix-time";
import * as echarts from 'echarts';
import {pvUvData,getOrderCount,getViewAndCompletionRateCount} from "../../api/orderStatistics";
import {pvUvData,getOrderCount,getViewAndCompletionRateCount,getOrderTimePeriod} from "../../api/orderStatistics";

export default {
  components: { orderRow, refundRow, affixTime },
@@ -282,6 +295,8 @@
      chart: null, //pvuv
      orderCountChart:null, //订单日趋势
      viewPrintChart:null,
      orderTimePeriodChart:null,

      currentType:"goods",
      currentLimit:10,
      // 统计数据
@@ -606,24 +621,40 @@
     const dates = [];
     const today = new Date();
     let days = 1;
     console.log(param.year)
     console.log(param.month)
     if(param.year !== null && param.year !== undefined && param.month !== null && param.month !== undefined && param.month !=='' ){
       // 当传入年份和月份时，生成该月份的所有日期
       const year = parseInt(param.year);
       const month = parseInt(param.month);
       // 获取该月的天数
       const daysInMonth = new Date(year, month, 0).getDate();

     // 确定天数逻辑不变
     if (param.searchType === "TODAY") {
       days = 1;
     } else if (param.searchType === "YESTERDAY") {
       days = 1;
     } else if (param.searchType === "LAST_SEVEN") {
       days = 7;
     } else if (param.searchType === "LAST_THIRTY") {
       days = 30;
       // 生成该月所有日期
       for (let day = 1; day <= daysInMonth; day++) {
         const date = new Date(year, month - 1, day); // 月份从0开始，所以要减1
         dates.push(this.formatDate(date, 'MM-dd'));
       }

     }else{
       // 确定天数逻辑不变
       if (param.searchType === "TODAY") {
         days = 1;
       } else if (param.searchType === "YESTERDAY") {
         days = 1;
       } else if (param.searchType === "LAST_SEVEN") {
         days = 7;
       } else if (param.searchType === "LAST_THIRTY") {
         days = 30;
       }
       for (let i = days - 1; i >= 0; i--) {
         const date = new Date(today);
         date.setDate(today.getDate() - i);
         dates.push(this.formatDate(date, 'MM-dd'));
       }
     }

     // 生成日期数组逻辑不变
     for (let i = days - 1; i >= 0; i--) {
       const date = new Date(today);
       date.setDate(today.getDate() - i);
       dates.push(this.formatDate(date, 'MM-dd'));
     }

     return dates;
   },

@@ -638,20 +669,29 @@
      if (this.orderCountChart){
        this.orderCountChart.resize()
      }
      if (this.orderTimePeriodChart){
        this.orderTimePeriodChart.resize();
      }
    },
    initChart(){
      this.chart = echarts.init(this.$refs.chartDom)
      this.viewPrintChart = echarts.init(this.$refs.viewPrintChartDom)
      this.orderCountChart = echarts.init(this.$refs.orderCountChartDom)
      this.orderTimePeriodChart = echarts.init(this.$refs.orderTimePeriodChartDom)

      this.updateChartData(this.orderParams)

      this.updateOrderCountChartDate(this.orderParams)

      let form = {...this.orderParams};
      console.log(this.currentType)
      console.log(this.currentLimit)
      form.currentType = this.currentType;
      form.currentLimit = this.currentLimit;
      console.log(form)
      this.updateViewAndCompletionRateData(form)

      this.updateOrderTimePeriodData(this.orderParams)
    },
    // 更新图表数据
    async updateChartData(param) {
@@ -660,7 +700,7 @@
      // 设置图表配置
      this.chart.setOption(this.getChartOption(this.getDates(param), pvData, uvData))
    },
// 获取图表配置项
    // 获取图表配置项
    // 图表配置项（恢复原始颜色）
    getChartOption(dates, pvData, uvData) {
      return {
@@ -791,7 +831,7 @@
        animationEasing: 'cubicOut'
      };
    },
// 生成pv/uv图表数据
    // 生成pv/uv图表数据
    async generateChartData(param) {
     // 1. 声明为async函数
      // 2. 使用await等待接口返回，确保数据获取后再继续
@@ -916,23 +956,23 @@
    },
    //-------------

//-------------浏览量，完播率，
    //-------------浏览量，完播率，
    handleLimitChange(limit) {
      if (this.currentLimit !== limit) {
        this.currentLimit = limit
        let from = {...this.orderParams}
        from.currentLimit = this.currentLimit;
        from.currentType = this.currentType;
        this.updateViewAndCompletionRateData(from) // 重新加载数据
        let form = {...this.orderParams}
        form.currentLimit = this.currentLimit;
        form.currentType = this.currentType;
        this.updateViewAndCompletionRateData(form) // 重新加载数据
      }
    },
    handleTypeChange(type) {
      if (this.currentType !== type){// 避免重复点击
        this.currentType = type // 更新当前类型
        let from = {...this.orderParams}
        from.currentLimit = this.currentLimit;
        from.currentType = this.currentType;
        this.updateViewAndCompletionRateData(from) // 重新加载数据
        let form = {...this.orderParams}
        form.currentLimit = this.currentLimit;
        form.currentType = this.currentType;
        this.updateViewAndCompletionRateData(form) // 重新加载数据
      }

    },
@@ -1050,9 +1090,159 @@
        ]
      };
    },


    //-------------
    //-------------浏览数据，下订单日期时间段分析
    async updateOrderTimePeriodData(param){
     const { viewData,countData,dateData} = await this.generateOrderTimePeriodChartData(param);
      this.orderTimePeriodChart.setOption(this.getOrderTimePeriodChartOption(viewData,countData,dateData));
    },
    async generateOrderTimePeriodChartData(param){
      let viewData= [];
      let countData =[];
      let dateData = [];
      try {
        const res = await getOrderTimePeriod(param); // 等待接口响应
        if (res.code === 200) {
          viewData = res.data.viewData;
          countData = res.data.countData
          dateData = res.data.dateData;
        }
      } catch (error) {
        console.error("接口调用失败", error);

      }
      return { viewData,countData,dateData}

    },
    getOrderTimePeriodChartOption(viewData,countData,dateData){
      return {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: { color: '#333' },
          formatter: (params) => {
            const date = params[0].name;
            const view = params.find(item => item.seriesName === '浏览数据')?.value || 0;
            const count= params.find(item => item.seriesName === '订单时间段')?.value || 0;
            // 优化：添加换行符转义，避免潜在格式问题（可选，不影响功能）
            return `<div class="font-medium">${date}</div>
                <div>浏览数据: <span style="color: #165DFF; font-weight: bold">${view.toLocaleString()}</span></div>
                <div>订单时间段: <span style="color: #00b42a; font-weight: bold">${count.toLocaleString()}</span></div>`;
          },
        },
        legend: {
          data: ['浏览数据', '订单时间段'],
          top: 0,
          textStyle: { color: '#666' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          top: '15%'
        },
        xAxis: {
          type: 'category',
          data: dateData,
          axisLine: { lineStyle: { color: '#eee' } },
          axisTick: { show: false },
          axisLabel: { interval: 'auto', rotate: 0, color: '#86909C' },
          splitLine: { show: false }
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { color: '#86909C', formatter: '{value}' },
          splitLine: { lineStyle: { color: '#f2f3f5' } },
          min: 0
        },
        series: [
          // PV折线（保留原始蓝色系，优化点线衔接）
          {
            name: '浏览数据',
            type: 'line',
            data: viewData,
            symbol: 'circle',
            symbolSize: 6, // 保留原有点大小
            emphasis: {
              symbolSize: 8,
              showSymbol: true
            },
            lineStyle: {
              width: 3, // 保留原有线宽
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#165DFF' }, // 原始PV主色
                { offset: 1, color: '#36CFC9' }  // 原始渐变辅助色
              ]),
              // 关键优化1：线条端点设为圆角，避免“切口”空白
              cap: 'round',
              // 关键优化2：线条拐角设为圆角，避免衔接间隙
              join: 'round',
              // 辅助：控制拐角圆角大小（与线宽匹配，避免溢出）
              miterLimit: 3
            },
            itemStyle: {
              color: '#165DFF', // 原始点颜色
              borderColor: '#fff', // 保留白色边框（增强层次感）
              // 关键优化3：减小边框宽度，避免遮挡线条导致断层
              borderWidth: 0 // 从2调整为1.5
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(22, 93, 255, 0.2)' }, // 原始填充色
                { offset: 1, color: 'rgba(22, 93, 255, 0)' }
              ])
            },
            smooth: true,
            showSymbol: true, // 保留你设置的“默认显示所有点”
          },
          // UV折线（保留原始绿色系，同PV优化逻辑）
          {
            name: '订单时间段',
            type: 'line',
            data: countData,
            symbol: 'circle',
            symbolSize: 6, // 保留原有点大小
            emphasis: {
              symbolSize: 8,
              showSymbol: true
            },
            lineStyle: {
              width: 3, // 保留原有线宽
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#00b42a' }, // 原始UV主色
                { offset: 1, color: '#72c140' }  // 原始渐变辅助色
              ]),
              // 同PV优化：端点圆角+拐角圆角
              cap: 'round',
              join: 'round',
              miterLimit: 3
            },
            itemStyle: {
              color: '#00b42a', // 原始点颜色
              borderColor: '#fff', // 保留白色边框
              // 同PV优化：减小边框宽度
              borderWidth: 0 // 从2调整为1.5
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0, 180, 42, 0.2)' }, // 原始填充色
                { offset: 1, color: 'rgba(0, 180, 42, 0)' }
              ])
            },
            smooth: true,
            showSymbol: true, // 保留“默认显示所有点”
          }
        ],
        animation: true,
        animationDuration: 1500,
        animationEasing: 'cubicOut'
      };
    },

    formatDate(date) {
      const month = date.getMonth() + 1; // 月份从0开始，需+1
@@ -1127,6 +1317,8 @@
      form.currentType = this.currentType;
      form.currentLimit = this.currentLimit;
      this.updateViewAndCompletionRateData(form)

      this.updateOrderTimePeriodData(this.orderParams)
    },

    // 实例化订单概览