lin
414 lines
10 KiB
JavaScript
414 lines
10 KiB
JavaScript
import _ from '../../../commons/js/commons';
|
|
import * as echarts from '../../../ecCanvas/components/ec-canvas/echarts';
|
|
const app = getApp()
|
|
|
|
let BarChartData;
|
|
let Pie1ChartData;
|
|
let Pie2ChartData;
|
|
|
|
function BarChart(canvas, width, height, dpr) {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr // new
|
|
});
|
|
canvas.setChart(chart);
|
|
let option = BarChartData
|
|
chart.setOption(option);
|
|
chart.on('click',function(e){
|
|
console.log(e)
|
|
});
|
|
return chart;
|
|
}
|
|
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){
|
|
if(e.data.id>0){
|
|
let obj = {}
|
|
obj.id = e.data.id
|
|
_.eventBus.emit("customerstats",obj)
|
|
}
|
|
});
|
|
return chart;
|
|
}
|
|
function Pie2Chart(canvas, width, height, dpr) {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr // new
|
|
});
|
|
canvas.setChart(chart);
|
|
let option = Pie2ChartData
|
|
chart.setOption(option);
|
|
chart.on('click',function(e){
|
|
console.log(e)
|
|
});
|
|
return chart;
|
|
}
|
|
|
|
Page({
|
|
data: {
|
|
imgUrl: _.config.imgUrl,//静态图片路径
|
|
showPie1Chart:false,//是否显示Pie1图表
|
|
ecPie1:{},
|
|
showPie2Chart:false,//是否显示Pie2图表
|
|
ecPie2:{},
|
|
showBarChart:false,//是否显示Bar图表
|
|
ecBar:{},
|
|
Pie1title:'',
|
|
Pie2title:'',
|
|
Bartitle:'',
|
|
},
|
|
|
|
onLoad: function (options) {
|
|
for (let key in options) {
|
|
this.setData({
|
|
[key]: options[key]
|
|
})
|
|
}
|
|
|
|
this.getAppBizStats_customer()
|
|
this.getUserInfo()
|
|
|
|
//消息通讯
|
|
_.eventBus.on("customerstats", this, function(res){
|
|
let that = this;
|
|
let params = {};
|
|
params['id'] = res.id;
|
|
params['type'] = that.data.type;
|
|
params['province_id'] = that.data.province_id;
|
|
params['city_id'] = that.data.city_id;
|
|
params['s_time'] = that.data.s_date;
|
|
params['e_time'] = that.data.e_date;
|
|
|
|
_.apiQuery.getAppBizStats_customer_pid(params, that).then(res => {
|
|
if(that.data.Pie2title){
|
|
this.setData({
|
|
pie2noData:true,
|
|
})
|
|
}
|
|
|
|
this.setData({
|
|
Pie2title:res.data.title,
|
|
})
|
|
if(res.data.series_data.length==0){
|
|
this.setData({
|
|
pie2noData:true,
|
|
})
|
|
}else{
|
|
Pie2ChartData = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
bottom:'12%',
|
|
radius: ['0', '55%'],
|
|
avoidLabelOverlap: false,
|
|
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: []
|
|
}
|
|
]
|
|
};
|
|
|
|
Pie2ChartData.series[0].data = res.data.series_data
|
|
this.setData({
|
|
pie2noData:false,
|
|
showPie2Chart:true,
|
|
['ecPie2.onInit']:Pie2Chart,
|
|
pie2Bottom:res.data.bottom,
|
|
})
|
|
}
|
|
wx.stopPullDownRefresh()
|
|
});
|
|
})
|
|
},
|
|
|
|
//生命周期函数--监听页面卸载
|
|
onUnload: function () {
|
|
//卸载消息通讯 是否显示授权用户信息
|
|
_.eventBus.remove("customerstats",this);
|
|
},
|
|
|
|
//获取用户信息
|
|
getUserInfo(){
|
|
_.apiQuery.getUserInfo().then(res => {
|
|
this.setData({
|
|
userInfo: res
|
|
})
|
|
});
|
|
},
|
|
|
|
//选择日期
|
|
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_customer()
|
|
}
|
|
}
|
|
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_customer()
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
//客户数据
|
|
getAppBizStats_customer(){
|
|
this.setData({
|
|
showPie1Chart:false,
|
|
showPie2Chart:false,
|
|
showBarChart:false,
|
|
})
|
|
|
|
let params = {};
|
|
params['type'] = this.data.type;
|
|
params['s_time'] = this.data.s_date;
|
|
params['e_time'] = this.data.e_date;
|
|
_.apiQuery.getAppBizStats_customer(params).then(res => {
|
|
|
|
wx.setNavigationBarTitle({
|
|
title: res.data.title
|
|
})
|
|
|
|
this.setData({
|
|
Pie1title:res.data.pie1.title,
|
|
Pie2title:res.data.pie2?res.data.pie2.title:'',
|
|
Bartitle:res.data.bar.title,
|
|
})
|
|
|
|
if(res.data.pie1.series_data_1.length==0){
|
|
this.setData({
|
|
pie1noData:true,
|
|
})
|
|
}else{
|
|
Pie1ChartData = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
selectedMode: 'single',
|
|
radius: [0, '30%'],
|
|
label: {
|
|
position: 'inner',
|
|
fontSize: 10
|
|
},
|
|
labelBar: {
|
|
show: false
|
|
},
|
|
data: []
|
|
},
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
radius: ['45%', '65%'],
|
|
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.pie1.series_data_1
|
|
Pie1ChartData.series[1].data = res.data.pie1.series_data_2
|
|
this.setData({
|
|
pie1noData:false,
|
|
showPie1Chart:true,
|
|
['ecPie1.onInit']:Pie1Chart,
|
|
pie1Bottom:res.data.pie1.bottom,
|
|
})
|
|
}
|
|
|
|
if(res.data.bar){
|
|
BarChartData = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'value',
|
|
data: []
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: []
|
|
},
|
|
grid: {
|
|
top: '2%',
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '35',
|
|
containLabel: true
|
|
},
|
|
series: [
|
|
{
|
|
data: [],
|
|
type: 'bar',
|
|
top: 0,
|
|
bottom:'0',
|
|
}
|
|
]
|
|
};
|
|
|
|
let xAxis_data = res.data.bar.xAxis_data
|
|
let yAxis_data = []
|
|
xAxis_data.forEach(item => {
|
|
if(item.length > 6){
|
|
yAxis_data.push(item.substring(0,6)+'...')
|
|
}else{
|
|
yAxis_data.push(item)
|
|
}
|
|
})
|
|
|
|
BarChartData.yAxis.data = yAxis_data
|
|
BarChartData.series[0].data = res.data.bar.series_data
|
|
this.setData({
|
|
Barheight:120 + 60*(res.data.bar.xAxis_data.length),
|
|
Bartitle:res.data.bar.title,
|
|
showBarChart:true,
|
|
['ecBar.onInit']:BarChart,
|
|
barBottom:res.data.bar.bottom,
|
|
})
|
|
}
|
|
|
|
wx.stopPullDownRefresh()
|
|
});
|
|
},
|
|
|
|
//推送链接
|
|
pushLink(e) {
|
|
if(e.currentTarget.dataset.url){
|
|
_.$router.openUrlScheme(e.currentTarget.dataset.url)
|
|
}
|
|
},
|
|
|
|
//页面相关事件处理函数--监听用户下拉动作
|
|
onPullDownRefresh: function () {
|
|
this.getAppBizStats_customer()
|
|
},
|
|
|
|
}) |