Commit 6aa68ff9 authored by youjie's avatar youjie
parents 9d4ed662 afe5680c
...@@ -10,6 +10,14 @@ export default { ...@@ -10,6 +10,14 @@ export default {
data() { data() {
return { return {
chart: null, chart: null,
pieData: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
name: '新增激活数',
}; };
}, },
props: { props: {
...@@ -18,7 +26,21 @@ export default { ...@@ -18,7 +26,21 @@ export default {
default: null default: null
} }
}, },
watch: {
chartData: function (old, val) {
if (this.chartData) {
console.log(this.chartData);
this.pieData = this.chartData.pieData;
this.name = this.chartData.name;
}
this.initChart();
}
},
mounted() { mounted() {
if (this.chartData) {
this.pieData = this.chartData.pieData;
this.name = this.chartData.name;
}
this.initChart(); this.initChart();
}, },
methods: { methods: {
...@@ -44,7 +66,7 @@ export default { ...@@ -44,7 +66,7 @@ export default {
}, },
series: [ series: [
{ {
name: 'Access From', name: this.name,
type: 'pie', type: 'pie',
radius: ['70%', '90%'], // 饼图内外半径 radius: ['70%', '90%'], // 饼图内外半径
avoidLabelOverlap: false, // 避免标签重叠 avoidLabelOverlap: false, // 避免标签重叠
...@@ -67,13 +89,7 @@ export default { ...@@ -67,13 +89,7 @@ export default {
labelLine: { labelLine: {
show: false // 不显示标签指示线 show: false // 不显示标签指示线
}, },
data: [ data:this.pieData
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
} }
] ]
}; };
......
...@@ -27,10 +27,19 @@ export default { ...@@ -27,10 +27,19 @@ export default {
default: null default: null
} }
}, },
watch: {
chartData: function (old, val) {
if (this.chartData) {
this.barData = this.chartData.barData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
this.initChart();
}
},
mounted() { mounted() {
if (this.chartData) { if (this.chartData) {
this.barData = this.chartData.barData; this.barData = this.chartData.barData;
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit; this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData; this.xAxisData = this.chartData.xAxisData;
} }
......
...@@ -11,15 +11,22 @@ export default { ...@@ -11,15 +11,22 @@ export default {
return { return {
chart: null, chart: null,
barData: { barData: {
name: '总订单', name: '新增同业数',
data: [] data: [123, 211, 178, 289, 90, 156, 222, 101, 267, 199, 125, 291, 187, 92, 243, 148, 212, 117, 279, 103, 137, 256, 221, 193, 88, 283, 165, 111, 239, 107],
}, },
lineData: { lineData: {
name: '小程序订单', name: '新增激活数',
data:[] data: [105, 219, 142, 297, 176, 84, 233, 120, 265, 199, 207, 91, 251, 153, 281, 113, 224, 168, 246, 131, 273, 185, 99, 237, 147, 292, 109, 214, 171, 260],
}, },
xAxisData: [ ], xAxisData: [
unit: '单', '11/01', '11/02', '11/03', '11/04', '11/05',
'11/06', '11/07', '11/08', '11/09', '11/10',
'11/11', '11/12', '11/13', '11/14', '11/15',
'11/16', '11/17', '11/18', '11/19', '11/20',
'11/21', '11/22', '11/23', '11/24', '11/25',
'11/26', '11/27', '11/28', '11/29', '11/30'
],
unit: '人',
}; };
}, },
props: { props: {
...@@ -31,18 +38,34 @@ export default { ...@@ -31,18 +38,34 @@ export default {
watch: { watch: {
chartData: function (old, val) { chartData: function (old, val) {
if (this.chartData) { if (this.chartData) {
this.barData.data = this.chartData.allOrderData; const otherOrders = this.chartData.allOrderData.map((x,i)=>x-(this.chartData.appOrderData[i]))
this.lineData.data = this.chartData.appOrderData; this.barData = {
this.xAxisData = this.chartData.xAxisData; name: '旅小友订单',
data: this.chartData.appOrderData
};
this.lineData = {
name: '其他订单',
data: otherOrders
};
this.unit = '笔';
this.xAxisData = this.chartData.xData;
} }
this.initChart(); this.initChart();
} }
}, },
mounted() { mounted() {
if (this.chartData) { if (this.chartData) {
this.barData.data = this.chartData.allOrderData; const otherOrders = this.chartData.allOrderData.map((x,i)=>x-(this.chartData.appOrderData[i]))
this.lineData.data = this.chartData.appOrderData; this.barData = {
this.xAxisData = this.chartData.xAxisData; name: '旅小友订单',
data: this.chartData.appOrderData
};
this.lineData = {
name: '其他订单',
data: otherOrders
};
this.unit = '笔';
this.xAxisData = this.chartData.xData;
} }
this.initChart(); this.initChart();
}, },
...@@ -50,11 +73,6 @@ export default { ...@@ -50,11 +73,6 @@ export default {
initChart() { initChart() {
const chartDom = document.getElementById('tradecount'); const chartDom = document.getElementById('tradecount');
this.chart = echarts.init(chartDom); this.chart = echarts.init(chartDom);
var intervalNum=0;
if(this.xAxisData&&this.xAxisData.length>0)
{
intervalNum=this.calculateInterval(this.xAxisData.length);
}
const option = { const option = {
tooltip: { tooltip: {
...@@ -90,7 +108,7 @@ export default { ...@@ -90,7 +108,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#121212', color: '#121212',
interval: intervalNum, interval: this.calculateInterval(this.xAxisData.length),
}, },
axisTick: { axisTick: {
show: false, show: false,
......
...@@ -147,7 +147,7 @@ ...@@ -147,7 +147,7 @@
</div> </div>
</div> </div>
<div style="height: 320px;"> <div style="height: 320px;">
<Customer :chartData="customerObj"></Customer> <Customer :chartData="customerObj" v-if="customerObj"></Customer>
</div> </div>
</div> </div>
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</div> </div>
</div> </div>
<div style="height: 320px;"> <div style="height: 320px;">
<Tradecount :chartData="customerObj"></Tradecount> <Tradecount :chartData="customerObj" v-if="customerObj"></Tradecount>
</div> </div>
</div> </div>
...@@ -545,7 +545,7 @@ ...@@ -545,7 +545,7 @@
></el-option> ></el-option>
</el-select> </el-select>
</div> </div>
<div class="text-small q-my-md" style="padding:0 12px;">平均:{{ currentCoreObj.avg }}{{ currentCoreObj.unit }}</div> <div class="text-small q-my-md" style="padding:0 12px;" v-if="currentCoreObj">平均:{{ currentCoreObj.avg }}{{ currentCoreObj.unit }}</div>
<div style="height: 320px; padding:0 12px"> <div style="height: 320px; padding:0 12px">
<Coreview :chart-data="currentCoreObj" v-if="currentCoreObj"></Coreview> <Coreview :chart-data="currentCoreObj" v-if="currentCoreObj"></Coreview>
</div> </div>
...@@ -562,7 +562,7 @@ ...@@ -562,7 +562,7 @@
}}</span> }}</span>
</div> </div>
</div> </div>
<el-select v-model="metricsId" style="width: 140px;"> <el-select v-model="metricsId" style="width: 140px;" @change="formatPageData">
<el-option <el-option
v-for="(x, i) in metrics" v-for="(x, i) in metrics"
:key="i" :key="i"
...@@ -572,7 +572,7 @@ ...@@ -572,7 +572,7 @@
</el-select> </el-select>
</div> </div>
<div style="height: 320px; padding:0 12px;" class="q-mt-md"> <div style="height: 320px; padding:0 12px;" class="q-mt-md">
<Pagecount></Pagecount> <Pagecount :chart-data="currentPageObj" v-if="currentPageObj"></Pagecount>
</div> </div>
</div> </div>
<div class="card rounded big col q-ml-md"> <div class="card rounded big col q-ml-md">
...@@ -585,7 +585,7 @@ ...@@ -585,7 +585,7 @@
}}</span> }}</span>
</div> </div>
</div> </div>
<el-select v-model="areaId" style="width: 140px;"> <el-select v-model="areaId" style="width: 140px;" @change="formatAreaData">
<el-option <el-option
v-for="(x, i) in areas" v-for="(x, i) in areas"
:key="i" :key="i"
...@@ -595,7 +595,7 @@ ...@@ -595,7 +595,7 @@
</el-select> </el-select>
</div> </div>
<div style="height: 320px; padding:0 12px;" class="q-mt-md"> <div style="height: 320px; padding:0 12px;" class="q-mt-md">
<Citiescount></Citiescount> <Citiescount v-if="currentAreaObj" :chart-data="currentAreaObj"></Citiescount>
</div> </div>
</div> </div>
</div> </div>
...@@ -753,42 +753,58 @@ export default { ...@@ -753,42 +753,58 @@ export default {
metrics: [ metrics: [
{ {
id: 1, id: 1,
name: "访问次数" name: "访问次数",
value: "PageVisitPV",
unit:'次'
}, },
{ {
id: 2, id: 2,
name: "访问人数" name: "访问人数",
value: 'PageVisitUV',
unit:'人'
}, },
{ {
id: 3, id: 3,
name: "次均停留时长" name: "次均停留时长",
value: "PageStaytimePv",
unit:'秒'
}, },
{ {
id: 4, id: 4,
name: "进入页次数" name: "进入页次数",
value:'EntrypagePv',
unit:'次'
}, },
{ {
id: 5, id: 5,
name: "退出页次数" name: "退出页次数",
value:'ExitpagePv',
unit:'次'
}, },
{ {
id: 6, id: 6,
name: "转发次数" name: "转发次数",
value: 'PageSharePv',
unit:'次'
}, },
{ {
id: 7, id: 7,
name: "转发人数" name: "转发人数",
value:'PageShareUV',
unit:'人'
} }
], ],
metricsId: 1, metricsId: 2,
areas: [ areas: [
{ {
Id: 1, Id: 1,
Name: "省份" Name: "省份",
Value: 'province'
}, },
{ {
Id: 2, Id: 2,
Name: "城市" Name: "城市",
Value: 'city'
} }
], ],
platforms: [ platforms: [
...@@ -803,11 +819,15 @@ export default { ...@@ -803,11 +819,15 @@ export default {
], ],
platformId: 1, platformId: 1,
areaId: 1, areaId: 1,
customerObj: {}, customerObj: null,
baseWechatData: {}, baseWechatData: {},
trendData:{}, trendData:{},
currentCoreObj:null, currentCoreObj:null,
pageData:{} pageData:{},
currentPageObj:null,
areaData:{},
currentAreaObj:null,
}; };
}, },
created() { created() {
...@@ -823,6 +843,7 @@ export default { ...@@ -823,6 +843,7 @@ export default {
this.getHomeChat(); this.getHomeChat();
this.getCustomerStatic(); this.getCustomerStatic();
this.getPageData() this.getPageData()
this.getAreaData()
}, },
mounted() {}, mounted() {},
methods: { methods: {
...@@ -896,6 +917,7 @@ export default { ...@@ -896,6 +917,7 @@ export default {
this.getCustomerStatic(); this.getCustomerStatic();
this.getHomeChat(); this.getHomeChat();
this.getPageData() this.getPageData()
this.getAreaData()
}, },
handleCompanyChange() { handleCompanyChange() {
this.getCustomerStatic(); this.getCustomerStatic();
...@@ -908,7 +930,7 @@ export default { ...@@ -908,7 +930,7 @@ export default {
} }
var that = this; var that = this;
that.apipost("erp_post_GetCustomerStatic", that.parameters, res => { that.apipost("erp_post_GetCustomerStatic", that.parameters, res => {
console.log("res", res); //console.log("res", res);
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.customerObj = res.data.data; this.customerObj = res.data.data;
} else { } else {
...@@ -953,7 +975,7 @@ export default { ...@@ -953,7 +975,7 @@ export default {
"wechatstatistics_post_HomeWechatStatisticsList", "wechatstatistics_post_HomeWechatStatisticsList",
msg, msg,
res => { res => {
console.log("res", res); //console.log("res", res);
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.baseWechatData = res.data.data; this.baseWechatData = res.data.data;
this.getTrendWechatData() this.getTrendWechatData()
...@@ -963,7 +985,6 @@ export default { ...@@ -963,7 +985,6 @@ export default {
); );
}, },
getTrendWechatData(){ getTrendWechatData(){
//wechatstatistics_post_WechatStatisticsList
const msg = { const msg = {
StartDate: this.parameters.dateRange[0], StartDate: this.parameters.dateRange[0],
EndDate: this.parameters.dateRange[1] EndDate: this.parameters.dateRange[1]
...@@ -972,7 +993,7 @@ export default { ...@@ -972,7 +993,7 @@ export default {
"wechatstatistics_post_WechatStatisticsList", "wechatstatistics_post_WechatStatisticsList",
msg, msg,
res => { res => {
console.log("res", res); //console.log("res", res);
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.trendData = res.data.data; this.trendData = res.data.data;
this.formatCoreTrend() this.formatCoreTrend()
...@@ -982,7 +1003,6 @@ export default { ...@@ -982,7 +1003,6 @@ export default {
); );
}, },
getPageData(){ getPageData(){
//wechatstatistics_post_WechatStatisticsList
const msg = { const msg = {
StartDate: this.parameters.dateRange[0], StartDate: this.parameters.dateRange[0],
EndDate: this.parameters.dateRange[1] EndDate: this.parameters.dateRange[1]
...@@ -992,20 +1012,69 @@ export default { ...@@ -992,20 +1012,69 @@ export default {
msg, msg,
res => { res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.trendData = res.data.data; this.pageData = res.data.data;
this.formatCoreTrend() this.formatPageData()
} }
}, },
err => {} err => {}
); );
}, },
getAreaData(){
const msg = {
StartDate: this.parameters.dateRange[0],
EndDate: this.parameters.dateRange[1]
};
this.apipost(
"wechatstatistics_post_UserPortraitStatisticsList",
msg,
res => {
if (res.data.resultCode == 1) {
this.areaData = res.data.data;
console.log(this.areaData)
this.formatAreaData()
}
},
err => {}
);
},
formatAreaData(){
if(!this.areaData) return
const filed = this.areas.find(x=>x.Id == this.areaId)
let seriesData = this.areaData[filed.Value].map(x=> {
return {
name:x.DateStr,
value:x.UserPortraitValue
}
})
this.currentAreaObj = {
name:filed.Name+"分布占比",
pieData:seriesData
}
},
formatPageData(){
if(!this.pageData) return
const filed = this.metrics.find(x=>x.id == this.metricsId)
const unit = filed.unit
let xAxisData = this.pageData[filed.value].map(x=>x.DateStr)
let seriesData = this.pageData[filed.value].map(x=>x[filed.value])
this.currentPageObj = {
unit:unit,
xAxisData:xAxisData,
barData:{
name:filed.name,
data:seriesData
}
}
},
formatCoreTrend(){ formatCoreTrend(){
if(!this.trendData) return
const filed = this.coreLists.find(x=>x.Id == this.coreId) const filed = this.coreLists.find(x=>x.Id == this.coreId)
const avg = this.trendData[filed.value] const avg = this.trendData[filed.value]
const unit = filed.Unit const unit = filed.Unit
console.log(this.trendData.List)
const xAxisData = this.trendData.List.map(x=>x.CreateDayStr) const xAxisData = this.trendData.List.map(x=>x.CreateDayStr)
const seriesData = this.trendData.List.map(x=>x[filed.value]) const seriesData = this.trendData.List.map(x=>x[filed.value])
if(!xAxisData || !seriesData) return
this.currentCoreObj = { this.currentCoreObj = {
avg:avg, avg:avg,
unit:unit, unit:unit,
...@@ -1015,7 +1084,7 @@ export default { ...@@ -1015,7 +1084,7 @@ export default {
data:seriesData data:seriesData
} }
} }
console.log(this.currentCoreObj) //console.log(this.currentCoreObj)
} }
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment