|
@@ -191,10 +191,27 @@
|
|
|
:duration="100"
|
|
|
></countTo>
|
|
|
</div>
|
|
|
+ <div v-if="item.name" class="item">
|
|
|
+ 新增用户数:
|
|
|
+ <countTo
|
|
|
+ :startVal="item.newUser"
|
|
|
+ :endVal="item.newUser"
|
|
|
+ :duration="100"
|
|
|
+ ></countTo>
|
|
|
+ </div>
|
|
|
<div v-if="item.name" class="item">
|
|
|
活跃用户占比:{{ item.distribution }}
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-select
|
|
|
+ v-model="dateType"
|
|
|
+ @change="createImage"
|
|
|
+ style="position: absolute; right: 0; top: 0; z-index: 1"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ <el-option label="用户数" value="userSum" />
|
|
|
+ <el-option label="新增用户数" value="newUser" />
|
|
|
+ </el-select>
|
|
|
<div ref="regionChart"></div>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -218,7 +235,7 @@ import {
|
|
|
} from '@/api/index';
|
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
-
|
|
|
+let data = {};
|
|
|
// import config from "@/config/index";
|
|
|
let chart = undefined;
|
|
|
export default {
|
|
@@ -236,6 +253,7 @@ export default {
|
|
|
cityType: '1',
|
|
|
client: '',
|
|
|
},
|
|
|
+ dateType: 'userSum',
|
|
|
cycle: [],
|
|
|
item: {},
|
|
|
version: [],
|
|
@@ -325,19 +343,21 @@ export default {
|
|
|
value: v.userSum,
|
|
|
distribution: (v.distribution * 100).toFixed(2) - 0 + '%',
|
|
|
userSum: v.userSum,
|
|
|
+ newUser: v.newUser
|
|
|
};
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
- console.log(r);
|
|
|
- this.createImage(list, r.range || []);
|
|
|
+ data = r || {};
|
|
|
+ this.createImage();
|
|
|
chart && chart.hideLoading();
|
|
|
})
|
|
|
.catch(() => {
|
|
|
chart && chart.clear() && chart.hideLoading();
|
|
|
});
|
|
|
},
|
|
|
- createImage(list, range) {
|
|
|
+ createImage() {
|
|
|
+ const { list, range } = data;
|
|
|
if (!chart) {
|
|
|
chart = echarts.init(this.$refs.regionChart);
|
|
|
window.onresize = chart.resize;
|
|
@@ -357,13 +377,6 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
visualMap: {
|
|
|
- // min,
|
|
|
- // max: list[0].userSum,
|
|
|
- // realtime: false,
|
|
|
- // calculable: true,
|
|
|
- // inRange: {
|
|
|
- // color: ["lightskyblue", "yellow", "orangered"],
|
|
|
- // },
|
|
|
type: 'piecewise',
|
|
|
pieces: range,
|
|
|
},
|
|
@@ -377,9 +390,10 @@ export default {
|
|
|
data: list.map(v => {
|
|
|
return {
|
|
|
name: this.lastParams.cityType === '1' ? v.city : v.province,
|
|
|
- value: v.userSum,
|
|
|
+ value: v[this.dateType],
|
|
|
distribution: (v.distribution * 100).toFixed(2) - 0 + '%',
|
|
|
userSum: v.userSum,
|
|
|
+ newUser: v.newUser,
|
|
|
};
|
|
|
}),
|
|
|
},
|
|
@@ -392,7 +406,8 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
async getAppListFunc() {
|
|
|
- const { r, li, appVersion, channel, clientList } = await this.getAppListOri();
|
|
|
+ const { r, li, appVersion, channel, clientList } =
|
|
|
+ await this.getAppListOri();
|
|
|
let source = { length: 0 },
|
|
|
appli = [];
|
|
|
let appV = { length: 0 },
|
|
@@ -571,7 +586,7 @@ export default {
|
|
|
this.lastParams.app,
|
|
|
v.province,
|
|
|
v.city,
|
|
|
- v.userSum,
|
|
|
+ v[this.dateType],
|
|
|
'\r\n',
|
|
|
].join(',');
|
|
|
});
|
|
@@ -586,7 +601,7 @@ export default {
|
|
|
// document.body.appendChild(link);
|
|
|
link.click();
|
|
|
});
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
components: {
|
|
|
countTo,
|