小鱼开发
354 lines
8.8 KiB
JavaScript
354 lines
8.8 KiB
JavaScript
import _ from '../../../commons/js/commons';
|
|
import popularData from '../../../commons/js/lib/popularData';
|
|
import * as echarts from '../../../ecCanvas/components/ec-canvas/echarts';
|
|
const app = getApp()
|
|
|
|
let Pie1ChartData;
|
|
function Pie1Chart(canvas, width, height, dpr) {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr // new
|
|
});
|
|
canvas.setChart(chart);
|
|
let option = Pie1ChartData
|
|
chart.setOption(option);
|
|
chart.on('click',function(e){
|
|
console.log(e)
|
|
});
|
|
return chart;
|
|
}
|
|
|
|
Page({
|
|
data: {
|
|
imgUrl: _.config.imgUrl,//静态图片路径
|
|
showPie1Chart:false,//是否显示Pie1图表
|
|
ecPie1:{},
|
|
},
|
|
|
|
onLoad: function (options) {
|
|
for (let key in options) {
|
|
this.setData({
|
|
[key]: options[key]
|
|
})
|
|
}
|
|
this.getAppBizStats()
|
|
|
|
},
|
|
|
|
|
|
//选择日期
|
|
changeDate(e){
|
|
if(e.currentTarget.dataset.type=="s_date"){
|
|
let begin = new Date(e.detail.value).getTime();
|
|
let end = new Date(this.data.e_date).getTime();
|
|
let day = 0
|
|
if(end>=begin){
|
|
day = (end - begin)/(24*60*60*1000);
|
|
this.setData({
|
|
s_date: e.detail.value,
|
|
})
|
|
}
|
|
else{
|
|
day = (begin - end)/(24*60*60*1000);
|
|
let s_date = this.data.e_date
|
|
let e_date = e.detail.value
|
|
this.setData({
|
|
s_date,
|
|
e_date,
|
|
})
|
|
}
|
|
if (day > 365) {
|
|
wx.showToast({
|
|
title: '请选择一年时间内',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
else{
|
|
this.getAppBizStats()
|
|
}
|
|
}
|
|
if(e.currentTarget.dataset.type=="e_date"){
|
|
let begin = new Date(this.data.s_date).getTime();
|
|
let end = new Date(e.detail.value).getTime();
|
|
let day = 0
|
|
if(end>=begin){
|
|
day = (end - begin)/(24*60*60*1000);
|
|
this.setData({
|
|
e_date: e.detail.value,
|
|
})
|
|
}
|
|
else{
|
|
day = (begin - end)/(24*60*60*1000);
|
|
let e_date = this.data.s_date
|
|
let s_date = e.detail.value
|
|
this.setData({
|
|
s_date,
|
|
e_date,
|
|
})
|
|
}
|
|
if (day > 365) {
|
|
wx.showToast({
|
|
title: '请选择一年时间内',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
else{
|
|
this.getAppBizStats()
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
|
|
//订单数据
|
|
getAppBizStats(){
|
|
this.setData({
|
|
showPie1Chart:false,
|
|
})
|
|
|
|
let params = {};
|
|
if(this.data.type){
|
|
params['type'] = this.data.type;
|
|
}
|
|
params['id'] = this.data.id;
|
|
params['s_time'] = this.data.s_date;
|
|
params['e_time'] = this.data.e_date;
|
|
|
|
if(this.data.from=='customer'){
|
|
_.apiQuery.getAppBizStats_customer_pid(params).then(res => {
|
|
|
|
wx.setNavigationBarTitle({
|
|
title: res.data.title
|
|
})
|
|
|
|
this.setData({
|
|
Pie1title:res.data.title,
|
|
})
|
|
if(res.data.series_data.length==0){
|
|
this.setData({
|
|
pie1noData:true,
|
|
})
|
|
}else{
|
|
Pie1ChartData = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
bottom:'15%',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
labelLine: {
|
|
fontSize:5,
|
|
length:10
|
|
},
|
|
label: {
|
|
formatter: '{b| {b} }{abg|}\n{hr|}\n{c| {c}({d}%) }',
|
|
backgroundColor: '#F6F8FC',
|
|
borderColor: '#8C8D8E',
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
rich: {
|
|
hr: {
|
|
borderColor: '#8C8D8E',
|
|
width: '100%',
|
|
borderWidth: 1,
|
|
height: 0
|
|
},
|
|
b: {
|
|
color: '#4C5058',
|
|
fontSize:10,
|
|
lineHeight:20,
|
|
align: 'center',
|
|
},
|
|
c: {
|
|
color: '#4C5058',
|
|
fontSize:8,
|
|
lineHeight:20,
|
|
align: 'center',
|
|
},
|
|
}
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
};
|
|
|
|
Pie1ChartData.series[0].data = res.data.series_data
|
|
this.setData({
|
|
pie1noData:false,
|
|
showPie1Chart:true,
|
|
['ecPie1.onInit']:Pie1Chart,
|
|
})
|
|
}
|
|
wx.stopPullDownRefresh()
|
|
|
|
});
|
|
}else if(this.data.from=='order'){
|
|
_.apiQuery.getAppBizStats_order_series(params).then(res => {
|
|
|
|
wx.setNavigationBarTitle({
|
|
title: res.data.title
|
|
})
|
|
|
|
// this.setData({
|
|
// Pie1title:res.data.title,
|
|
// })
|
|
if(res.data.series_data.length==0){
|
|
this.setData({
|
|
pie1noData:true,
|
|
})
|
|
}else{
|
|
Pie1ChartData = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
bottom:'15%',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
labelLine: {
|
|
fontSize:5,
|
|
length:10
|
|
},
|
|
label: {
|
|
formatter: '{b| {b} }{abg|}\n{hr|}\n{c| {c}({d}%) }',
|
|
backgroundColor: '#F6F8FC',
|
|
borderColor: '#8C8D8E',
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
rich: {
|
|
hr: {
|
|
borderColor: '#8C8D8E',
|
|
width: '100%',
|
|
borderWidth: 1,
|
|
height: 0
|
|
},
|
|
b: {
|
|
color: '#4C5058',
|
|
fontSize:10,
|
|
lineHeight:20,
|
|
align: 'center',
|
|
},
|
|
c: {
|
|
color: '#4C5058',
|
|
fontSize:8,
|
|
lineHeight:20,
|
|
align: 'center',
|
|
},
|
|
}
|
|
},
|
|
data: []
|
|
}
|
|
]
|
|
};
|
|
|
|
Pie1ChartData.series[0].data = res.data.series_data
|
|
this.setData({
|
|
pie1noData:false,
|
|
showPie1Chart:true,
|
|
['ecPie1.onInit']:Pie1Chart,
|
|
})
|
|
}
|
|
wx.stopPullDownRefresh()
|
|
|
|
});
|
|
}
|
|
},
|
|
|
|
//页面相关事件处理函数--监听用户下拉动作
|
|
onPullDownRefresh: function () {
|
|
this.getAppBizStats()
|
|
},
|
|
|
|
})
|
|
|
|
function getPie1Option() {
|
|
return {
|
|
// tooltip: {
|
|
// trigger: 'item',
|
|
// formatter: '{b}: {c} ({d}%)'
|
|
// },
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
bottom:'10%',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 10,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false,
|
|
position: 'center'
|
|
},
|
|
labelLine: {
|
|
fontSize:5,
|
|
length:10
|
|
},
|
|
label: {
|
|
formatter: '{b| {b} }{abg|}\n{hr|}\n{c| {c}({d}%) }',
|
|
backgroundColor: '#F6F8FC',
|
|
borderColor: '#8C8D8E',
|
|
borderWidth: 1,
|
|
borderRadius: 4,
|
|
rich: {
|
|
hr: {
|
|
borderColor: '#8C8D8E',
|
|
width: '100%',
|
|
borderWidth: 1,
|
|
height: 0
|
|
},
|
|
b: {
|
|
color: '#4C5058',
|
|
fontSize:10,
|
|
lineHeight:20,
|
|
align: 'center',
|
|
},
|
|
c: {
|
|
color: '#4C5058',
|
|
fontSize:8,
|
|
lineHeight:20,
|
|
align: 'center',
|
|
},
|
|
}
|
|
},
|
|
data: [
|
|
{ value: 48, name: '转介绍' },
|
|
{ value: 35, name: '网络推广' },
|
|
{ value: 30, name: '外展外拓' },
|
|
{ value: 21, name: '自媒体' },
|
|
]
|
|
}
|
|
]
|
|
};
|
|
} |