|
|
@@ -44,6 +44,24 @@
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
<br />
|
|
|
+ <el-card>
|
|
|
+ <div class="totalText" style="display: flex; text-align: center">
|
|
|
+ <div
|
|
|
+ class="totalItem"
|
|
|
+ v-for="(item, i) in total"
|
|
|
+ :key="i + item"
|
|
|
+ :style="{ color: item.color }"
|
|
|
+ >
|
|
|
+ <countTo
|
|
|
+ :startVal="0"
|
|
|
+ :endVal="item.value"
|
|
|
+ :duration="1500"
|
|
|
+ ></countTo>
|
|
|
+ <p v-text="item.name" style="font-size: 16px;color: #000;"></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <br />
|
|
|
<el-card class="box-card">
|
|
|
<div class="realLineChart" ref="realLineChart"></div>
|
|
|
</el-card>
|
|
|
@@ -52,6 +70,7 @@
|
|
|
|
|
|
<script>
|
|
|
// @ is an alias to /src
|
|
|
+import countTo from "@/components/counto/vue-countTo.vue";
|
|
|
import {
|
|
|
getRealAppOnline,
|
|
|
getRule,
|
|
|
@@ -65,7 +84,8 @@ import {
|
|
|
TitleComponent,
|
|
|
TooltipComponent,
|
|
|
GridComponent,
|
|
|
- ToolboxComponent
|
|
|
+ ToolboxComponent,
|
|
|
+ LegendComponent,
|
|
|
} from "echarts/components";
|
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
|
echarts.use([
|
|
|
@@ -74,7 +94,8 @@ echarts.use([
|
|
|
GridComponent,
|
|
|
LineChart,
|
|
|
CanvasRenderer,
|
|
|
- ToolboxComponent
|
|
|
+ ToolboxComponent,
|
|
|
+ LegendComponent,
|
|
|
]);
|
|
|
|
|
|
// import config from "@/config/index";
|
|
|
@@ -88,9 +109,11 @@ export default {
|
|
|
app: "",
|
|
|
lidu: "",
|
|
|
},
|
|
|
+ total: {},
|
|
|
tableData: [],
|
|
|
cycle: [],
|
|
|
lidu: [],
|
|
|
+ realForm: {},
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -122,44 +145,65 @@ export default {
|
|
|
},
|
|
|
regularData() {
|
|
|
if (time) clearInterval(time);
|
|
|
+ this.realForm = {
|
|
|
+ appName: this.form.app,
|
|
|
+ minute: this.form.lidu,
|
|
|
+ };
|
|
|
this.onSubmit();
|
|
|
- time = setInterval(this.onSubmit, 30000);
|
|
|
+ time = setInterval(this.onSubmit, 5000);
|
|
|
},
|
|
|
onSubmit() {
|
|
|
- getRealAppOnline({ appName: this.form.app, minute: this.form.lidu })
|
|
|
+ getRealAppOnline(this.realForm)
|
|
|
.then(r => {
|
|
|
if (!this.$refs.realLineChart) return;
|
|
|
-
|
|
|
+ const li = r.list || [],
|
|
|
+ T = r.total || {},
|
|
|
+ keys = Object.keys(T),
|
|
|
+ total = [],
|
|
|
+ color = ["rgb(244, 127, 146)", "rgb(17, 160, 248)"];
|
|
|
const keyList = [],
|
|
|
- valueList = [];
|
|
|
- (r || []).map(v => {
|
|
|
+ valueList_active = [],
|
|
|
+ valueList_newUser = [];
|
|
|
+ for (let i = 0; i < keys.length; i++) {
|
|
|
+ const v = keys[i];
|
|
|
+ if (typeof T[v].value !== "number") continue;
|
|
|
+ let p = {
|
|
|
+ name: T[v].name,
|
|
|
+ value: T[v].value,
|
|
|
+ color: color[i % 2],
|
|
|
+ };
|
|
|
+ total.push(p);
|
|
|
+ }
|
|
|
+ this.total = total;
|
|
|
+ li.map(v => {
|
|
|
const key = v.recMinute.split(" ")[1] || "";
|
|
|
keyList.push(key);
|
|
|
- valueList.push(v.total);
|
|
|
+ valueList_active.push(v.active);
|
|
|
+ valueList_newUser.push(v.newUser);
|
|
|
});
|
|
|
- this.createImage(keyList, valueList);
|
|
|
+ this.createImage(keyList, valueList_active, valueList_newUser);
|
|
|
})
|
|
|
.catch(() => {
|
|
|
if (!chart) return;
|
|
|
chart.clear();
|
|
|
});
|
|
|
},
|
|
|
- createImage(keyList, valueList) {
|
|
|
+ createImage(keyList, valueList_active, valueList_newUser) {
|
|
|
!chart && (chart = echarts.init(this.$refs.realLineChart));
|
|
|
chart.resize({
|
|
|
- height: (this.$refs.realLineChart.offsetWidth * 6) / 16,
|
|
|
+ height: (this.$refs.realLineChart.offsetWidth * 4) / 16,
|
|
|
});
|
|
|
chart.setOption({
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
},
|
|
|
- toolbox:{
|
|
|
- feature:{
|
|
|
- saveAsImage: {
|
|
|
- type: 'jpg',
|
|
|
- name: '实时'
|
|
|
- }
|
|
|
- }
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {
|
|
|
+ type: "jpg",
|
|
|
+ name: "实时",
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
grid: {
|
|
|
left: "3%",
|
|
|
@@ -167,9 +211,12 @@ export default {
|
|
|
bottom: "3%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
+ legend: {
|
|
|
+ data: ["活跃用户", "新增用户"],
|
|
|
+ },
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
- boundaryGap: false,
|
|
|
+ boundaryGap: true,
|
|
|
data: keyList,
|
|
|
},
|
|
|
yAxis: {
|
|
|
@@ -183,14 +230,14 @@ export default {
|
|
|
} else if (val >= 10000) {
|
|
|
val = (val / 10000).toFixed(2) + "万";
|
|
|
}
|
|
|
- return val
|
|
|
+ return val;
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- name: this.form.app,
|
|
|
- data: valueList,
|
|
|
+ name: "活跃用户",
|
|
|
+ data: valueList_active,
|
|
|
symbolSize: 0,
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
@@ -219,6 +266,37 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
+ {
|
|
|
+ name: "新增用户",
|
|
|
+ data: valueList_newUser,
|
|
|
+ symbolSize: 0,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ color: "rgba(145,204,117,.9)",
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(145,204,117, 0.8)", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(145,204,117, 0.1)", // 100% 处的颜色
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
],
|
|
|
});
|
|
|
},
|
|
|
@@ -266,7 +344,7 @@ export default {
|
|
|
return { r, li, lidu };
|
|
|
},
|
|
|
},
|
|
|
- components: {},
|
|
|
+ components: { countTo },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -277,4 +355,24 @@ export default {
|
|
|
.RealOnline .has-seconds .el-time-spinner__wrapper:last-child {
|
|
|
display: none;
|
|
|
}
|
|
|
+.totalText {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.totalText .totalItem {
|
|
|
+ flex: 1;
|
|
|
+ position: relative;
|
|
|
+ font-size: 42px;
|
|
|
+ font-weight: 700;
|
|
|
+ font-family: sans-serif;
|
|
|
+}
|
|
|
+.totalText .totalItem:not(:last-child)::after {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 1px;
|
|
|
+ background: #e7eef0;
|
|
|
+}
|
|
|
</style>
|
liyongli