小鱼开发
566 lines
14 KiB
JavaScript
566 lines
14 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 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.type = 2
|
|
obj.id = e.data.id
|
|
_.eventBus.emit("orderstats",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){
|
|
if(e.data.id>0){
|
|
let obj = {}
|
|
obj.id = e.data.id
|
|
_.eventBus.emit("orderstats",obj)
|
|
}
|
|
});
|
|
return chart;
|
|
}
|
|
|
|
Page({
|
|
data: {
|
|
imgUrl: _.config.imgUrl,//静态图片路径
|
|
showPie1Chart:false,//是否显示Pie1图表
|
|
ecPie1:{},
|
|
showPie2Chart:false,//是否显示Pie2图表
|
|
ecPie2:{},
|
|
showBarChart:false,//是否显示Bar图表
|
|
ecBar:{},
|
|
},
|
|
|
|
onLoad: function (options) {
|
|
for (let key in options) {
|
|
this.setData({
|
|
[key]: options[key]
|
|
})
|
|
}
|
|
|
|
// popularData.getDateLater(0,0).then(res => {
|
|
// this.setData({
|
|
// s_date:res[0],
|
|
// e_date:res[1],
|
|
// current_date:res[1],
|
|
// })
|
|
// })
|
|
|
|
this.getAppBizStats_order()
|
|
|
|
let that = this
|
|
//消息通讯 是否显示授权用户信息按钮
|
|
_.eventBus.on("orderstats", this, function(res){
|
|
|
|
let url = '/pages/storeData/subData/index'
|
|
if(res.type == 2){
|
|
url = url+'?from=customer&type=' + res.type + '&id=' + res.id + '&s_date=' + that.data.s_date + '&e_date=' + that.data.e_date + '¤t_date=' + that.data.current_date
|
|
}else{
|
|
url = url+'?from=order&id=' + res.id + '&s_date=' + that.data.s_date + '&e_date=' + that.data.e_date + '¤t_date=' + that.data.current_date
|
|
}
|
|
_.$router.openUrlScheme(url)
|
|
|
|
})
|
|
|
|
},
|
|
|
|
//生命周期函数--监听页面卸载
|
|
onUnload: function () {
|
|
//卸载消息通讯 是否显示授权用户信息
|
|
_.eventBus.remove("orderstats",this);
|
|
},
|
|
|
|
|
|
//选择日期
|
|
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_order()
|
|
}
|
|
}
|
|
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_order()
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
//订单数据
|
|
getAppBizStats_order(){
|
|
this.setData({
|
|
showPie1Chart:false,
|
|
showPie2Chart:false,
|
|
showBarChart:false,
|
|
})
|
|
|
|
let params = {};
|
|
params['s_time'] = this.data.s_date;
|
|
params['e_time'] = this.data.e_date;
|
|
_.apiQuery.getAppBizStats_order(params).then(res => {
|
|
|
|
wx.setNavigationBarTitle({
|
|
title: res.data.title
|
|
})
|
|
|
|
this.setData({
|
|
Pie1title:res.data.pie1.title,
|
|
Pie2title:res.data.pie2.title,
|
|
Bartitle:res.data.bar.title,
|
|
})
|
|
// Pie1ChartData = getPie1Option()
|
|
if(res.data.pie1.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.pie1.series_data
|
|
this.setData({
|
|
pie1noData:false,
|
|
showPie1Chart:true,
|
|
['ecPie1.onInit']:Pie1Chart,
|
|
pie1Bottom:res.data.pie1.bottom,
|
|
})
|
|
}
|
|
|
|
// Pie2ChartData = getPie2Option()
|
|
if(res.data.pie2.series_data.length==0){
|
|
this.setData({
|
|
pie2noData:true,
|
|
})
|
|
}else{
|
|
Pie2ChartData = {
|
|
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: []
|
|
}
|
|
]
|
|
};
|
|
Pie2ChartData.series[0].data = res.data.pie2.series_data_1
|
|
this.setData({
|
|
pie2noData:false,
|
|
showPie2Chart:true,
|
|
['ecPie2.onInit']:Pie2Chart,
|
|
pie2Bottom:res.data.pie2.bottom,
|
|
//pie2:res.data.pie2,
|
|
})
|
|
}
|
|
|
|
//BarChartData = getBarOption()
|
|
BarChartData = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
top: '1%',
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '1%',
|
|
containLabel: true
|
|
},
|
|
calculable: true,
|
|
xAxis: {
|
|
type: 'value',
|
|
data: []
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: []
|
|
},
|
|
series: []
|
|
};
|
|
|
|
BarChartData.yAxis.data = res.data.bar.xAxis_data
|
|
BarChartData.series = res.data.bar.series
|
|
this.setData({
|
|
Barheight:100 + 100*(res.data.bar.xAxis_data.length),
|
|
showBarChart:true,
|
|
['ecBar.onInit']:BarChart,
|
|
})
|
|
|
|
wx.stopPullDownRefresh()
|
|
|
|
});
|
|
},
|
|
|
|
//推送链接
|
|
pushLink(e) {
|
|
if(e.currentTarget.dataset.url){
|
|
_.$router.openUrlScheme(e.currentTarget.dataset.url)
|
|
}
|
|
},
|
|
|
|
//页面相关事件处理函数--监听用户下拉动作
|
|
onPullDownRefresh: function () {
|
|
this.getAppBizStats_order()
|
|
},
|
|
|
|
})
|
|
|
|
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: '自媒体' },
|
|
]
|
|
}
|
|
]
|
|
};
|
|
}
|
|
|
|
function getPie2Option() {
|
|
return {
|
|
tooltip: {
|
|
fontSize:10,
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Access From',
|
|
type: 'pie',
|
|
selectedMode: 'single',
|
|
radius: [0, '30%'],
|
|
label: {
|
|
position: 'inner',
|
|
fontSize: 10
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 258, name:'成交',selected:true},
|
|
{ value: 77, name: '退定' },
|
|
]
|
|
},
|
|
{
|
|
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: [
|
|
{ value: 48, name: '东风EV' },
|
|
{ value: 35, name: '岚图' },
|
|
{ value: 30, name: '哪吒' },
|
|
{ value: 21, name: '领跑' },
|
|
]
|
|
},
|
|
]
|
|
};
|
|
}
|
|
|
|
function getBarOption() {
|
|
|
|
return{
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
top: '8%',
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '5%',
|
|
containLabel: true
|
|
},
|
|
calculable: true,
|
|
xAxis: {
|
|
type: 'value',
|
|
data: []
|
|
},
|
|
yAxis: {
|
|
type: 'category',
|
|
data: ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九','郑十']
|
|
},
|
|
series: [
|
|
{
|
|
name: '客户数',
|
|
type: 'bar',
|
|
data: [
|
|
2, 4, 7, 76, 135, 162, 6, 3
|
|
],
|
|
},
|
|
{
|
|
name: '订单数',
|
|
type: 'bar',
|
|
data: [
|
|
1, 2, 5, 70, 115.6, 122, 3, 2
|
|
],
|
|
}
|
|
]
|
|
};
|
|
} |