fe / yoho-dashboard-v2 · Commits

Go to a project

Authored by TaoHuang
Commit a7d16f6db2e996a9fe0315b91e271f8945813b72 1 parent df0b26f0

format

Inline Side-by-side
Showing 11 changed files with 2332 additions and 2108 deletions
<template>
<div class="port-chart">
<div class="port-chart">
<div style="width: 100%;">
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-sa"></div>
<div class="subTitle">{{subTitle_ob}}</div>
<div class="chart chart-sb"></div>
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-sa"></div>
<div class="subTitle">{{subTitle_ob}}</div>
<div class="chart chart-sb"></div>
</div>
</div>
</div>
</template>
<script>
import echart from 'common/echart';
import * as service from 'service.wap';
import echart from "common/echart";
import * as service from "service.wap";
let oaChart, ocChart, obChart;
export default {
name: 'port2-chart',
props: ['clientType'],
data() {
return {
subTitle_oa: '',
subTitle_ob: '',
expression: {}
};
},
mounted() {
echart.then(chart => {
this.ECharts = chart;
name: "port2-chart",
props: ["clientType"],
data() {
return {
subTitle_oa: "",
subTitle_ob: "",
expression: {}
};
},
mounted() {
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
}, 1000 * 60 * 5);
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
}, 1000 * 60 * 5);
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
clientType() {
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != "" && oaChart != undefined) {
oaChart.dispose();
}
if (obChart != null && obChart != "" && obChart != undefined) {
obChart.dispose();
}
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
clientType() {
echart.then(chart => {
this.ECharts = chart;
initOfflineChart() {
let $oa = document.querySelector(".chart-sa"),
$ob = document.querySelector(".chart-sb");
this.clearChart();
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
}
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($ob) {
obChart = this.ECharts.init($ob);
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != '' && oaChart != undefined) {
oaChart.dispose();
setChart24Hour(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: "center",
textStyle: {
color: "#2CB1B2"
}
},
tooltip: {
trigger: "axis"
},
toolbox: {
borderColor: "#fff",
feature: {
saveAsImage: {}
}
},
legend: {
data: ["今天", "昨天"],
x: "right",
textStyle: {
color: "#fff"
}
},
xAxis: [
{
type: "category",
data: opt.times,
boundaryGap: false,
axisLabel: {
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
yAxis: [
{
type: "value",
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function(p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? "k" : "";
if (obChart != null && obChart != '' && obChart != undefined) {
obChart.dispose();
return Math.round(new_v.toFixed(0)) + per;
},
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
grid: {
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true
},
initOfflineChart() {
let $oa = document.querySelector('.chart-sa'),
$ob = document.querySelector('.chart-sb');
color: ["#FFCA4B", "#9AC4C9"],
series: [
{
name: "今天",
type: "line",
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
var per = opt.max > 10000 ? "k" : "";
this.clearChart();
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($ob) {
obChart = this.ECharts.init($ob);
}
},
setChart24Hour(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: 'center',
textStyle: {
color: opt.color
}
return Math.round(new_v.toFixed(0)) + per;
},
textStyle: {
color: "#FFCA4B"
}
},
tooltip: {
trigger: 'axis'
},
toolbox: {
borderColor: '#fff',
feature: {
saveAsImage: {}
}
},
legend: {
data: ['24小时'],
x: 'right',
textStyle: {
color: '#fff'
}
},
xAxis: [{
type: 'category',
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
yAxis: [{
type: 'value',
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function (p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? 'k' : '';
lineStyle: {
width: 1
}
}
}
},
{
name: "昨天",
type: "line",
data: opt.y,
itemStyle: {
normal: {
label: {
show: false,
position: "top",
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
var per = opt.max > 10000 ? "k" : "";
per = opt.per ? opt.per : per;
return opt.isRound ? Math.round(new_v.toFixed(opt.v)) + per : new_v.toFixed(opt.v) + per;
},
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
return Math.round(new_v.toFixed(0)) + per;
},
textStyle: {
color: "#9AC4C9"
}
},
color: [opt.color],
series: [{
name: '24小时',
type: 'line',
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
return new_v.toFixed(opt.v)
},
textStyle: {
color: '#fff'
}
},
lineStyle: {
width: 1
}
}
}
}]
});
},
async getOfflineData() {
service.get('v2/rs/groupsale/akSale', {
ak: this.clientType
}).then((ret) => {
let oa = _.map(ret.data.hoursDau, 'uv'),
ob = _.map(ret.data.payConversions, 'payConversionRate'),
times = _.map(ret.data.hoursDau, 'dayHour');
this.subTitle_oa = 'DAU-24小时';
this.subTitle_ob = '支付转化率-24小时';
lineStyle: {
width: 1
}
}
}
}
]
});
},
async getOfflineData() {
service
.get("v2/rs/groupsale/akSale", {
ak: this.clientType
})
.then(ret => {
let oa = _.map(ret.data.hoursDau, "uv"),
oay = _.map(ret.data.hoursDauBeforeDay, "uv"),
ob = _.map(ret.data.payConversions, "payConversionRate"),
oby = _.map(ret.data.payConversionsBeforeDay, "payConversionRate"),
times = _.map(ret.data.hoursDau, "dayHour");
this.setChart24Hour({
title: '',
chartName: oaChart,
t: oa,
timeLine: times,
min: 0,
max: _.max(oa),
color: '#2196f3',
v: 0,
isRound: true
});
this.setChart24Hour({
title: '',
chartName: obChart,
t: ob,
timeLine: times,
min: 0,
max: _.max(ob),
color: '#009688',
v: 0,
isRound: true
});
});
}
this.setChart24Hour({
title: "DAU-24小时",
chartName: oaChart,
t: oa,
y: oay,
times,
min: 0,
max: _.max([...oa, ...oay]),
v: 0
});
this.setChart24Hour({
title: "支付转化率-24小时s",
chartName: obChart,
t: ob,
y: oby,
times,
min: 0,
max: _.max([...ob, ...oby]),
v: 0
});
});
}
}
}
};
</script>
<style lang="scss">
.port-chart {
.buttons{
text-align:center;
button{
margin:20px 10px;
a{
width: 120px;
display: block;
padding: 0.750rem 8px;
color: #fff;
background: #0c2e5d;
border-radius: 0.400rem;
}
}
.ivu-btn {
border: none;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.subTitle{
text-align: center;
font-size: 16px;
.buttons {
text-align: center;
button {
margin: 20px 10px;
a {
width: 120px;
display: block;
padding: 0.75rem 8px;
color: #fff;
margin: 30px auto -20px;
background: #0c2e5d;
border-radius: 0.4rem;
}
}
.expression-title {
margin: 0 auto 15px;
.ivu-btn {
border: none;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.subTitle {
text-align: center;
font-size: 16px;
color: #fff;
margin: 30px auto -20px;
}
.expression-title {
margin: 0 auto 15px;
}
}
</style>
... ...
<template>
<div class="port-chart">
<div class="port-chart">
<div style="width: 100%;">
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-oa"></div>
<div class="subTitle">{{subTitle_oc}}</div>
<div class="chart chart-oc"></div>
<div class="subTitle" v-if="show">{{subTitle_dp}}</div>
<div class="chart chart-dp" v-if="show"></div>
<div class="subTitle" v-if="show">{{subTitle_cr}}</div>
<div class="chart chart-cr" v-if="show"></div>
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-oa"></div>
<div class="subTitle">{{subTitle_oc}}</div>
<div class="chart chart-oc"></div>
<div class="subTitle" v-if="show">{{subTitle_dp}}</div>
<div class="chart chart-dp" v-if="show"></div>
<div class="subTitle" v-if="show">{{subTitle_cr}}</div>
<div class="chart chart-cr" v-if="show"></div>
</div>
</div>
</div>
</template>
<script>
import echart from 'common/echart';
import * as service from 'service.wap';
import echart from "common/echart";
import * as service from "service.wap";
let oaChart, ocChart, dpChart, crChart;
export default {
name: 'port-chart',
data() {
return {
subTitle_oa: '',
subTitle_oc: '',
subTitle_dp: '',
subTitle_cr: '',
expression: {},
show: this.cId != 3
};
},
props: ['cId'],
mounted() {
echart.then(chart => {
this.ECharts = chart;
name: "port-chart",
data() {
return {
subTitle_oa: "",
subTitle_oc: "",
subTitle_dp: "",
subTitle_cr: "",
expression: {},
show: this.cId != 3
};
},
props: ["cId"],
mounted() {
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
}, 1000 * 60 * 5);
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
}, 1000 * 60 * 5);
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
cId() {
this.show = this.cId != 3;
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != "" && oaChart != undefined) {
oaChart.dispose();
}
if (ocChart != null && ocChart != "" && ocChart != undefined) {
ocChart.dispose();
}
if (
dpChart != null &&
dpChart != "" &&
dpChart != undefined &&
this.cId != 3
) {
dpChart.dispose();
}
if (
crChart != null &&
crChart != "" &&
crChart != undefined &&
this.cId != 3
) {
crChart.dispose();
}
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
cId() {
this.show = this.cId != 3;
echart.then(chart => {
this.ECharts = chart;
initOfflineChart() {
let $oa = document.querySelector(".chart-oa"),
$oc = document.querySelector(".chart-oc");
this.clearChart();
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($oc) {
ocChart = this.ECharts.init($oc);
}
if (this.cId != 3) {
let $dp = document.querySelector(".chart-dp"),
$cr = document.querySelector(".chart-cr");
if ($dp) {
dpChart = this.ECharts.init($dp);
}
if ($cr) {
crChart = this.ECharts.init($cr);
}
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != '' && oaChart != undefined) {
oaChart.dispose();
}
if (ocChart != null && ocChart != '' && ocChart != undefined) {
ocChart.dispose();
}
setChartData(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: "center",
textStyle: {
color: "#2CB1B2"
}
},
legend: {
data: ["今天", "昨天"],
x: "right",
textStyle: {
color: "#fff"
}
},
tooltip: {
trigger: "axis"
},
xAxis: [
{
type: "category",
data: opt.times,
if (dpChart != null && dpChart != '' && dpChart != undefined && this.cId != 3) {
dpChart.dispose();
axisLabel: {
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
}
}
}
],
yAxis: [
{
type: "value",
min: parseInt(opt.min / 2, 10),
max: opt.max,
axisLabel: {
formatter: function(p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? "k" : "";
if (crChart != null && crChart != '' && crChart != undefined && this.cId != 3) {
crChart.dispose();
return Math.round(new_v.toFixed(0)) + per;
},
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
}
}
}
],
grid: {
left: "3%",
right: "3%",
borderWidth: 0,
containLabel: true
},
initOfflineChart() {
let $oa = document.querySelector('.chart-oa'),
$oc = document.querySelector('.chart-oc');
this.clearChart();
color: ["#FFCA4B", "#9AC4C9"],
series: [
{
name: "今天",
type: "bar",
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
textStyle: {
color: "#FFCA4B"
},
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
var per = opt.max > 10000 ? "k" : "";
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($oc) {
ocChart = this.ECharts.init($oc);
return Math.round(new_v.toFixed(0)) + per;
}
}
}
}
},
{
name: "昨天",
type: "bar",
data: opt.y,
itemStyle: {
normal: {
label: {
show: false,
position: "top",
textStyle: {
color: "#9AC4C9"
},
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
var per = opt.max > 10000 ? "k" : "";
if (this.cId != 3) {
let $dp = document.querySelector('.chart-dp'),
$cr = document.querySelector('.chart-cr');
if ($dp) {
dpChart = this.ECharts.init($dp);
}
if ($cr) {
crChart = this.ECharts.init($cr);
return Math.round(new_v.toFixed(0)) + per;
}
}
}
}
}
]
});
},
async getOfflineData() {
Promise.all([
service.get("v2/rs/groupsale/order/trend/24hours", {}),
service.get("v2/rs/b2c/24pay", {})
]).then(([ret, ret1]) => {
let oa = _.map(ret.today, i => i.orderAmount),
oay = _.map(ret.yesterday, i => i.orderAmount),
oc = _.map(ret.today, "orderCount"),
ocy = _.map(ret.yesterday, "orderCount"),
dp = _.map(ret.today, i => i.paymentAmount),
dpy = _.map(ret.yesterday, i => i.paymentAmount),
cr = _.map(ret.today, "paymentCount"),
cry = _.map(ret.yesterday, "paymentCount"),
times = _.map(ret.today, "dayHour");
},
setChartMonth(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: 'center',
textStyle: {
color: opt.color
}
},
tooltip: {
trigger: 'axis'
},
toolbox: {
borderColor: '#fff',
feature: {
saveAsImage: {}
}
},
legend: {
data: ['24小时'],
x: 'right',
textStyle: {
color: '#fff'
}
},
xAxis: [{
type: 'category',
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
yAxis: [{
type: 'value',
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function (p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? 'k' : '';
per = opt.per ? opt.per : per;
return opt.isRound ? Math.round(new_v.toFixed(opt.v)) + per : new_v.toFixed(opt.v) + per;
},
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
color: [opt.color],
series: [{
name: '24小时',
type: 'line',
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
return new_v.toFixed(opt.v)
},
textStyle: {
color: '#fff'
}
},
lineStyle: {
width: 1
}
}
}
}]
});
},
async getOfflineData() {
Promise.all([service.get('v2/rs/groupsale/order/trend/24hours', {}), service.get('v2/rs/b2c/24pay', {})]).then(([ret, ret1]) => {
let oa = _.map(ret.today, 'orderAmount'),
oc = _.map(ret.today, 'orderCount'),
dp = _.map(ret.today, 'paymentAmount'),
cr = _.map(ret.today, 'paymentCount'),
times = _.map(ret.today, 'dayHour');
this.subTitle_oa = '收订金额-24小时';
this.subTitle_oc = '收订单数-24小时';
this.subTitle_dp = '支付金额-24小时';
this.subTitle_cr = '支付单数-24小时';
this.setChartMonth({
title: '',
chartName: oaChart,
t: oa,
timeLine: times,
min: 0,
max: _.max(oa),
color: '#2196f3',
v: 0,
isRound: true
});
this.setChartMonth({
title: '',
chartName: ocChart,
t: oc,
timeLine: times,
min: 0,
max: _.max(oc),
color: '#009688',
v: 0,
isRound: true
});
this.setChartData({
title: "收订金额-24小时",
chartName: oaChart,
t: oa,
y: oay,
times,
min: 0,
max: _.max([...oa, ...oay])
});
this.setChartData({
title: "收订单数-24小时",
chartName: ocChart,
t: oc,
y: ocy,
times,
min: 0,
max: _.max([...oc, ...ocy])
});
this.setChartMonth({
title: '',
chartName: dpChart,
t: dp,
timeLine: times,
min: 0,
max: _.max(dp),
color: '#ffc107',
v: 0,
isRound: true
});
this.setChartData({
title: "支付金额-24小时",
chartName: dpChart,
t: dp,
y: dpy,
times,
min: 0,
max: _.max([...dp, ...dpy])
});
this.setChartMonth({
title: '',
chartName: crChart,
t: cr,
timeLine: times,
min: 0,
max: _.max(cr),
color: '#ff5722',
v: 0,
isRound: true
});
});
}
this.setChartData({
title: "支付单数-24小时",
chartName: crChart,
t: cr,
y: cry,
times,
min: 0,
max: _.max([...cr, ...cry])
});
});
}
}
}
};
</script>
<style lang="scss">
.port-chart {
.buttons{
text-align:center;
button{
margin:20px 10px;
a{
width: 120px;
display: block;
padding: 0.750rem 8px;
color: #fff;
background: #0c2e5d;
border-radius: 0.400rem;
}
}
.ivu-btn {
border: none;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.subTitle{
text-align: center;
font-size: 16px;
.buttons {
text-align: center;
button {
margin: 20px 10px;
a {
width: 120px;
display: block;
padding: 0.75rem 8px;
color: #fff;
margin: 30px auto -20px;
background: #0c2e5d;
border-radius: 0.4rem;
}
}
.expression-title {
margin: 0 auto 15px;
.ivu-btn {
border: none;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.subTitle {
text-align: center;
font-size: 16px;
color: #fff;
margin: 30px auto -20px;
}
.expression-title {
margin: 0 auto 15px;
}
}
</style>
... ...
... ... @@ -4,7 +4,7 @@
<Col :xs="14" :sm="14" :md="14" :lg="14" offset="5">
<div class="query-item">
<div class="query-title">
<p>单品TOP20排行</p>
<p> 单品top20单数排行</p>
</div>
<ul>
<li v-for = "item in shopData">
... ... @@ -18,9 +18,8 @@
</div>
<div class="info-outer">
<div class="info-inner">
<div class="info-bg" :style="{width: `${item.payOrderAmount/shopMax*100}`+ '%'}">
<div class="pay-order" :style="{width: `${item.successOrderAmount/item.payOrderAmount*100}`+ '%'}"></div>
<div class="info-num">{{Math.round(item.payOrderAmount)}} <span class="pay-order-num">({{Math.round(item.successOrderAmount)}})</span></div>
<div class="info-bg" :style="{width: `${item.orderCount/shopMax*100}`+ '%'}">
<div class="info-num">{{Math.round(item.orderCount)}}</div>
</div>
</div>
</div>
... ... @@ -92,12 +91,10 @@ export default {
let ts = _.map(t, 'productName');
let itemProductShop = [];
const shopMax = _.max(_.map(t, 'payOrderAmount'));
const shopProductMax = _.max(_.map(t, 'successOrderAmount'));
const shopMax = _.max(_.map(t, 'orderCount'));
this.shopData = t;
this.shopMax = shopMax;
this.shopProductMax = shopProductMax;
this.ts = ts;
});
},
... ...
<template>
<div class="chart-today">
<div class="chart-total" style="width: 100%; height: 300px; "></div>
<div class="chart-num" style="width: 100%; height: 300px; "></div>
</div>
<div class="chart-today">
<div class="chart-total" style="width: 100%; height: 300px; "></div>
<div class="chart-num" style="width: 100%; height: 300px; "></div>
</div>
</template>
<script>
import echart from 'common/echart';
import * as service from 'service.wap';
import moment from 'moment';
import echart from "common/echart";
import * as service from "service.wap";
import moment from "moment";
let totalChart, numChart;
export default {
name: 'chart-today',
data() {
return {
};
},
mounted() {
echart.then(chart => {
this.ECharts = chart;
totalChart = this.ECharts.init(document.querySelector('.chart-total'));
numChart = this.ECharts.init(document.querySelector('.chart-num'));
name: "chart-today",
data() {
return {};
},
mounted() {
echart.then(chart => {
this.ECharts = chart;
totalChart = this.ECharts.init(document.querySelector(".chart-total"));
numChart = this.ECharts.init(document.querySelector(".chart-num"));
this.initChart();
this.interval = setInterval(() => {
this.initChart();
}, 1000 * 60 * 5);
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
methods: {
getTimeDetail(t) {
let time = new Date(t - 3600000);
let hour = time.getHours();
this.initChart();
this.interval = setInterval(() => {
this.initChart();
}, 1000 * 60 * 5);
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
methods: {
getTimeDetail(t) {
let time = new Date(t - 3600000);
let hour = time.getHours();
return hour;
return hour;
},
setChartData(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: "center",
textStyle: {
color: "#2CB1B2"
}
},
legend: {
data: ["今天", "昨天"],
x: "right",
textStyle: {
color: "#fff"
}
},
setChartData(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: 'center',
textStyle: {
color: '#2CB1B2'
}
},
legend: {
data: ['今天', '昨天'],
x: 'right',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'
},
xAxis: [{
type: 'category',
data: opt.times,
tooltip: {
trigger: "axis"
},
xAxis: [
{
type: "category",
data: opt.times,
axisLabel: {
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
}
}
}
],
yAxis: [
{
type: "value",
min: parseInt(opt.min / 2, 10),
max: opt.max,
axisLabel: {
formatter: function(p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? "k" : "";
axisLabel: {
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
}
}
}],
yAxis: [{
type: 'value',
min: parseInt(opt.min / 2, 10),
max: opt.max,
axisLabel: {
formatter: function(value) {
return Math.round(value) + opt.unit
},
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
}
}
}],
grid: {
left: '3%',
right: '3%',
borderWidth: 0,
containLabel: true
},
color: ['#FFCA4B', '#9AC4C9'],
series: [{
name: '今天',
type: 'bar',
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: '#FFCA4B'
},
formatter: function(p) {
return Math.round(p.value) + opt.unit
}
}
}
}
}, {
name: '昨天',
type: 'bar',
data: opt.y,
itemStyle: {
normal: {
label: {
show: false,
position: 'top',
textStyle: {
color: '#9AC4C9'
},
formatter: function(p) {
return p.value + opt.unit
}
}
}
}
}]
});
return Math.round(new_v.toFixed(0)) + per;
},
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
}
}
}
],
grid: {
left: "3%",
right: "3%",
borderWidth: 0,
containLabel: true
},
async initChart() {
await service.get('v2/rs/sale/hours', {}).then(ret => {
const data = ret.data;
color: ["#FFCA4B", "#9AC4C9"],
series: [
{
name: "今天",
type: "bar",
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
textStyle: {
color: "#FFCA4B"
},
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
var per = opt.max > 10000 ? "k" : "";
_.each(data, (item, key) => {
item.lineTime = item.dayHour;
item.amount = Math.round(item.amount / 1000);
});
return Math.round(new_v.toFixed(0)) + per;
}
}
}
}
},
{
name: "昨天",
type: "bar",
data: opt.y,
itemStyle: {
normal: {
label: {
show: false,
position: "top",
textStyle: {
color: "#9AC4C9"
},
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
var per = opt.max > 10000 ? "k" : "";
_.each(data, (item, key) => {
item.beforeAmount = Math.round(item.beforeAmount / 1000);
});
return Math.round(new_v.toFixed(0)) + per;
}
}
}
}
}
]
});
},
async initChart() {
await service.get("v2/rs/sale/hours", {}).then(ret => {
const data = ret.data;
let rows = {
lineTime: _.map(data, 'lineTime'),
orderCount: _.map(data, 'amount'),
totalAmount: _.map(data, 'amount'),
orderCountY: _.map(data, 'beforeAmount'),
totalAmountY: _.map(data, 'beforeAmount')
};
_.each(data, (item, key) => {
item.lineTime = item.dayHour;
});
this.setChartData({
title: '支付金额',
chartName: totalChart,
t: rows.totalAmount,
y: rows.totalAmountY,
times: rows.lineTime,
unit: 'k'
});
});
_.each(data, (item, key) => {
item.beforeAmount = item.beforeAmount;
});
let rows = {
lineTime: _.map(data, "lineTime"),
orderCount: _.map(data, "amount"),
totalAmount: _.map(data, "amount"),
orderCountY: _.map(data, "beforeAmount"),
totalAmountY: _.map(data, "beforeAmount")
};
await service.get('v2/rs/sale/hoursDau', {}).then(ret => {
_.each(ret.today, (item, key) => {
item.lineTime = item.dayHour;
item.uv = Math.round(item.uv / 1000);
});
this.setChartData({
title: "支付金额",
chartName: totalChart,
t: rows.totalAmount,
y: rows.totalAmountY,
times: rows.lineTime,
min: 0,
max: _.max([...rows.totalAmount, ...rows.totalAmountY])
});
});
_.each(ret.yesterday, (item, key) => {
item.uv = Math.round(item.uv / 1000);
});
await service.get("v2/rs/sale/hoursDau", {}).then(ret => {
_.each(ret.today, (item, key) => {
item.lineTime = item.dayHour;
});
_.each(ret.yesterday, (item, key) => {
});
let data = {
lineTime: _.map(ret.today, 'lineTime'),
orderCount: _.map(ret.today, 'uv'),
orderCountY: _.map(ret.yesterday, 'uv')
};
let data = {
lineTime: _.map(ret.today, "lineTime"),
orderCount: _.map(ret.today, "uv"),
orderCountY: _.map(ret.yesterday, "uv")
};
this.setChartData({
title: 'DAU',
chartName: numChart,
t: data.orderCount,
y: data.orderCountY,
times: data.lineTime,
unit: 'k'
});
});
}
this.setChartData({
title: "DAU",
chartName: numChart,
t: data.orderCount,
y: data.orderCountY,
times: data.lineTime,
min: 0,
max: _.max([...data.orderCount, ...data.orderCountY])
});
});
}
}
};
</script>
<style lang="scss">
... ...
... ... @@ -51,6 +51,11 @@ export default {
return (a - b) / b * 100;
},
formatData2(a, b) {
if (!b) return 0;
return '/' + (a / b * 100).toFixed(0) + '%';
},
fmoney(s, n) {
let minus = s < 0;
... ... @@ -231,6 +236,7 @@ export default {
await service.get('v2/rs/sale/dau', {}).then(ret => {
ret = ret.data;
const total = ret.appDau
rows = rows.concat([
{
... ... @@ -245,7 +251,7 @@ export default {
},
{
name: '未进频道 - DAU',
value: this.fmoney( ret.noChannelDau),
value: this.fmoney( ret.noChannelDau) + this.formatData2(ret.noChannelDau, total),
compare: ret.noChannelDauIncrPercentBeforeDay,
compareL: null,
isDown: ret.noChannelDauIncrPercentBeforeDay < 0,
... ... @@ -255,7 +261,7 @@ export default {
},
{
name: '商城 - DAU',
value: this.fmoney(ret.shopDau),
value: this.fmoney(ret.shopDau) + this.formatData2(ret.shopDau, total),
compare: ret.shopDauIncrPercentBeforeDay,
compareL:null,
isDown: ret.shopDauIncrPercentBeforeDay < 0 ,
... ... @@ -265,7 +271,7 @@ export default {
},
{
name: '拼团 - DAU',
value: this.fmoney(ret.groupDau),
value: this.fmoney(ret.groupDau) + this.formatData2(ret.groupDau, total),
compare: ret.groupDauIncrPercentBeforeDay,
compareL: null,
isDown: ret.groupDauIncrPercentBeforeDay < 0 ,
... ... @@ -275,7 +281,7 @@ export default {
},
{
name: '市集 - DAU',
value: this.fmoney(ret.marketDau),
value: this.fmoney(ret.marketDau) + this.formatData2(ret.marketDau, total),
compare: ret.marketDauIncrPercentBeforeDay,
compareL: null,
isDown: ret.marketDauIncrPercentBeforeDay < 0 ,
... ... @@ -285,7 +291,7 @@ export default {
},
{
name: '社区 - DAU',
value: this.fmoney(ret.communityDau),
value: this.fmoney(ret.communityDau) + this.formatData2(ret.communityDau, total),
compare: ret.communityDauIncrPercentBeforeDay,
compareL: null,
isDown: ret.communityDauIncrPercentBeforeDay < 0 ,
... ...
<template>
<div class="port-chart">
<div class="port-chart">
<div style="width: 100%;">
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-sa"></div>
<div class="subTitle">{{subTitle_ob}}</div>
<div class="chart chart-sb"></div>
<div class="subTitle">{{subTitle_oc}}</div>
<div class="chart chart-sc"></div>
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-sa"></div>
<div class="subTitle">{{subTitle_ob}}</div>
<div class="chart chart-sb"></div>
<div class="subTitle">{{subTitle_oc}}</div>
<div class="chart chart-sc"></div>
</div>
</div>
</div>
</template>
<script>
import echart from 'common/echart';
import * as service from 'service.wap';
import echart from "common/echart";
import * as service from "service.wap";
let oaChart, ocChart, obChart;
export default {
name: 'port2-chart',
props: ['clientType'],
data() {
return {
subTitle_oa: '',
subTitle_oc: '',
subTitle_ob: '',
subTitle_cr: '',
expression: {}
};
},
mounted() {
echart.then(chart => {
this.ECharts = chart;
name: "port2-chart",
props: ["clientType"],
data() {
return {
subTitle_oa: "",
subTitle_oc: "",
subTitle_ob: "",
subTitle_cr: "",
expression: {}
};
},
mounted() {
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
}, 1000 * 60 * 5);
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
clientType() {
echart.then(chart => {
this.ECharts = chart;
}, 1000 * 60 * 5);
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
clientType() {
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != '' && oaChart != undefined) {
oaChart.dispose();
}
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != "" && oaChart != undefined) {
oaChart.dispose();
}
if (obChart != null && obChart != '' && obChart != undefined) {
obChart.dispose();
}
if (obChart != null && obChart != "" && obChart != undefined) {
obChart.dispose();
}
if (ocChart != null && ocChart != '' && ocChart != undefined) {
ocChart.dispose();
}
},
initOfflineChart() {
let $oa = document.querySelector('.chart-sa'),
$ob = document.querySelector('.chart-sb'),
$oc = document.querySelector('.chart-sc');
if (ocChart != null && ocChart != "" && ocChart != undefined) {
ocChart.dispose();
}
},
initOfflineChart() {
let $oa = document.querySelector(".chart-sa"),
$ob = document.querySelector(".chart-sb"),
$oc = document.querySelector(".chart-sc");
this.clearChart();
this.clearChart();
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($ob) {
obChart = this.ECharts.init($ob);
}
if ($oc) {
ocChart = this.ECharts.init($oc);
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($ob) {
obChart = this.ECharts.init($ob);
}
if ($oc) {
ocChart = this.ECharts.init($oc);
}
},
setChart24Hour(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: "center",
textStyle: {
color: opt.color
}
},
tooltip: {
trigger: "axis"
},
toolbox: {
borderColor: "#fff",
feature: {
saveAsImage: {}
}
},
legend: {
data: ["今天", "昨天"],
x: "right",
textStyle: {
color: "#fff"
}
},
xAxis: [
{
type: "category",
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
yAxis: [
{
type: "value",
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function(p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? "k" : "";
per = opt.per ? opt.per : per;
return opt.isRound
? Math.round(new_v.toFixed(opt.v)) + per
: new_v.toFixed(opt.v) + per;
},
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
grid: {
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true
},
setChart24Hour(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: 'center',
textStyle: {
color: opt.color
}
},
tooltip: {
trigger: 'axis'
},
toolbox: {
borderColor: '#fff',
feature: {
saveAsImage: {}
}
},
legend: {
data: ['24小时'],
x: 'right',
textStyle: {
color: '#fff'
}
color: ["#FFCA4B", "#9AC4C9"],
series: [
{
name: "今天",
type: "line",
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
return new_v.toFixed(opt.v);
},
textStyle: {
color: "#FFCA4B"
}
},
xAxis: [{
type: 'category',
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
yAxis: [{
type: 'value',
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function (p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? 'k' : '';
lineStyle: {
width: 1
}
}
}
},
{
name: "昨天",
type: "line",
data: opt.y,
itemStyle: {
normal: {
label: {
show: false,
position: "top",
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
per = opt.per ? opt.per : per;
return opt.isRound ? Math.round(new_v.toFixed(opt.v)) + per : new_v.toFixed(opt.v) + per;
},
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
return new_v.toFixed(opt.v);
},
textStyle: {
color: "#9AC4C9"
}
},
color: [opt.color],
series: [{
name: '24小时',
type: 'line',
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
lineStyle: {
width: 1
}
}
}
}
]
});
},
setChartMonth(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: "center",
textStyle: {
color: opt.color
}
},
tooltip: {
trigger: "axis"
},
toolbox: {
borderColor: "#fff",
feature: {
saveAsImage: {}
}
},
legend: {
data: ["一级", "二级*三级", "四级"],
x: "right",
textStyle: {
color: "#fff"
}
},
color: ["#ffc107", "#009688", "#2196f3"],
xAxis: [
{
type: "category",
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
yAxis: [
{
type: "value",
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function(p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? "k" : "";
return new_v.toFixed(opt.v)
},
textStyle: {
color: '#fff'
}
},
lineStyle: {
width: 1
}
}
}
}]
});
per = opt.per ? opt.per : per;
return opt.isRound
? Math.round(new_v.toFixed(opt.v)) + per
: new_v.toFixed(opt.v) + per;
},
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
grid: {
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true
},
setChartMonth(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: 'center',
textStyle: {
color: opt.color
}
},
tooltip: {
trigger: 'axis'
series: [
{
name: "一级",
type: "line",
data: opt.t1,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: function(p) {
return p.value.toFixed(opt.v);
},
textStyle: {
color: "#fff"
}
},
toolbox: {
borderColor: '#fff',
feature: {
saveAsImage: {}
}
},
legend: {
data: ['30天'],
x: 'right',
textStyle: {
color: '#fff'
}
lineStyle: {
width: 1
}
}
}
},
{
name: "二级*三级",
type: "line",
data: opt.t2,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: function(p) {
return p.value.toFixed(opt.v);
},
textStyle: {
color: "#fff"
}
},
xAxis: [{
type: 'category',
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
yAxis: [{
type: 'value',
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function (p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? 'k' : '';
per = opt.per ? opt.per : per;
return opt.isRound ? Math.round(new_v.toFixed(opt.v)) + per : new_v.toFixed(opt.v) + per;
},
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
lineStyle: {
width: 1
}
}
}
},
{
name: "四级",
type: "line",
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: function(p) {
return p.value.toFixed(opt.v);
},
textStyle: {
color: "#fff"
}
},
color: [opt.color],
series: [{
name: '30天',
type: 'line',
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
return new_v.toFixed(opt.v)
},
textStyle: {
color: '#fff'
}
},
lineStyle: {
width: 1
}
}
}
}]
});
},
async getOfflineData() {
Promise.all([service.get('v2/rs/b2c/client/24hours', {
client_type: this.clientType
}), service.get('v2/rs/b2c/client/30days', {
client_type: this.clientType
})]).then(([ret, ret2]) => {
let oa = _.map(ret.today, 'dau'),
ob = _.map(ret.today, (i) => {
return ((i.paymentCount / i.dau) * 100);
}),
oc = _.map(ret2.today, (i) => {
if (!i.clickPayCount) {
return 0;
}
return ((i.paymentCount / i.clickPayCount) * 100);
}),
times = _.map(ret.today, i => (i.dayHour + '').substring((i.dayHour + '').length - 2)),
days = _.map(ret2.today, 'dayHour');
lineStyle: {
width: 1
}
}
}
}
]
});
},
async getOfflineData() {
Promise.all([
service.get("v2/rs/b2c/client/24hours", {
client_type: this.clientType
}),
service.get("v2/rs/b2c/client/30days", {
client_type: this.clientType
})
]).then(([ret, ret2]) => {
let oa = _.map(ret.today, "dau"),
oay = _.map(ret.yesterday, "dau"),
ob = _.map(ret.today, i => {
return (i.paymentCount / i.dau) * 100;
}),
oby = _.map(ret.yesterday, i => {
return (i.paymentCount / i.dau) * 100;
}),
oc4 = _.map(ret2.today, i => {
if (!i.clickPayCount) {
return 0;
}
return (i.paymentCount / i.clickPayCount) * 100;
}),
oc1 = _.map(ret2.today, i => {
if (!i.dau) {
return 0;
}
return (i.infoUv / i.dau) * 100;
}),
oc23 = _.map(ret2.today, i => {
if (!i.infoUv) {
return 0;
}
return (i.orderCount / i.infoUv) * 100;
}),
times = _.map(ret.today, i =>
(i.dayHour + "").substring((i.dayHour + "").length - 2)
),
days = _.map(ret2.today, "dayHour");
this.subTitle_oa = 'DAU-24小时';
this.subTitle_ob = '支付转化率-24小时';
this.subTitle_oc = '四级转化-30天';
this.subTitle_oa = "DAU-24小时";
this.subTitle_ob = "支付转化率-24小时";
this.subTitle_oc = "四级转化-30天";
this.setChart24Hour({
title: '',
chartName: oaChart,
t: oa,
timeLine: times,
min: 0,
max: _.max(oa),
color: '#2196f3',
v: 0,
isRound: true
});
this.setChart24Hour({
title: '',
chartName: obChart,
t: ob,
timeLine: times,
min: 0,
max: _.max(ob),
color: '#009688',
v: 0,
isRound: true
});
this.setChart24Hour({
title: "",
chartName: oaChart,
t: oa,
y: oay,
timeLine: times,
min: 0,
max: _.max([...oa, ...oay]),
color: "#2196f3",
v: 0,
isRound: true
});
this.setChart24Hour({
title: "",
chartName: obChart,
t: ob,
y: oby,
timeLine: times,
min: 0,
max: _.max([...ob, ...oby]),
color: "#009688",
v: 0,
isRound: true
});
this.setChartMonth({
title: '',
chartName: ocChart,
t: oc,
timeLine: days,
min: 0,
max: _.max(oc),
color: '#009688',
v: 0,
isRound: true
});
});
}
this.setChartMonth({
title: "",
chartName: ocChart,
t1: oc1,
t2: oc23,
t: oc4,
timeLine: days,
min: 0,
max: _.max([...oc1, ...oc23, ...oc4]),
color: "#009688",
v: 0,
isRound: true
});
});
}
}
}
};
</script>
<style lang="scss">
.port-chart {
.buttons{
text-align:center;
button{
margin:20px 10px;
a{
width: 120px;
display: block;
padding: 0.750rem 8px;
color: #fff;
background: #0c2e5d;
border-radius: 0.400rem;
}
}
.ivu-btn {
border: none;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.subTitle{
text-align: center;
font-size: 16px;
.buttons {
text-align: center;
button {
margin: 20px 10px;
a {
width: 120px;
display: block;
padding: 0.75rem 8px;
color: #fff;
margin: 30px auto -20px;
background: #0c2e5d;
border-radius: 0.4rem;
}
}
.expression-title {
margin: 0 auto 15px;
.ivu-btn {
border: none;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.subTitle {
text-align: center;
font-size: 16px;
color: #fff;
margin: 30px auto -20px;
}
.expression-title {
margin: 0 auto 15px;
}
}
</style>
... ...
... ... @@ -132,7 +132,7 @@ export default {
unit: ''
},
{
name: '支付转化率',
name: '有效支付转化率',
value: (ret.today.paymentConvertRate * 100).toFixed(2),
compare: this.formatData(ret.today.paymentConvertRate, ret.yesterday.paymentConvertRate),
compareL: null,
... ... @@ -142,7 +142,7 @@ export default {
unit: '%'
},
{
name: '支付单均',
name: '有效支付单均',
value: this.fmoney(ret.today.paymentSignlePrice),
compare: this.formatData(ret.today.paymentSignlePrice, ret.yesterday.paymentSignlePrice),
compareL: null,
... ... @@ -182,7 +182,7 @@ export default {
unit: ''
},
{
name: '支付订单数',
name: '有效支付订单数',
value: this.fmoney(ret.today.paymentCount),
compare: this.formatData(ret.today.paymentCount, ret.yesterday.paymentCount),
compareL: null,
... ...
<template>
<div class="port-chart">
<div style="width: 100%;">
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-oa"></div>
<div class="subTitle">{{subTitle_oc}}</div>
<div class="chart chart-oc"></div>
<div class="subTitle" v-if="show">{{subTitle_dp}}</div>
<div class="chart chart-dp" v-if="show"></div>
<div class="subTitle" v-if="show">{{subTitle_cr}}</div>
<div class="chart chart-cr" v-if="show"></div>
</div>
<Modal v-model="showModal" title="详细情况" width="700" class-name="modalbg">
<top-data ref="topdata"></top-data>
</Modal>
<div class="port-chart">
<div style="width: 100%;">
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-oa"></div>
<div class="subTitle">{{subTitle_oc}}</div>
<div class="chart chart-oc"></div>
<div class="subTitle" v-if="show">{{subTitle_dp}}</div>
<div class="chart chart-dp" v-if="show"></div>
<div class="subTitle" v-if="show">{{subTitle_cr}}</div>
<div class="chart chart-cr" v-if="show"></div>
</div>
<Modal v-model="showModal" title="详细情况" width="700" class-name="modalbg">
<top-data ref="topdata"></top-data>
</Modal>
</div>
</template>
<script>
import echart from 'common/echart';
import * as service from 'service.wap';
import topData from './top-data';
import echart from "common/echart";
import * as service from "service.wap";
import topData from "./top-data";
let oaChart, ocChart, dpChart, crChart;
let oaChart, ocChart, dpChart, crChart;
export default {
name: 'port-chart',
components: {
topData
},
data() {
return {
subTitle_oa: '',
subTitle_oc: '',
subTitle_dp: '',
subTitle_cr: '',
expression: {},
show: this.cId != 3,
showModal: false
};
},
props: ['cId'],
mounted() {
export default {
name: "port-chart",
components: {
topData
},
data() {
return {
subTitle_oa: "",
subTitle_oc: "",
subTitle_dp: "",
subTitle_cr: "",
expression: {},
show: this.cId != 3,
showModal: false
};
},
props: ["cId"],
mounted() {
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
}, 1000 * 60 * 5);
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
cId() {
this.show = this.cId != 3;
echart.then(chart => {
this.ECharts = chart;
... ... @@ -48,105 +72,86 @@
this.initOfflineChart();
this.getOfflineData();
});
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
}, 1000 * 60 * 5);
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != "" && oaChart != undefined) {
oaChart.dispose();
}
},
watch: {
cId() {
this.show = this.cId != 3;
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
if (ocChart != null && ocChart != "" && ocChart != undefined) {
ocChart.dispose();
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != '' && oaChart != undefined) {
oaChart.dispose();
}
if (ocChart != null && ocChart != '' && ocChart != undefined) {
ocChart.dispose();
}
if (
dpChart != null &&
dpChart != "" &&
dpChart != undefined &&
this.cId != 3
) {
dpChart.dispose();
}
if (dpChart != null && dpChart != '' && dpChart != undefined && this.cId != 3) {
dpChart.dispose();
}
if (
crChart != null &&
crChart != "" &&
crChart != undefined &&
this.cId != 3
) {
crChart.dispose();
}
},
initOfflineChart() {
let $oa = document.querySelector(".chart-oa"),
$oc = document.querySelector(".chart-oc");
if (crChart != null && crChart != '' && crChart != undefined && this.cId != 3) {
crChart.dispose();
}
},
initOfflineChart() {
let $oa = document.querySelector('.chart-oa'),
$oc = document.querySelector('.chart-oc');
this.clearChart();
this.clearChart();
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($oc) {
ocChart = this.ECharts.init($oc);
}
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($oc) {
ocChart = this.ECharts.init($oc);
}
let $dp = document.querySelector(".chart-dp"),
$cr = document.querySelector(".chart-cr");
if ($dp) {
dpChart = this.ECharts.init($dp);
}
if ($cr) {
crChart = this.ECharts.init($cr);
}
},
setChartData(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: "center",
textStyle: {
color: "#2CB1B2"
}
},
legend: {
data: ["今天", "昨天"],
x: "right",
textStyle: {
color: "#fff"
}
},
tooltip: {
trigger: "axis"
},
xAxis: [
{
type: "category",
data: opt.times,
let $dp = document.querySelector('.chart-dp'),
$cr = document.querySelector('.chart-cr');
if ($dp) {
dpChart = this.ECharts.init($dp);
}
if ($cr) {
crChart = this.ECharts.init($cr);
}
},
setChartMonth(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: 'center',
textStyle: {
color: opt.color
}
},
tooltip: {
trigger: 'axis'
},
toolbox: {
borderColor: '#fff',
feature: {
saveAsImage: {}
}
},
legend: {
data: ['24小时'],
x: 'right',
textStyle: {
color: '#fff'
}
},
xAxis: [{
type: 'category',
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#fff'
color: "#fff"
},
rotate: 45
},
... ... @@ -156,26 +161,27 @@
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
color: "#fff",
width: 1,
type: 'solid'
type: "solid"
}
}
}],
yAxis: [{
type: 'value',
min: opt.min,
}
],
yAxis: [
{
type: "value",
min: parseInt(opt.min / 2, 10),
max: opt.max,
axisLabel: {
formatter: function(p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? 'k' : '';
var per = opt.max > 10000 ? "k" : "";
per = opt.per ? opt.per : per;
return opt.isRound ? Math.round(new_v.toFixed(opt.v)) + per : new_v.toFixed(opt.v) + per;
return Math.round(new_v.toFixed(0)) + per;
},
textStyle: {
color: '#fff'
color: "#fff"
},
rotate: 45
},
... ... @@ -185,263 +191,184 @@
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
color: "#fff",
width: 1,
type: 'solid'
type: "solid"
}
}
}],
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
color: [opt.color],
series: [{
name: '24小时',
type: 'line',
}
],
grid: {
left: "3%",
right: "3%",
borderWidth: 0,
containLabel: true
},
color: ["#FFCA4B", "#9AC4C9"],
series: [
{
name: "今天",
type: "bar",
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
position: "top",
textStyle: {
color: "#FFCA4B"
},
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
var per = opt.max > 10000 ? "k" : "";
return new_v.toFixed(opt.v);
},
textStyle: {
color: '#fff'
return Math.round(new_v.toFixed(0)) + per;
}
},
lineStyle: {
width: 1
}
}
}
}]
});
},
setChartData(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: 'center',
textStyle: {
color: '#2CB1B2'
}
},
legend: {
data: ['24小时'],
x: 'right',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'
},
xAxis: [{
type: 'category',
data: opt.timeLine,
axisLabel: {
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
}
}
}],
yAxis: [{
type: 'value',
min: parseInt(opt.min / 2, 10),
max: opt.max,
axisLabel: {
formatter: function(value) {
return Math.round(value) + opt.unit;
},
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
width: 1,
type: 'solid'
}
}
}],
grid: {
left: '3%',
right: '3%',
borderWidth: 0,
containLabel: true
},
color: ['#FFCA4B', '#9AC4C9'],
series: [{
name: '24小时',
type: 'bar',
data: opt.t,
{
name: "昨天",
type: "bar",
data: opt.y,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
show: false,
position: "top",
textStyle: {
color: '#FFCA4B'
color: "#9AC4C9"
},
formatter: function(p) {
return Math.round(p.value) + opt.unit;
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
var per = opt.max > 10000 ? "k" : "";
return Math.round(new_v.toFixed(0)) + per;
}
}
}
}
}]
});
},
async getOfflineData() {
let hourMap = {};
Promise.all([service.get('v2/rs/b2c/24sale', {}), service.get('v2/rs/b2c/24pay', {})]).then(([ret, ret1]) => {
let oa = _.map(ret.data, (i) => i.amount / 1000),
oc = _.map(ret.data, 'count'),
dp = _.map(ret1.data, 'amount'),
cr = _.map(ret1.data, 'count'),
times = _.map(ret.data, (i) => {
let hour = (i.dayHour + '').substring((i.dayHour + '').length - 2)
hourMap[hour] = i.dayHour;
return hour;
});
}
]
});
},
async getOfflineData() {
let hourMap = {};
this.subTitle_oa = '收订金额-24小时';
this.subTitle_oc = '收订单数-24小时';
this.subTitle_dp = '支付金额-24小时';
this.subTitle_cr = '支付单数-24小时';
Promise.all([
service.get("v2/rs/b2c/24sale", {}),
service.get("v2/rs/b2c/24pay", {})
]).then(([ret, ret1]) => {
let oa = _.map(ret.today, i => i.amount),
oay = _.map(ret.yesterday, i => i.amount),
oc = _.map(ret.today, "count"),
ocy = _.map(ret.yesterday, "count"),
dp = _.map(ret1.today, i => i.amount),
dpy = _.map(ret1.yesterday, i => i.amount),
cr = _.map(ret1.today, "count"),
cry = _.map(ret1.yesterday, "count"),
times = _.map(ret.data, i => {
let hour = (i.dayHour + "").substring((i.dayHour + "").length - 2);
this.setChartData({
title: '',
chartName: oaChart,
t: oa,
timeLine: times,
min: 0,
max: _.max(oa),
color: '#2196f3',
v: 0,
isRound: true,
unit: 'k'
hourMap[hour] = i.dayHour;
return hour;
});
oaChart.on('click', (params) => {
const hour = hourMap[params.name];
this.$refs.topdata.fetchData(hour);
this.showModal = true;
});
this.setChartData({
title: "收订金额-24小时",
chartName: oaChart,
t: oa,
y: oay,
times,
min: 0,
max: _.max([...oa, ...oay])
});
this.setChartMonth({
title: '',
chartName: ocChart,
t: oc,
timeLine: times,
min: 0,
max: _.max(oc),
color: '#009688',
v: 0,
isRound: true
});
oaChart.on("click", params => {
const hour = hourMap[params.name];
this.$refs.topdata.fetchData(hour);
this.showModal = true;
});
this.setChartMonth({
title: '',
chartName: dpChart,
t: dp,
timeLine: times,
min: 0,
max: _.max(dp),
color: '#ffc107',
v: 0,
isRound: true
});
this.setChartData({
title: "收订单数-24小时",
chartName: ocChart,
t: oc,
y: ocy,
times,
min: 0,
max: _.max([...oc, ...ocy])
});
this.setChartMonth({
title: '',
chartName: crChart,
t: cr,
timeLine: times,
min: 0,
max: _.max(cr),
color: '#ff5722',
v: 0,
isRound: true
});
this.setChartData({
title: "有效支付金额-24小时",
chartName: dpChart,
t: dp,
y: dpy,
times,
min: 0,
max: _.max([...dp, ...dpy])
});
}
this.setChartData({
title: "有效支付单数-24小时",
chartName: crChart,
t: cr,
y: cry,
times,
min: 0,
max: _.max([...cr, ...cry])
});
});
}
};
}
};
</script>
<style lang="scss">
.port-chart {
.buttons {
text-align: center;
.port-chart {
.buttons {
text-align: center;
button {
margin: 20px 10px;
a {
width: 120px;
display: block;
padding: 0.750rem 8px;
color: #fff;
background: #0c2e5d;
border-radius: 0.400rem;
}
}
button {
margin: 20px 10px;
.ivu-btn {
border: none;
}
}
a {
width: 120px;
display: block;
padding: 0.75rem 8px;
color: #fff;
background: #0c2e5d;
border-radius: 0.4rem;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.ivu-btn {
border: none;
}
}
.subTitle {
text-align: center;
font-size: 16px;
color: #fff;
margin: 30px auto -20px;
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.expression-title {
margin: 0 auto 15px;
.subTitle {
text-align: center;
font-size: 16px;
color: #fff;
margin: 30px auto -20px;
}
}
}
.expression-title {
margin: 0 auto 15px;
}
}
.modalbg {
.ivu-modal-content {
background: url(../../img/back.png);
}
}
.modalbg {
.ivu-modal-content {
background: url(../../img/back.png);
}
}
</style>
... ...
... ... @@ -115,7 +115,7 @@ export default {
unit: '元'
},
{
name: '支付单数',
name: '有效支付订单数',
value: this.fmoney( ret.payOrderCount),
compare: ret.payOrderCountIncrPercent,
compareL: null,
... ... @@ -125,7 +125,7 @@ export default {
unit: ''
},
{
name: '金额支付率',
name: '有效支付率（金额）',
value: this.fmoney( ret.payAmountPercent),
compare: ret.payAmountPercentIncrPercent,
compareL: null,
... ... @@ -135,7 +135,7 @@ export default {
unit: '%'
},
{
name: '支付新顾客',
name: '有效支付新顾客',
value: this.fmoney( ret.payNewUser),
compare: ret.payNewUserIncrPercent,
compareL: null,
... ... @@ -145,7 +145,7 @@ export default {
unit: ''
},
{
name: '支付老顾客',
name: '有效支付老顾客',
value: this.fmoney( ret.payOldUser),
compare: ret.payOldUserIncrPercent,
compareL: null,
... ... @@ -175,7 +175,7 @@ export default {
unit: '元'
},
{
name: '支付毛利率',
name: '有效支付毛利率',
value: this.fmoney( ret.payGrossPercent),
compare: ret.payGrossPercentIncrPercent,
compareL: null,
... ... @@ -185,7 +185,7 @@ export default {
unit: '%'
},
{
name: '优惠券金额',
name: '有效优惠券金额',
value: this.fmoney( ret.payCouponAmount),
compare: ret.payCouponAmountIncrPercent,
compareL: null,
... ... @@ -197,7 +197,7 @@ export default {
supplier: '供应商承担：' + this.fmoney( ret.payCouponSupplierAmount) + '元，占比'+ ret.payCouponSupplierAmountPercent + '%'
},
{
name: '支付毛利额除券',
name: '有效支付毛利额除券',
value: this.fmoney( ret.payGrossAmountSubCoupon),
compare: ret.payGrossAmountIncrPercent,
compareL: null,
... ...
<template>
<div class="port-chart">
<div class="port-chart">
<div style="width: 100%;">
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-sa"></div>
<div class="subTitle">{{subTitle_ob}}</div>
<div class="chart chart-sb"></div>
<div class="subTitle">{{subTitle_oc}}</div>
<div class="chart chart-sc"></div>
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-sa"></div>
<div class="subTitle">{{subTitle_ob}}</div>
<div class="chart chart-sb"></div>
<div class="subTitle">{{subTitle_oc}}</div>
<div class="chart chart-sc"></div>
</div>
</div>
</div>
</template>
<script>
import echart from 'common/echart';
import * as service from 'service.wap';
import echart from "common/echart";
import * as service from "service.wap";
let oaChart, ocChart, obChart;
export default {
name: 'port2-chart',
props: ['clientType'],
data() {
return {
subTitle_oa: '',
subTitle_oc: '',
subTitle_ob: '',
subTitle_cr: '',
expression: {}
};
},
mounted() {
echart.then(chart => {
this.ECharts = chart;
name: "port2-chart",
props: ["clientType"],
data() {
return {
subTitle_oa: "",
subTitle_oc: "",
subTitle_ob: "",
subTitle_cr: "",
expression: {}
};
},
mounted() {
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
}, 1000 * 60 * 5);
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
clientType() {
echart.then(chart => {
this.ECharts = chart;
}, 1000 * 60 * 5);
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
clientType() {
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != "" && oaChart != undefined) {
oaChart.dispose();
}
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
}
if (obChart != null && obChart != "" && obChart != undefined) {
obChart.dispose();
}
if (ocChart != null && ocChart != "" && ocChart != undefined) {
ocChart.dispose();
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != '' && oaChart != undefined) {
oaChart.dispose();
}
initOfflineChart() {
let $oa = document.querySelector(".chart-sa"),
$ob = document.querySelector(".chart-sb"),
$oc = document.querySelector(".chart-sc");
this.clearChart();
if (obChart != null && obChart != '' && obChart != undefined) {
obChart.dispose();
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($ob) {
obChart = this.ECharts.init($ob);
}
if ($oc) {
ocChart = this.ECharts.init($oc);
}
},
setChart24Hour(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: "center",
textStyle: {
color: "#2CB1B2"
}
},
tooltip: {
trigger: "axis"
},
toolbox: {
borderColor: "#fff",
feature: {
saveAsImage: {}
}
},
legend: {
data: ["今天", "昨天"],
x: "right",
textStyle: {
color: "#fff"
}
},
xAxis: [
{
type: "category",
data: opt.times,
boundaryGap: false,
axisLabel: {
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
yAxis: [
{
type: "value",
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function(p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? "k" : "";
if (ocChart != null && ocChart != '' && ocChart != undefined) {
ocChart.dispose();
per = opt.per ? opt.per : per;
return opt.isRound
? Math.round(new_v.toFixed(opt.v)) + per
: new_v.toFixed(opt.v) + per;
},
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
grid: {
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true
},
initOfflineChart() {
let $oa = document.querySelector('.chart-sa'),
$ob = document.querySelector('.chart-sb'),
$oc = document.querySelector('.chart-sc');
color: ["#FFCA4B", "#9AC4C9"],
series: [
{
name: "今天",
type: "line",
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
this.clearChart();
if ($oa) {
oaChart = this.ECharts.init($oa);
return new_v.toFixed(opt.v);
},
textStyle: {
color: "#FFCA4B"
}
},
lineStyle: {
width: 1
}
}
}
if ($ob) {
obChart = this.ECharts.init($ob);
},
{
name: "昨天",
type: "line",
data: opt.y,
itemStyle: {
normal: {
label: {
show: false,
position: "top",
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
return new_v.toFixed(opt.v);
},
textStyle: {
color: "#9AC4C9"
}
},
lineStyle: {
width: 1
}
}
}
if ($oc) {
ocChart = this.ECharts.init($oc);
}
]
});
},
setChartMonth(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: "center",
textStyle: {
color: opt.color
}
},
tooltip: {
trigger: "axis"
},
toolbox: {
borderColor: "#fff",
feature: {
saveAsImage: {}
}
},
legend: {
data: ["一级转化", "二*三级转化", "四级转化"],
x: "right",
textStyle: {
color: "#fff"
}
},
xAxis: [
{
type: "category",
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
yAxis: [
{
type: "value",
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function(p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? "k" : "";
per = opt.per ? opt.per : per;
return opt.isRound
? Math.round(new_v.toFixed(opt.v)) + per
: new_v.toFixed(opt.v) + per;
},
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#ccc",
width: 1,
type: "solid"
}
}
}
],
grid: {
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true
},
setChart24Hour(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: 'center',
textStyle: {
color: opt.color
}
},
tooltip: {
trigger: 'axis'
},
toolbox: {
borderColor: '#fff',
feature: {
saveAsImage: {}
}
},
legend: {
data: ['24小时'],
x: 'right',
textStyle: {
color: '#fff'
}
},
xAxis: [{
type: 'category',
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
yAxis: [{
type: 'value',
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function (p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? 'k' : '';
color: ["#ffc107", "#009688", "#2196f3"],
series: [
{
name: "一级转化",
type: "line",
data: opt.t1,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
per = opt.per ? opt.per : per;
return opt.isRound ? Math.round(new_v.toFixed(opt.v)) + per : new_v.toFixed(opt.v) + per;
},
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
return new_v.toFixed(opt.v);
},
textStyle: {
color: "#fff"
}
},
color: [opt.color],
series: [{
name: '24小时',
type: 'line',
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
lineStyle: {
width: 1
}
}
}
},
{
name: "二*三级转化",
type: "line",
data: opt.t23,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
return new_v.toFixed(opt.v)
},
textStyle: {
color: '#fff'
}
},
lineStyle: {
width: 1
}
}
}
}]
});
},
setChartMonth(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: 'center',
textStyle: {
color: opt.color
}
},
tooltip: {
trigger: 'axis'
},
toolbox: {
borderColor: '#fff',
feature: {
saveAsImage: {}
}
return new_v.toFixed(opt.v);
},
textStyle: {
color: "#fff"
}
},
legend: {
data: ['30天'],
x: 'right',
textStyle: {
color: '#fff'
}
},
xAxis: [{
type: 'category',
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
yAxis: [{
type: 'value',
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function (p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? 'k' : '';
lineStyle: {
width: 1
}
}
}
},
{
name: "四级转化",
type: "line",
data: opt.t4,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
per = opt.per ? opt.per : per;
return opt.isRound ? Math.round(new_v.toFixed(opt.v)) + per : new_v.toFixed(opt.v) + per;
},
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
return new_v.toFixed(opt.v);
},
textStyle: {
color: "#fff"
}
},
color: [opt.color],
series: [{
name: '30天',
type: 'line',
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
return new_v.toFixed(opt.v)
},
textStyle: {
color: '#fff'
}
},
lineStyle: {
width: 1
}
}
}
}]
});
},
async getOfflineData() {
Promise.all([service.get('v2/rs/ufo/order/trend/24hours', {
client_type: this.clientType
}), service.get('v2/rs/ufo/order/trend/30days', {
client_type: this.clientType
})]).then(([ret, ret2]) => {
let oa = _.map(ret.today, 'dau'),
ob = _.map(ret.today, (i) => {
return ((i.paymentAmount / i.dau) * 100);
}),
oc = _.map(ret2.today, (i) => {
if (!i.orderCount) {
return 0;
}
return ((i.paymentCount / i.orderCount) * 100);
}),
times = _.map(ret.today, (i) => {
return i.createDateHour.substring(i.createDateHour.length - 2);
}),
days = _.map(ret2.today, 'createDateHour');
this.subTitle_oa = 'DAU-24小时';
this.subTitle_ob = '支付转化率-24小时';
this.subTitle_oc = '四级转化-30天';
lineStyle: {
width: 1
}
}
}
}
]
});
},
async getOfflineData() {
Promise.all([
service.get("v2/rs/ufo/order/trend/24hours", {
client_type: this.clientType
}),
service.get("v2/rs/ufo/order/trend/30days", {
client_type: this.clientType
})
]).then(([ret, ret2]) => {
let oa = _.map(ret.today, "dau"),
oay = _.map(ret.yesterday, "dau"),
ob = _.map(ret.today, i => {
return (i.paymentAmount / i.dau) * 100;
}),
oby = _.map(ret.yesterday, i => {
return (i.paymentAmount / i.dau) * 100;
}),
oc1 = _.map(ret2.today, i => {
if (!i.dau) {
return 0;
}
return (i.infoUv / i.dau) * 100;
}),
oc23 = _.map(ret2.today, i => {
if (!i.infoUv) {
return 0;
}
return (i.orderCount / i.infoUv) * 100;
}),
oc4 = _.map(ret2.today, i => {
if (!i.orderCount) {
return 0;
}
return (i.paymentCount / i.orderCount) * 100;
}),
times = _.map(ret.today, i => {
return i.createDateHour.substring(i.createDateHour.length - 2);
}),
days = _.map(ret2.today, "createDateHour");
this.setChart24Hour({
title: '',
chartName: oaChart,
t: oa,
timeLine: times,
min: 0,
max: _.max(oa),
color: '#2196f3',
v: 0,
isRound: true
});
this.setChart24Hour({
title: '',
chartName: obChart,
t: ob,
timeLine: times,
min: 0,
max: _.max(ob),
color: '#009688',
v: 0,
isRound: true
});
this.setChart24Hour({
title: "DAU-24小时",
chartName: oaChart,
t: oa,
y: oay,
times,
min: 0,
max: _.max([...oa, ...oay]),
v: 0
});
this.setChart24Hour({
title: "支付转化率-24小时",
chartName: obChart,
t: ob,
y: oby,
times,
min: 0,
max: _.max([...ob, ...oby]),
v: 0
});
this.setChartMonth({
title: '',
chartName: ocChart,
t: oc,
timeLine: days,
min: 0,
max: _.max(oc),
color: '#009688',
v: 0,
isRound: true
});
});
}
this.setChartMonth({
title: "四级转化-30天",
chartName: ocChart,
t1: oc1,
t23: oc23,
t4: oc4,
timeLine: days,
min: 0,
max: _.max([...oc1, ...oc23, ...oc4]),
color: "#009688",
v: 0,
isRound: true
});
});
}
}
}
};
</script>
<style lang="scss">
.port-chart {
.buttons{
text-align:center;
button{
margin:20px 10px;
a{
width: 120px;
display: block;
padding: 0.750rem 8px;
color: #fff;
background: #0c2e5d;
border-radius: 0.400rem;
}
}
.ivu-btn {
border: none;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.subTitle{
text-align: center;
font-size: 16px;
.buttons {
text-align: center;
button {
margin: 20px 10px;
a {
width: 120px;
display: block;
padding: 0.75rem 8px;
color: #fff;
margin: 30px auto -20px;
background: #0c2e5d;
border-radius: 0.4rem;
}
}
.expression-title {
margin: 0 auto 15px;
.ivu-btn {
border: none;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.subTitle {
text-align: center;
font-size: 16px;
color: #fff;
margin: 30px auto -20px;
}
.expression-title {
margin: 0 auto 15px;
}
}
</style>
... ...
<template>
<div class="port-chart">
<div class="port-chart">
<div style="width: 100%;">
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-oa"></div>
<div class="subTitle">{{subTitle_oc}}</div>
<div class="chart chart-oc"></div>
<div class="subTitle" v-if="show">{{subTitle_dp}}</div>
<div class="chart chart-dp" v-if="show"></div>
<div class="subTitle" v-if="show">{{subTitle_cr}}</div>
<div class="chart chart-cr" v-if="show"></div>
<div class="subTitle">{{subTitle_oa}}</div>
<div class="chart chart-oa"></div>
<div class="subTitle">{{subTitle_oc}}</div>
<div class="chart chart-oc"></div>
<div class="subTitle" v-if="show">{{subTitle_dp}}</div>
<div class="chart chart-dp" v-if="show"></div>
<div class="subTitle" v-if="show">{{subTitle_cr}}</div>
<div class="chart chart-cr" v-if="show"></div>
</div>
</div>
</div>
</template>
<script>
import echart from 'common/echart';
import * as service from 'service.wap';
import echart from "common/echart";
import * as service from "service.wap";
let oaChart, ocChart, dpChart, crChart;
export default {
name: 'port-chart',
data() {
return {
subTitle_oa: '',
subTitle_oc: '',
subTitle_dp: '',
subTitle_cr: '',
expression: {},
show: this.cId != 3
};
},
props: ['cId'],
mounted() {
echart.then(chart => {
this.ECharts = chart;
name: "port-chart",
data() {
return {
subTitle_oa: "",
subTitle_oc: "",
subTitle_dp: "",
subTitle_cr: "",
expression: {},
show: this.cId != 3
};
},
props: ["cId"],
mounted() {
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
}, 1000 * 60 * 5);
this.interval = setInterval(() => {
this.$nextTick(() => {
this.initExtendChart();
this.getExtendData();
});
}, 1000 * 60 * 5);
});
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
cId() {
this.show = this.cId != 3;
echart.then(chart => {
this.ECharts = chart;
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != "" && oaChart != undefined) {
oaChart.dispose();
}
if (ocChart != null && ocChart != "" && ocChart != undefined) {
ocChart.dispose();
}
if (
dpChart != null &&
dpChart != "" &&
dpChart != undefined &&
this.cId != 3
) {
dpChart.dispose();
}
if (
crChart != null &&
crChart != "" &&
crChart != undefined &&
this.cId != 3
) {
crChart.dispose();
}
},
beforeDestroy() {
if (this.interval) {
clearInterval(this.interval);
}
},
watch: {
cId() {
this.show = this.cId != 3;
echart.then(chart => {
this.ECharts = chart;
initOfflineChart() {
let $oa = document.querySelector(".chart-oa"),
$oc = document.querySelector(".chart-oc");
this.clearChart();
this.$nextTick(() => {
this.initOfflineChart();
this.getOfflineData();
});
});
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($oc) {
ocChart = this.ECharts.init($oc);
}
if (this.cId != 3) {
let $dp = document.querySelector(".chart-dp"),
$cr = document.querySelector(".chart-cr");
if ($dp) {
dpChart = this.ECharts.init($dp);
}
if ($cr) {
crChart = this.ECharts.init($cr);
}
}
},
methods: {
clearChart() {
if (oaChart != null && oaChart != '' && oaChart != undefined) {
oaChart.dispose();
}
if (ocChart != null && ocChart != '' && ocChart != undefined) {
ocChart.dispose();
}
setChartData(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: "center",
textStyle: {
color: "#2CB1B2"
}
},
legend: {
data: ["今天", "昨天"],
x: "right",
textStyle: {
color: "#fff"
}
},
tooltip: {
trigger: "axis"
},
xAxis: [
{
type: "category",
data: opt.times,
if (dpChart != null && dpChart != '' && dpChart != undefined && this.cId != 3) {
dpChart.dispose();
axisLabel: {
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
}
}
}
],
yAxis: [
{
type: "value",
min: parseInt(opt.min / 2, 10),
max: opt.max,
axisLabel: {
formatter: function(p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? "k" : "";
if (crChart != null && crChart != '' && crChart != undefined && this.cId != 3) {
crChart.dispose();
return Math.round(new_v.toFixed(0)) + per;
},
textStyle: {
color: "#fff"
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
width: 1,
type: "solid"
}
}
}
],
grid: {
left: "3%",
right: "3%",
borderWidth: 0,
containLabel: true
},
initOfflineChart() {
let $oa = document.querySelector('.chart-oa'),
$oc = document.querySelector('.chart-oc');
this.clearChart();
color: ["#FFCA4B", "#9AC4C9"],
series: [
{
name: "今天",
type: "bar",
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: "top",
textStyle: {
color: "#FFCA4B"
},
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
var per = opt.max > 10000 ? "k" : "";
if ($oa) {
oaChart = this.ECharts.init($oa);
}
if ($oc) {
ocChart = this.ECharts.init($oc);
return Math.round(new_v.toFixed(0)) + per;
}
}
}
}
},
{
name: "昨天",
type: "bar",
data: opt.y,
itemStyle: {
normal: {
label: {
show: false,
position: "top",
textStyle: {
color: "#9AC4C9"
},
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
var per = opt.max > 10000 ? "k" : "";
if (this.cId != 3) {
let $dp = document.querySelector('.chart-dp'),
$cr = document.querySelector('.chart-cr');
if ($dp) {
dpChart = this.ECharts.init($dp);
}
if ($cr) {
crChart = this.ECharts.init($cr);
return Math.round(new_v.toFixed(0)) + per;
}
}
}
}
}
]
});
},
async getOfflineData() {
Promise.all([
service.get("v2/rs/ufo/order/trend/24hours", {
client_type: 4
})
]).then(([ret]) => {
let oa = _.map(ret.today, "orderAmount"),
oay = _.map(ret.yesterday, "orderAmount"),
oc = _.map(ret.today, "orderCount"),
ocy = _.map(ret.yesterday, "orderCount"),
dp = _.map(ret.today, "paymentAmount"),
dpy = _.map(ret.yesterday, "paymentAmount"),
cr = _.map(ret.today, "paymentCount"),
cry = _.map(ret.yesterday, "paymentCount"),
times = _.map(ret.today, i => {
return i.createDateHour.substring(i.createDateHour.length - 2);
});
},
setChartMonth(opt) {
opt.chartName.setOption({
title: {
text: opt.title,
x: 'center',
textStyle: {
color: opt.color
}
},
tooltip: {
trigger: 'axis'
},
toolbox: {
borderColor: '#fff',
feature: {
saveAsImage: {}
}
},
legend: {
data: ['24小时'],
x: 'right',
textStyle: {
color: '#fff'
}
},
xAxis: [{
type: 'category',
data: opt.timeLine,
boundaryGap: false,
axisLabel: {
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
yAxis: [{
type: 'value',
min: opt.min,
max: opt.max,
axisLabel: {
formatter: function (p) {
var new_v = opt.max > 10000 ? p / 1000 : p;
var per = opt.max > 10000 ? 'k' : '';
per = opt.per ? opt.per : per;
return opt.isRound ? Math.round(new_v.toFixed(opt.v)) + per : new_v.toFixed(opt.v) + per;
},
textStyle: {
color: '#fff'
},
rotate: 45
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#ccc',
width: 1,
type: 'solid'
}
}
}],
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true
},
color: [opt.color],
series: [{
name: '24小时',
type: 'line',
data: opt.t,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: function(p) {
var new_v = opt.max > 10000 ? p.value / 1000 : p.value;
return new_v.toFixed(opt.v)
},
textStyle: {
color: '#fff'
}
},
lineStyle: {
width: 1
}
}
}
}]
});
},
async getOfflineData() {
Promise.all([service.get('v2/rs/ufo/order/trend/24hours', {
client_type: 4
})]).then(([ret]) => {
let oa = _.map(ret.today, 'orderAmount'),
oc = _.map(ret.today, 'orderCount'),
dp = _.map(ret.today, 'paymentAmount'),
cr = _.map(ret.today, 'paymentCount'),
times = _.map(ret.today, (i) => {
return i.createDateHour.substring(i.createDateHour.length - 2)
});
this.subTitle_oa = '收订金额-24小时';
this.subTitle_oc = '收订单数-24小时';
this.subTitle_dp = '支付金额-24小时';
this.subTitle_cr = '支付单数-24小时';
this.setChartMonth({
title: '',
chartName: oaChart,
t: oa,
timeLine: times,
min: 0,
max: _.max(oa),
color: '#2196f3',
v: 0,
isRound: true
});
this.setChartMonth({
title: '',
chartName: ocChart,
t: oc,
timeLine: times,
min: 0,
max: _.max(oc),
color: '#009688',
v: 0,
isRound: true
});
this.setChartData({
title: "收订金额-24小时",
chartName: oaChart,
t: oa,
y: oay,
times,
min: 0,
max: _.max([...oa, ...oay])
});
this.setChartData({
title: "收订单数-24小时",
chartName: ocChart,
t: oc,
y: ocy,
times,
min: 0,
max: _.max([...oc, ...ocy])
});
this.setChartMonth({
title: '',
chartName: dpChart,
t: dp,
timeLine: times,
min: 0,
max: _.max(dp),
color: '#ffc107',
v: 0,
isRound: true
});
this.setChartData({
title: "支付金额-24小时",
chartName: dpChart,
t: dp,
y: dpy,
times,
min: 0,
max: _.max([...dp, ...dpy])
});
this.setChartMonth({
title: '',
chartName: crChart,
t: cr,
timeLine: times,
min: 0,
max: _.max(cr),
color: '#ff5722',
v: 0,
isRound: true
});
});
}
this.setChartData({
title: "支付单数-24小时",
chartName: crChart,
t: cr,
y: cry,
times,
min: 0,
max: _.max([...cr, ...cry])
});
});
}
}
}
};
</script>
<style lang="scss">
.port-chart {
.buttons{
text-align:center;
button{
margin:20px 10px;
a{
width: 120px;
display: block;
padding: 0.750rem 8px;
color: #fff;
background: #0c2e5d;
border-radius: 0.400rem;
}
}
.ivu-btn {
border: none;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.subTitle{
text-align: center;
font-size: 16px;
.buttons {
text-align: center;
button {
margin: 20px 10px;
a {
width: 120px;
display: block;
padding: 0.75rem 8px;
color: #fff;
margin: 30px auto -20px;
background: #0c2e5d;
border-radius: 0.4rem;
}
}
.expression-title {
margin: 0 auto 15px;
.ivu-btn {
border: none;
}
}
.chart {
width: 100%;
height: 300px;
margin: 20px 0;
}
.subTitle {
text-align: center;
font-size: 16px;
color: #fff;
margin: 30px auto -20px;
}
.expression-title {
margin: 0 auto 15px;
}
}
</style>
... ...