| | |
| | | <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">--> |
| | | <!-- <!– 第一组:商品/视频(靠左) –>--> |
| | | <!-- <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> |
| | | <!-- <!– 第二组:前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="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"> |
| | |
| | | formatter:tooltipFormatter |
| | | }, |
| | | grid: { |
| | | left: '5%', // 视频类型左移,给完播率标签留空间 |
| | | right: '10%', |
| | | left: '4%', // 视频类型左移,给完播率标签留空间 |
| | | right: '12%', |
| | | bottom: '0', |
| | | top: '5%', |
| | | containLabel: true |
| | |
| | | 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) |
| | | }, |
| | | |
| | | // 实例化订单概览 |
| | |
| | | |
| | | mounted() { |
| | | console.log('ECharts 是否存在:', typeof echarts !== 'undefined'); // 应输出 true |
| | | this.initChart(); |
| | | // this.initChart(); |
| | | this.initBaseParams(); |
| | | window.addEventListener('resize', this.handleResize) |
| | | }, |