|
@@ -465,7 +465,10 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
// @ is an alias to /src
|
|
// @ is an alias to /src
|
|
-let launch_chart = undefined, trend_chart= undefined, proportion_chart= undefined, saturation_chart= undefined;
|
|
|
|
|
|
+let launch_chart = undefined,
|
|
|
|
+ trend_chart = undefined,
|
|
|
|
+ proportion_chart = undefined,
|
|
|
|
+ saturation_chart = undefined;
|
|
import {
|
|
import {
|
|
adChannelList,
|
|
adChannelList,
|
|
launchList,
|
|
launchList,
|
|
@@ -532,7 +535,6 @@ export default {
|
|
type: 1,
|
|
type: 1,
|
|
},
|
|
},
|
|
],
|
|
],
|
|
- saturation_chart: undefined,
|
|
|
|
|
|
|
|
proportionData: [],
|
|
proportionData: [],
|
|
advantageous: [],
|
|
advantageous: [],
|
|
@@ -563,8 +565,9 @@ export default {
|
|
adChannelList().then(r => {
|
|
adChannelList().then(r => {
|
|
this.channleList = r || [];
|
|
this.channleList = r || [];
|
|
let sel = this.timeSelect[this.active];
|
|
let sel = this.timeSelect[this.active];
|
|
|
|
+ console.log(sel);
|
|
launchList({
|
|
launchList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
}).then(launch => {
|
|
}).then(launch => {
|
|
@@ -572,7 +575,7 @@ export default {
|
|
});
|
|
});
|
|
|
|
|
|
trendList({
|
|
trendList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
}).then(trend => {
|
|
}).then(trend => {
|
|
@@ -580,7 +583,7 @@ export default {
|
|
});
|
|
});
|
|
|
|
|
|
proportionList({
|
|
proportionList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
order: this.launch_list[this.proportion_act].type,
|
|
order: this.launch_list[this.proportion_act].type,
|
|
@@ -596,7 +599,7 @@ export default {
|
|
});
|
|
});
|
|
|
|
|
|
customerList({
|
|
customerList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
order: this.customer_list[this.customer_act].type,
|
|
order: this.customer_list[this.customer_act].type,
|
|
@@ -605,7 +608,7 @@ export default {
|
|
});
|
|
});
|
|
|
|
|
|
advantageousList({
|
|
advantageousList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
}).then(advantageous => {
|
|
}).then(advantageous => {
|
|
@@ -613,7 +616,7 @@ export default {
|
|
});
|
|
});
|
|
|
|
|
|
potentialList({
|
|
potentialList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
}).then(potential => {
|
|
}).then(potential => {
|
|
@@ -621,7 +624,7 @@ export default {
|
|
});
|
|
});
|
|
|
|
|
|
saturationList({
|
|
saturationList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
}).then(saturation => {
|
|
}).then(saturation => {
|
|
@@ -675,7 +678,7 @@ export default {
|
|
this.customer_act = i;
|
|
this.customer_act = i;
|
|
let sel = this.timeSelect[this.active];
|
|
let sel = this.timeSelect[this.active];
|
|
customerList({
|
|
customerList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
order: this.customer_list[this.customer_act].type,
|
|
order: this.customer_list[this.customer_act].type,
|
|
@@ -687,7 +690,7 @@ export default {
|
|
this.launch_act = i;
|
|
this.launch_act = i;
|
|
let sel = this.timeSelect[this.active];
|
|
let sel = this.timeSelect[this.active];
|
|
launchList({
|
|
launchList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
}).then(launch => {
|
|
}).then(launch => {
|
|
@@ -698,7 +701,7 @@ export default {
|
|
this.trend_act = i;
|
|
this.trend_act = i;
|
|
let sel = this.timeSelect[this.active];
|
|
let sel = this.timeSelect[this.active];
|
|
trendList({
|
|
trendList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
}).then(trend => {
|
|
}).then(trend => {
|
|
@@ -709,7 +712,7 @@ export default {
|
|
this.proportion_act = i;
|
|
this.proportion_act = i;
|
|
let sel = this.timeSelect[this.active];
|
|
let sel = this.timeSelect[this.active];
|
|
proportionList({
|
|
proportionList({
|
|
- channelId: this.channleList[this.active].channelId,
|
|
|
|
|
|
+ channelId: this.channleList[this.channel_act].channelId,
|
|
start: sel.startDate,
|
|
start: sel.startDate,
|
|
end: sel.endDate,
|
|
end: sel.endDate,
|
|
order: this.launch_list[this.proportion_act].type,
|
|
order: this.launch_list[this.proportion_act].type,
|
|
@@ -764,6 +767,13 @@ export default {
|
|
value,
|
|
value,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
|
|
+ numFor(num) {
|
|
|
|
+ if (!num) return 0;
|
|
|
|
+ if (isNaN(num)) return 0;
|
|
|
|
+ if (num >= 100000000) return (num / 100000000).toFixed(0) - 0 + "亿";
|
|
|
|
+ if (num >= 10000) return (num / 10000).toFixed(0) - 0 + "万";
|
|
|
|
+ return num;
|
|
|
|
+ },
|
|
launchChart(list) {
|
|
launchChart(list) {
|
|
if (!this.$refs.launch) return;
|
|
if (!this.$refs.launch) return;
|
|
if (launch_chart && launch_chart.dispose) {
|
|
if (launch_chart && launch_chart.dispose) {
|
|
@@ -793,9 +803,31 @@ export default {
|
|
yAxis: {
|
|
yAxis: {
|
|
type: "value",
|
|
type: "value",
|
|
scale: true,
|
|
scale: true,
|
|
|
|
+ axisLabel: {
|
|
|
|
+ formatter: arr => {
|
|
|
|
+ return this.numFor(arr);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
},
|
|
},
|
|
tooltip: {
|
|
tooltip: {
|
|
- trigger: "item",
|
|
|
|
|
|
+ trigger: "axis",
|
|
|
|
+ formatter: item => {
|
|
|
|
+ let bf = list.before || [],
|
|
|
|
+ no = list.now || [];
|
|
|
|
+ let vb = this.numFor(
|
|
|
|
+ bf[item[0].dataIndex][
|
|
|
|
+ this.launch_list[this.launch_act].proportionType
|
|
|
|
+ ] || 0
|
|
|
|
+ ),
|
|
|
|
+ vn = this.numFor(
|
|
|
|
+ no[item[0].dataIndex][
|
|
|
|
+ this.launch_list[this.launch_act].proportionType
|
|
|
|
+ ] || 0
|
|
|
|
+ );
|
|
|
|
+ return `${this.launch_list[this.launch_act].text} <br /> ${
|
|
|
|
+ bf[item[0].dataIndex].dt
|
|
|
|
+ } ${vb} <br />${no[item[0].dataIndex].dt} ${vn}`;
|
|
|
|
+ },
|
|
},
|
|
},
|
|
grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
|
|
grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
|
|
series: chartData.value.map((data, i) => {
|
|
series: chartData.value.map((data, i) => {
|
|
@@ -830,11 +862,34 @@ export default {
|
|
data: chartData.keys,
|
|
data: chartData.keys,
|
|
},
|
|
},
|
|
tooltip: {
|
|
tooltip: {
|
|
- trigger: "item",
|
|
|
|
|
|
+ trigger: "axis",
|
|
|
|
+ formatter: item => {
|
|
|
|
+ let bf = list.before || [],
|
|
|
|
+ no = list.now || [];
|
|
|
|
+ console.log(item);
|
|
|
|
+ let vb = this.numFor(
|
|
|
|
+ bf[item[0].dataIndex][
|
|
|
|
+ this.launch_list[this.trend_act].proportionType
|
|
|
|
+ ] || 0
|
|
|
|
+ ),
|
|
|
|
+ vn = this.numFor(
|
|
|
|
+ no[item[0].dataIndex][
|
|
|
|
+ this.launch_list[this.trend_act].proportionType
|
|
|
|
+ ] || 0
|
|
|
|
+ );
|
|
|
|
+ return `${this.launch_list[this.trend_act].text} <br /> ${
|
|
|
|
+ item[0].name
|
|
|
|
+ }时 ${vb} <br />${item[0].name}时 ${vn}`;
|
|
|
|
+ },
|
|
},
|
|
},
|
|
yAxis: {
|
|
yAxis: {
|
|
type: "value",
|
|
type: "value",
|
|
scale: true,
|
|
scale: true,
|
|
|
|
+ axisLabel: {
|
|
|
|
+ formatter: arr => {
|
|
|
|
+ return this.numFor(arr);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
},
|
|
},
|
|
grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
|
|
grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
|
|
series: chartData.value.map((v, i) => {
|
|
series: chartData.value.map((v, i) => {
|
|
@@ -874,17 +929,25 @@ export default {
|
|
axisPointer: {
|
|
axisPointer: {
|
|
type: "shadow",
|
|
type: "shadow",
|
|
},
|
|
},
|
|
|
|
+ formatter: item => {
|
|
|
|
+ return item.name + "时:" + item.value.toFixed(2) + "%";
|
|
|
|
+ },
|
|
},
|
|
},
|
|
yAxis: {
|
|
yAxis: {
|
|
type: "value",
|
|
type: "value",
|
|
scale: true,
|
|
scale: true,
|
|
|
|
+ axisLabel: {
|
|
|
|
+ formatter: arr => {
|
|
|
|
+ return this.numFor(arr);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
},
|
|
},
|
|
- grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
|
|
|
|
|
|
+ grid: [{ left: 50, top: "10%", buttom: 0, right: 100 }],
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
name: "饱和度",
|
|
name: "饱和度",
|
|
data: chartData.value,
|
|
data: chartData.value,
|
|
- type: "line",
|
|
|
|
|
|
+ type: "bar",
|
|
smooth: true,
|
|
smooth: true,
|
|
markLine: {
|
|
markLine: {
|
|
data: [
|
|
data: [
|