zxl
1 天以前 4352db77e69535ad829d7ad24efd2d66b4b97d09
manager/src/views/statistics/order.vue
@@ -5,85 +5,85 @@
        <affixTime @selected="clickBreadcrumb" />
      </Card>
    </Affix>
    <Card class="card">
        <div class="chart-wrapper">
          <div class="chart-header">
            <h2>PV/UV 趋势图</h2>
          </div>
          <div ref="chartDom" class="chart-container"></div>
        </div>
    </Card>
    <Card class="card">
      <div class="my-chart-container">
        <div class="chart-wrapper" style="height: 800px">
          <div class="chart-header">
            <h2>商品/视频浏览量完播率 趋势图</h2>
          </div>
          <div class="button-group-wrapper">
            <!-- 第一组:商品/视频(靠左) -->
            <ButtonGroup>
              <Button
                :type="currentType === 'goods' ? 'primary' : 'default'"
                @click="handleTypeChange('goods')"
              >
                商品
              </Button>
              <Button
                :type="currentType === 'video' ? 'primary' : 'default'"
                @click="handleTypeChange('video')"
              >
                视频
              </Button>
            </ButtonGroup>
            <!-- 第二组:前10/前20/前30(靠右) -->
            <ButtonGroup>
              <Button
                :type="currentLimit === 10 ? 'success' : 'default'"
                @click="handleLimitChange(10)"
              >
                前10
              </Button>
              <Button
                :type="currentLimit === 20 ? 'success' : 'default'"
                @click="handleLimitChange(20)"
              >
                前20
              </Button>
              <Button
                :type="currentLimit === 30 ? 'success' : 'default'"
                @click="handleLimitChange(30)"
              >
                前30
              </Button>
            </ButtonGroup>
          </div>
          <div ref="viewPrintChartDom" class="view-chart-container"></div>
        </div>
      </div>
    </Card>
    <Card class="card">
      <div class="my-chart-container">
        <div class="chart-wrapper">
          <div class="chart-header">
            <h2>订单增长 趋势图</h2>
          </div>
          <div ref="orderCountChartDom" class="chart-container"></div>
        </div>
      </div>
    </Card>
<!--    <Card class="card">-->
<!--        <div class="chart-wrapper">-->
<!--          <div class="chart-header">-->
<!--            <h2>PV/UV 趋势图</h2>-->
<!--          </div>-->
<!--          <div ref="chartDom" class="chart-container"></div>-->
<!--        </div>-->
<!--    </Card>-->
<!--    <Card class="card">-->
<!--      <div class="my-chart-container">-->
<!--        <div class="chart-wrapper" style="height: 800px">-->
<!--          <div class="chart-header">-->
<!--            <h2>商品/视频浏览量完播率 趋势图</h2>-->
<!--          </div>-->
<!--          <div class="button-group-wrapper">-->
<!--            &lt;!&ndash; 第一组:商品/视频(靠左) &ndash;&gt;-->
<!--            <ButtonGroup>-->
<!--              <Button-->
<!--                :type="currentType === 'goods' ? 'primary' : 'default'"-->
<!--                @click="handleTypeChange('goods')"-->
<!--              >-->
<!--                商品-->
<!--              </Button>-->
<!--              <Button-->
<!--                :type="currentType === 'video' ? 'primary' : 'default'"-->
<!--                @click="handleTypeChange('video')"-->
<!--              >-->
<!--                视频-->
<!--              </Button>-->
<!--            </ButtonGroup>-->
    <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>
<!--            &lt;!&ndash; 第二组:前10/前20/前30(靠右) &ndash;&gt;-->
<!--            <ButtonGroup>-->
<!--              <Button-->
<!--                :type="currentLimit === 10 ? 'success' : 'default'"-->
<!--                @click="handleLimitChange(10)"-->
<!--              >-->
<!--                前10-->
<!--              </Button>-->
<!--              <Button-->
<!--                :type="currentLimit === 20 ? 'success' : 'default'"-->
<!--                @click="handleLimitChange(20)"-->
<!--              >-->
<!--                前20-->
<!--              </Button>-->
<!--              <Button-->
<!--                :type="currentLimit === 30 ? 'success' : 'default'"-->
<!--                @click="handleLimitChange(30)"-->
<!--              >-->
<!--                前30-->
<!--              </Button>-->
<!--            </ButtonGroup>-->
<!--          </div>-->
<!--          <div ref="viewPrintChartDom" class="view-chart-container"></div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </Card>-->
<!--    <Card class="card">-->
<!--      <div class="my-chart-container">-->
<!--        <div class="chart-wrapper">-->
<!--          <div class="chart-header">-->
<!--            <h2>订单增长 趋势图</h2>-->
<!--          </div>-->
<!--          <div ref="orderCountChartDom" class="chart-container"></div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </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>-->
    <Card class="card">
@@ -1026,8 +1026,8 @@
          formatter:tooltipFormatter
        },
        grid: {
          left: '5%', // 视频类型左移,给完播率标签留空间
          right: '10%',
          left: '4%', // 视频类型左移,给完播率标签留空间
          right: '12%',
          bottom: '0',
          top: '5%',
          containLabel: true
@@ -1310,15 +1310,16 @@
      this.refundParams.pageSize = 10
      //更新表格
      this.updateChartData(this.orderParams)
      this.updateOrderCountChartDate(this.orderParams)
      let form = {...this.orderParams};
      form.currentType = this.currentType;
      form.currentLimit = this.currentLimit;
      this.updateViewAndCompletionRateData(form)
      this.updateOrderTimePeriodData(this.orderParams)
      // this.updateChartData(this.orderParams)
      // this.updateOrderCountChartDate(this.orderParams)
      //
      // let form = {...this.orderParams};
      // form.currentType = this.currentType;
      // form.currentLimit = this.currentLimit;
      // this.updateViewAndCompletionRateData(form)
      //
      // this.updateOrderTimePeriodData(this.orderParams)
    },
    // 实例化订单概览
@@ -1377,7 +1378,7 @@
  mounted() {
    console.log('ECharts 是否存在:', typeof echarts !== 'undefined'); // 应输出 true
    this.initChart();
    // this.initChart();
    this.initBaseParams();
    window.addEventListener('resize', this.handleResize)
  },