|
|
@@ -0,0 +1,240 @@
|
|
|
+// pages/channelRanking/index.ts
|
|
|
+const chartCatch: antvChart = {
|
|
|
+ toufangfenxiChart: undefined
|
|
|
+}
|
|
|
+let { getChannelRank } = require('../../utils/api')
|
|
|
+Page({
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面的初始数据
|
|
|
+ */
|
|
|
+ data: {
|
|
|
+ array: [
|
|
|
+ {
|
|
|
+ key: "fee",
|
|
|
+ name: "费用",
|
|
|
+ unit: "元",
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "timeSize",
|
|
|
+ name: "时长",
|
|
|
+ unit: "分",
|
|
|
+ type: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "pinci",
|
|
|
+ name: "频次",
|
|
|
+ unit: "次",
|
|
|
+ type: 3,
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ list: [],
|
|
|
+ array_act: 0,
|
|
|
+ start: "",
|
|
|
+ end: '',
|
|
|
+ onInitChart: undefined,
|
|
|
+ height: 0
|
|
|
+ },
|
|
|
+
|
|
|
+ startTimeChange(e: any) {
|
|
|
+ this.setData({
|
|
|
+ start: e.detail.value
|
|
|
+ },()=> this.getselect())
|
|
|
+ },
|
|
|
+ endTimeChange(e: any) {
|
|
|
+ this.setData({
|
|
|
+ end: e.detail.value
|
|
|
+ },()=> this.getselect())
|
|
|
+ },
|
|
|
+
|
|
|
+ bindPickerChange(e: any) {
|
|
|
+ this.setData({
|
|
|
+ array_act: e.detail.value
|
|
|
+ },()=> this.getselect())
|
|
|
+ },
|
|
|
+ getselect(){
|
|
|
+ let s = new Date(this.data.start), e= new Date(this.data.end);
|
|
|
+ if(e.getTime() - s.getTime() < 0) return wx.showToast({
|
|
|
+ title: "时间选择错误",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
+ const p: any = {
|
|
|
+ start: this.data.start,
|
|
|
+ end: this.data.end,
|
|
|
+ dataType: this.data.array[this.data.array_act].type
|
|
|
+ }
|
|
|
+ getChannelRank(p).then((res: any) => {
|
|
|
+ p.onInitChart = (F2: any, config: any) => {
|
|
|
+ if (chartCatch.toufangfenxiChart !== undefined) chartCatch.toufangfenxiChart.destroy(), chartCatch.toufangfenxiChart = undefined;
|
|
|
+ chartCatch.toufangfenxiChart = new F2.Chart(config);
|
|
|
+ const data = res|| [];
|
|
|
+ if (!chartCatch.toufangfenxiChart) return
|
|
|
+ chartCatch.toufangfenxiChart.legend(false)
|
|
|
+ const key = this.data.array[this.data.array_act].key;
|
|
|
+ let dataP:any = {};
|
|
|
+ dataP[key] = {
|
|
|
+ tickCount: 5
|
|
|
+ }
|
|
|
+ chartCatch.toufangfenxiChart.source(data.sort((a:any, b:any)=>a[key] - b[key]), dataP);
|
|
|
+ chartCatch.toufangfenxiChart.coord({
|
|
|
+ transposed: true
|
|
|
+ });
|
|
|
+ chartCatch.toufangfenxiChart.tooltip({
|
|
|
+ triggerOn: ['touchstart', 'touchmove'],
|
|
|
+ onShow: (ev: tooltipOnShow) => {
|
|
|
+ let num:string = ev.items[0].value;
|
|
|
+ if(Number(num) > 100000000) num = (Number(num) / 100000000).toFixed(2) + '亿';
|
|
|
+ else if(Number(num) > 10000) num = (Number(num) / 10000).toFixed(2) + '万';
|
|
|
+ ev.items[0].name = ev.items[0].title
|
|
|
+ ev.items[0].value = num + this.data.array[this.data.array_act].unit
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chartCatch.toufangfenxiChart.axis(key, {
|
|
|
+ label: (text: string, index: number, total: number) => {
|
|
|
+ let align = 'center';
|
|
|
+ if (index === 0) align = 'left';
|
|
|
+ if (index === total - 1) align = 'right';
|
|
|
+ let num:string|number = Number(text);
|
|
|
+ if(num > 100000000) num = num / 100000000 + '亿';
|
|
|
+ else if(num > 10000) num = num / 10000 + '万';
|
|
|
+ return {
|
|
|
+ textAlign: align,
|
|
|
+ text: num
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chartCatch.toufangfenxiChart.interval()
|
|
|
+ .position('channelName*' + key)
|
|
|
+ .color('#409eff')
|
|
|
+ .adjust('stack');
|
|
|
+ chartCatch.toufangfenxiChart.render();
|
|
|
+ return chartCatch.toufangfenxiChart;
|
|
|
+ }
|
|
|
+ p.list = (res || [])
|
|
|
+ p.height = (res || []).length < 2 ? 20 :(res || []).length * 5;
|
|
|
+ this.setData(p)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
+ */
|
|
|
+ onLoad() {
|
|
|
+ const nowDate = new Date();
|
|
|
+ const date = new Date(nowDate.getTime() - 86400000);
|
|
|
+ let month: string | number = date.getMonth() + 1;
|
|
|
+ let day: string | number = date.getDate();
|
|
|
+ month > 9 ? "" : month = '0' + month;
|
|
|
+ day > 9 ? "" : day = '0' + day;
|
|
|
+ const p: any = {
|
|
|
+ start: [date.getFullYear(), month, day].join("-"),
|
|
|
+ end: [date.getFullYear(), month, day].join("-"),
|
|
|
+ dataType: this.data.array[this.data.array_act].type
|
|
|
+ }
|
|
|
+ getChannelRank(p).then((res: any) => {
|
|
|
+ p.onInitChart = (F2: any, config: any) => {
|
|
|
+ if (chartCatch.toufangfenxiChart !== undefined) chartCatch.toufangfenxiChart.destroy(), chartCatch.toufangfenxiChart = undefined;
|
|
|
+ chartCatch.toufangfenxiChart = new F2.Chart(config);
|
|
|
+ const data = res|| [];
|
|
|
+ if (!chartCatch.toufangfenxiChart) return
|
|
|
+ chartCatch.toufangfenxiChart.legend(false)
|
|
|
+ const key = this.data.array[this.data.array_act].key;
|
|
|
+ let dataP:any = {};
|
|
|
+ dataP[key] = {
|
|
|
+ tickCount: 5
|
|
|
+ }
|
|
|
+ chartCatch.toufangfenxiChart.source(data.sort((a:any, b:any)=>a[key] - b[key]), dataP);
|
|
|
+ chartCatch.toufangfenxiChart.coord({
|
|
|
+ transposed: true
|
|
|
+ });
|
|
|
+ chartCatch.toufangfenxiChart.tooltip({
|
|
|
+ triggerOn: ['touchstart', 'touchmove'],
|
|
|
+ onShow: (ev: tooltipOnShow) => {
|
|
|
+ let num:string = ev.items[0].value;
|
|
|
+ if(Number(num) > 100000000) num = (Number(num) / 100000000).toFixed(2) + '亿';
|
|
|
+ else if(Number(num) > 10000) num = (Number(num) / 10000).toFixed(2) + '万';
|
|
|
+ ev.items[0].name = ev.items[0].title
|
|
|
+ ev.items[0].value = num + this.data.array[this.data.array_act].unit
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chartCatch.toufangfenxiChart.axis(key, {
|
|
|
+ label: (text: string, index: number, total: number) => {
|
|
|
+ let align = 'center';
|
|
|
+ if (index === 0) align = 'left';
|
|
|
+ if (index === total - 1) align = 'right';
|
|
|
+ let num:string|number = Number(text);
|
|
|
+ if(num > 100000000) num = num / 100000000 + '亿';
|
|
|
+ else if(num > 10000) num = num / 10000 + '万';
|
|
|
+ return {
|
|
|
+ textAlign: align,
|
|
|
+ text: num
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chartCatch.toufangfenxiChart.interval()
|
|
|
+ .position('channelName*' + key)
|
|
|
+ .color('#409eff')
|
|
|
+ .adjust('stack');
|
|
|
+ chartCatch.toufangfenxiChart.render();
|
|
|
+ return chartCatch.toufangfenxiChart;
|
|
|
+ }
|
|
|
+ p.list = (res || [])
|
|
|
+ p.height = (res || []).length < 2 ? 20 :(res || []).length * 5;
|
|
|
+ this.setData(p)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ upLine() {
|
|
|
+ if (chartCatch.toufangfenxiChart === undefined) return
|
|
|
+ chartCatch.toufangfenxiChart.clear()
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
+ */
|
|
|
+ onReady() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
+ */
|
|
|
+ onShow() {
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面隐藏
|
|
|
+ */
|
|
|
+ },
|
|
|
+ onHide() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面卸载
|
|
|
+ */
|
|
|
+ onUnload() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面相关事件处理函数--监听用户下拉动作
|
|
|
+ */
|
|
|
+ onPullDownRefresh() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面上拉触底事件的处理函数
|
|
|
+ */
|
|
|
+ onReachBottom() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 用户点击右上角分享
|
|
|
+ */
|
|
|
+ onShareAppMessage() {
|
|
|
+
|
|
|
+ }
|
|
|
+})
|
liyongli