Skip to content

S
SuperMan
Commit afe5680c authored by 罗超's avatar 罗超
Browse files
Options

完成数据绑定

parent acd00f1e
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 58 deletions
src/components/rank/components/citiescount.vue
View file @ afe5680c
......@@ -10,6 +10,14 @@ export default {
data() {
return {
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: {
......@@ -18,7 +26,21 @@ export default {
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() {
if (this.chartData) {
this.pieData = this.chartData.pieData;
this.name = this.chartData.name;
}
this.initChart();
},
methods: {
......@@ -34,7 +56,7 @@ export default {
'#04cf89', '#6184fa', '#faa42e', '#ffd1ce',
'#8dd1e1', '#f95d6a', '#2ca02c', '#ff7f0e',
'#9467bd', '#bcbd22'
],
],
grid: {
left: 0,
right: 0,
......@@ -44,7 +66,7 @@ export default {
},
series: [
{
name: 'Access From',
name: this.name,
type: 'pie',
radius: ['70%', '90%'], // 饼图内外半径
avoidLabelOverlap: false, // 避免标签重叠
......@@ -67,19 +89,13 @@ export default {
labelLine: {
show: false // 不显示标签指示线
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
data:this.pieData
}
]
};
this.chart.setOption(option);
},
resizeChart() {
if (this.chart) {
this.chart.resize();
......
src/components/rank/components/pagecount.vue
View file @ afe5680c
......@@ -27,10 +27,19 @@ export default {
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() {
if (this.chartData) {
this.barData = this.chartData.barData;
this.lineData = this.chartData.lineData;
this.unit = this.chartData.unit;
this.xAxisData = this.chartData.xAxisData;
}
......
src/components/rank/components/tradecount.vue
View file @ afe5680c
......@@ -11,15 +11,22 @@ export default {
return {
chart: null,
barData: {
name: '总订单',
data: []
name: '新增同业数',
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: {
name: '小程序订单',
data:[]
name: '新增激活数',
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: [ ],
unit: '单',
xAxisData: [
'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: {
......@@ -28,21 +35,37 @@ export default {
default: null
}
},
watch: {
watch: {
chartData: function (old, val) {
if (this.chartData) {
this.barData.data = this.chartData.allOrderData;
this.lineData.data = this.chartData.appOrderData;
this.xAxisData = this.chartData.xAxisData;
const otherOrders = this.chartData.allOrderData.map((x,i)=>x-(this.chartData.appOrderData[i]))
this.barData = {
name: '旅小友订单',
data: this.chartData.appOrderData
};
this.lineData = {
name: '其他订单',
data: otherOrders
};
this.unit = '笔';
this.xAxisData = this.chartData.xData;
}
this.initChart();
}
},
mounted() {
if (this.chartData) {
this.barData.data = this.chartData.allOrderData;
this.lineData.data = this.chartData.appOrderData;
this.xAxisData = this.chartData.xAxisData;
const otherOrders = this.chartData.allOrderData.map((x,i)=>x-(this.chartData.appOrderData[i]))
this.barData = {
name: '旅小友订单',
data: this.chartData.appOrderData
};
this.lineData = {
name: '其他订单',
data: otherOrders
};
this.unit = '笔';
this.xAxisData = this.chartData.xData;
}
this.initChart();
},
......@@ -50,11 +73,6 @@ export default {
initChart() {
const chartDom = document.getElementById('tradecount');
this.chart = echarts.init(chartDom);
var intervalNum=0;
if(this.xAxisData&&this.xAxisData.length>0)
{
intervalNum=this.calculateInterval(this.xAxisData.length);
}
const option = {
tooltip: {
......@@ -90,7 +108,7 @@ export default {
},
axisLabel: {
color: '#121212',
interval: intervalNum,
interval: this.calculateInterval(this.xAxisData.length),
},
axisTick: {
show: false,
......
src/components/rank/dataCount.vue
View file @ afe5680c
......@@ -147,7 +147,7 @@
</div>
</div>
<div style="height: 320px;">
<Customer :chartData="customerObj"></Customer>
<Customer :chartData="customerObj" v-if="customerObj"></Customer>
</div>
</div>
......@@ -230,7 +230,7 @@
</div>
</div>
<div style="height: 320px;">
<Tradecount :chartData="customerObj"></Tradecount>
<Tradecount :chartData="customerObj" v-if="customerObj"></Tradecount>
</div>
</div>
......@@ -545,7 +545,7 @@
></el-option>
</el-select>
</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">
<Coreview :chart-data="currentCoreObj" v-if="currentCoreObj"></Coreview>
</div>
......@@ -562,7 +562,7 @@
}}</span>
</div>
</div>
<el-select v-model="metricsId" style="width: 140px;">
<el-select v-model="metricsId" style="width: 140px;" @change="formatPageData">
<el-option
v-for="(x, i) in metrics"
:key="i"
......@@ -572,7 +572,7 @@
</el-select>
</div>
<div style="height: 320px; padding:0 12px;" class="q-mt-md">
<Pagecount></Pagecount>
<Pagecount :chart-data="currentPageObj" v-if="currentPageObj"></Pagecount>
</div>
</div>
<div class="card rounded big col q-ml-md">
......@@ -585,7 +585,7 @@
}}</span>
</div>
</div>
<el-select v-model="areaId" style="width: 140px;">
<el-select v-model="areaId" style="width: 140px;" @change="formatAreaData">
<el-option
v-for="(x, i) in areas"
:key="i"
......@@ -595,7 +595,7 @@
</el-select>
</div>
<div style="height: 320px; padding:0 12px;" class="q-mt-md">
<Citiescount></Citiescount>
<Citiescount v-if="currentAreaObj" :chart-data="currentAreaObj"></Citiescount>
</div>
</div>
</div>
......@@ -753,42 +753,58 @@ export default {
metrics: [
{
id: 1,
name: "访问次数"
name: "访问次数",
value: "PageVisitPV",
unit:'次'
},
{
id: 2,
name: "访问人数"
name: "访问人数",
value: 'PageVisitUV',
unit:'人'
},
{
id: 3,
name: "次均停留时长"
name: "次均停留时长",
value: "PageStaytimePv",
unit:'秒'
},
{
id: 4,
name: "进入页次数"
name: "进入页次数",
value:'EntrypagePv',
unit:'次'
},
{
id: 5,
name: "退出页次数"
name: "退出页次数",
value:'ExitpagePv',
unit:'次'
},
{
id: 6,
name: "转发次数"
name: "转发次数",
value: 'PageSharePv',
unit:'次'
},
{
id: 7,
name: "转发人数"
name: "转发人数",
value:'PageShareUV',
unit:'人'
}
],
metricsId: 1,
metricsId: 2,
areas: [
{
Id: 1,
Name: "省份"
Name: "省份",
Value: 'province'
},
{
Id: 2,
Name: "城市"
Name: "城市",
Value: 'city'
}
],
platforms: [
......@@ -803,11 +819,15 @@ export default {
],
platformId: 1,
areaId: 1,
customerObj: {},
customerObj: null,
baseWechatData: {},
trendData:{},
currentCoreObj:null,
pageData:{}
pageData:{},
currentPageObj:null,
areaData:{},
currentAreaObj:null,
};
},
created() {
......@@ -823,6 +843,7 @@ export default {
this.getHomeChat();
this.getCustomerStatic();
this.getPageData()
this.getAreaData()
},
mounted() {},
methods: {
......@@ -830,6 +851,7 @@ export default {
this.getCustomerStatic();
this.getHomeChat();
this.getPageData()
this.getAreaData()
},
handleCompanyChange() {
this.getCustomerStatic();
......@@ -842,7 +864,7 @@ export default {
}
var that = this;
that.apipost("erp_post_GetCustomerStatic", that.parameters, res => {
console.log("res", res);
//console.log("res", res);
if (res.data.resultCode == 1) {
this.customerObj = res.data.data;
} else {
......@@ -887,7 +909,7 @@ export default {
"wechatstatistics_post_HomeWechatStatisticsList",
msg,
res => {
console.log("res", res);
//console.log("res", res);
if (res.data.resultCode == 1) {
this.baseWechatData = res.data.data;
this.getTrendWechatData()
......@@ -897,7 +919,6 @@ export default {
);
},
getTrendWechatData(){
//wechatstatistics_post_WechatStatisticsList
const msg = {
StartDate: this.parameters.dateRange[0],
EndDate: this.parameters.dateRange[1]
......@@ -906,7 +927,7 @@ export default {
"wechatstatistics_post_WechatStatisticsList",
msg,
res => {
console.log("res", res);
//console.log("res", res);
if (res.data.resultCode == 1) {
this.trendData = res.data.data;
this.formatCoreTrend()
......@@ -916,7 +937,6 @@ export default {
);
},
getPageData(){
//wechatstatistics_post_WechatStatisticsList
const msg = {
StartDate: this.parameters.dateRange[0],
EndDate: this.parameters.dateRange[1]
......@@ -926,20 +946,69 @@ export default {
msg,
res => {
if (res.data.resultCode == 1) {
this.trendData = res.data.data;
this.formatCoreTrend()
this.pageData = res.data.data;
this.formatPageData()
}
},
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(){
if(!this.trendData) return
const filed = this.coreLists.find(x=>x.Id == this.coreId)
const avg = this.trendData[filed.value]
const unit = filed.Unit
console.log(this.trendData.List)
const xAxisData = this.trendData.List.map(x=>x.CreateDayStr)
const seriesData = this.trendData.List.map(x=>x[filed.value])
if(!xAxisData || !seriesData) return
this.currentCoreObj = {
avg:avg,
unit:unit,
......@@ -949,7 +1018,7 @@ export default {
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