123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340 |
- <template>
- <view class="content">
- <view class="flex-y-center header-title">
- <image class="title-icon" src="../../static/images/total.png" mode=""></image>
- <view class="">
- {{$test.$test}}总次数
- </view>
- </view>
- <view class="table">
- <view class="table-tr">
- <navigator v-for="(item,index) of type_data" :key='index' class="table-td" url="agent-list">
- <view class="table-td-num">
- {{item.count}}
- </view>
- <view class="">{{item.type==1?'收款码'+$test.$test:item.type==2?'公众号'+$test.$test:item.type==3?'文章'+$test.$test:item.type==4?'普通二维码'+$test.$test:
- item.type==6?'视频'+$test.$test:''}}</view>
- </navigator>
- </view>
- </view>
- <view class="flex-y-center header-title">
- <image class="title-icon" src="../../static/images/total1.png" mode=""></image>
- <view class="">
- 成功{{$test.$test}}次数统计
- </view>
- </view>
- <view class="header-pof">
- <liuyuno-tabs :tabData="tabs" :defaultIndex="defaultIndex" @tabClick='tabClick' />
- </view>
- <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
- <view class="qiun-title-dot-light">基本区域图</view>
- </view>
- <view class="qiun-charts">
- <!--#ifdef MP-ALIPAY -->
- <canvas canvas-id="canvasArea" id="canvasArea" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
- :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA" ></canvas>
- <!--#endif-->
- <!--#ifndef MP-ALIPAY -->
- <canvas canvas-id="canvasArea" id="canvasArea" class="charts" disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
- <!--#endif-->
- </view>
- </view>
- </template>
- <script>
- import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
- import uCharts from '@/components/u-charts/u-charts.min.js';
- import {
- isJSON
- } from '@/static/js/checker.js';
- var _self;
- var canvaArea = null;
- export default {
- components: {
- liuyunoTabs
- },
- data() {
- return {
- tabs: [
- "近7日统计",
- "近30日统计",
- ],
- defaultIndex: 0,
- cWidth: '',
- cHeight: '',
- pixelRatio: 1,
- textarea: '',
- type_data: [],
- $test:this.$test.$test,
- }
- },
- onLoad() {
- _self = this;
- uni.setNavigationBarTitle({
- title:`${this.$test.$test}统计`
- })
- //#ifdef MP-ALIPAY
- uni.getSystemInfo({
- success: function(res) {
- if (res.pixelRatio > 1) {
- //正常这里给2就行,如果pixelRatio=3性能会降低一点
- //_self.pixelRatio =res.pixelRatio;
- _self.pixelRatio = 2;
- }
- }
- });
- //#endif
- this.cWidth = uni.upx2px(750);
- this.cHeight = uni.upx2px(500);
- this.getServerData();
- },
- methods: {
- tabClick(e) {
- // console.log(e)
- this.defaultIndex = e;
-
- let Area = {
- categories: [],
- series: []
- };
-
- let categories = [],
- series = [],
- data = [];
- if (this.defaultIndex == 1) {
- for (var i of this.figure_data2) {
- categories.push(i.date)
- data.push(i.count)
- }
- } else {
- for (var i of this.figure_data) {
- categories.push(i.date)
- data.push(i.count)
- }
- }
- series.push({
- color: "#facc14",
- data: data,
- name: "当日时段分布",
- breadcrumb: { show: false}
- })
-
- // console.log(categories, series, "data")
- Area.categories = categories;
- Area.series = series;
- _self.showArea("canvasArea", Area);
- },
- getServerData() {
- this.request({
- url: "exchange/userStatistics",
- data: {
- token: uni.getStorageSync("token"),
- },
- showLoading: true,
- }).then(res => {
- if (res.code === '200') {
-
- this.type_data = res.data.type_data;
- this.figure_data = res.data.figure_data;
- this.figure_data2 = res.data.figure_data2;
-
- let Area = {
- categories: [],
- series: []
- };
- let categories = [],
- series = [],
- data = [];
- for (var i of this.figure_data) {
- categories.push(i.date)
- data.push(i.count)
- }
- series.push({
- color: "#facc14",
- data: data,
- name: "当日时段分布",
- })
- Area.categories = categories;
- Area.series = series;
- _self.showArea("canvasArea", Area);
- }
- }).catch((res) => {});
- },
- showArea(canvasId, chartData) {
- canvaArea = new uCharts({
- // #ifdef H5
- $this: _self,
- // #endif
- canvasId: canvasId,
- type: 'area',
- fontSize: 11,
- padding: [10, 15, 10, 15],
- legend: {
- show: false,
- position: 'top',
- float: 'center',
- itemGap: 30,
- padding: 5,
- lineHeight: 18,
- margin: 0,
- },
- dataLabel: false,
- dataPointShape: true,
- background: '#FFFFFF',
- pixelRatio: _self.pixelRatio,
- categories: chartData.categories,
- series: chartData.series,
- animation: true,
- enableScroll: true,//开启图表拖拽功能
- xAxis: {
- type: 'grid',
- gridColor: '#CCCCCC',
- gridType: 'dash',
- dashLength: 8,
- itemCount:5,
- scrollShow:true,
- // 新增是否显示滚动条,默认false
- scrollAlign:'left',
- scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
- scrollColor:'#DEE7F7',//默认为 #A6A6A6}
- //滚动条初始位置
- },
- yAxis: {
- gridType: 'dash',
- gridColor: '#CCCCCC',
- dashLength: 8,
- splitNumber: 5,
- format:(val)=>{return val.toFixed(0)}
- },
- width: _self.cWidth * _self.pixelRatio,
- height: _self.cHeight * _self.pixelRatio,
- extra: {
- area: {
- type: 'curve',
- opacity: 0.2,
- addLine: true,
- width: 2,
- gradient: false
- }
- }
- });
- },
-
- touchLineA(e){
- canvaArea.scrollStart(e);
- },
- moveLineA(e) {
- canvaArea.scroll(e);
- },
- touchEndLineA(e) {
- canvaArea.scrollEnd(e);
- //下面是toolTip事件,如果滚动后不需要显示,可不填写
- canvaArea.showToolTip(e, {
- format: function (item, category) {
- return category + ' ' + item.name + ':' + item.data
- }
- });
- },
- }
- }
- </script>
- <style>
- page {
- background: #F5F7FA;
- }
- .header-title {
- height: 101rpx;
- padding: 0 40rpx;
- border-bottom: 1rpx solid #F1F1F1;
- background: #FFFFFF;
- }
- .title-icon {
- width: 40rpx;
- height: 40rpx;
- margin-right: 20rpx;
- }
- .table {
- display: table;
- width: 100%;
- border-collapse: collapse;
- box-sizing: border-box;
- background: #FFFFFF;
- }
- .table-tr {
- /* display: ; */
- /* height: 92rpx; */
- }
- .table-th {
- width: 33%;
- font-weight: bold;
- border: 1rpx solid #FAFAFA;
- text-align: center;
- vertical-align: middle;
- }
- .table-td {
- width: 33%;
- border: 1rpx solid #FAFAFA;
- text-align: center;
- vertical-align: middle;
- background: #fff;
- font-size: 27rpx;
- color: #666666;
- padding: 62rpx 0;
- width: 33%;
- display: inline-block;
- }
- .table-td .table-td-num {
- font-size: 40rpx;
- font-weight: 500;
- color: #ffa024;
- }
- .qiun-title-dot-light {
- padding: 20rpx 40rpx;
- background: #FFFFFF;
- }
- /*样式的width和height一定要与定义的cWidth和cHeight相对应*/
- .qiun-charts {
- width: 750upx;
- height: 500upx;
- background-color: #FFFFFF;
- }
- .charts {
- width: 750upx;
- height: 500upx;
- background-color: #FFFFFF;
- }
- </style>
|