From 08c2c3aea346fc8b838cd04918b7864592ac079b Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期二, 30 五月 2023 15:44:53 +0800
Subject: [PATCH] bug修改
---
src/views/intelligentPatrol/trendAnalysis/index.vue | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 109 insertions(+), 4 deletions(-)
diff --git a/src/views/intelligentPatrol/trendAnalysis/index.vue b/src/views/intelligentPatrol/trendAnalysis/index.vue
index 1e26fdc..b827ad9 100644
--- a/src/views/intelligentPatrol/trendAnalysis/index.vue
+++ b/src/views/intelligentPatrol/trendAnalysis/index.vue
@@ -62,7 +62,10 @@
:visible.sync="echartsDialogVisible"
:before-close="handleClose"
>
- <div style="height: 500px; width: 500px" id="echarts"></div>
+ <div style="display: flex">
+ <div style="height: 500px; width: 500px" id="echarts"></div>
+ <div style="height: 500px; width: 500px" id="typeEcharts"></div>
+ </div>
</el-dialog>
</div>
</div>
@@ -95,6 +98,8 @@
return {
echartsDateList: [],
echartsDataList: null,
+ echartsTypeList: [],
+ echartsTypeDataList: null,
echartsDialogVisible: false,
search: {
type: null,
@@ -141,6 +146,95 @@
},
],
});
+
+ let typeEcharts = echarts.init(document.getElementById("typeEcharts"));
+
+ let option = {
+ series: this.echartsTypeDataList.map(function (data, idx) {
+ return {
+ type: "pie",
+ radius: [20, 60],
+ left: "center",
+ width: 400,
+ itemStyle: {
+ borderColor: "#fff",
+ borderWidth: 1,
+ },
+ label: {
+ alignTo: "edge",
+ formatter: "{name|{b}}\n{count|{c} 浠秨",
+ minMargin: 5,
+ edgeDistance: 10,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: "#999",
+ },
+ },
+ },
+ labelLine: {
+ length: 5,
+ length2: 0,
+ maxSurfaceAngle: 80,
+ },
+ data: data,
+ };
+ }),
+ };
+ let data = [];
+ this.echartsTypeDataList.forEach((item) => {
+ data.push({
+ name: item.name,
+ value: item.count,
+ });
+ });
+
+ typeEcharts.setOption({
+ series: [
+ {
+ type: "pie",
+ radius: [20, 60],
+ left: "center",
+ width: 400,
+ itemStyle: {
+ borderColor: "#fff",
+ borderWidth: 1,
+ },
+ label: {
+ alignTo: "edge",
+ formatter: "{name|{b}}\n{value|{c} 浠秨",
+ minMargin: 5,
+ edgeDistance: 5,
+ lineHeight: 15,
+ rich: {
+ time: {
+ fontSize: 10,
+ color: "#999",
+ },
+ },
+ },
+ labelLine: {
+ length: 15,
+ length2: 0,
+ maxSurfaceAngle: 80,
+ },
+ data: data,
+ // labelLayout: function (params) {
+ // const isLeft = params.labelRect.x < typeEcharts.getWidth() / 2;
+ // const points = params.labelLinePoints;
+ // // Update the end point.
+ // points[2][0] = isLeft
+ // ? params.labelRect.x
+ // : params.labelRect.x + params.labelRect.width;
+ // return {
+ // labelLinePoints: points,
+ // };
+ // },
+ // data: this.echartsTypeDataList,
+ },
+ ],
+ });
},
async searchList() {
const [startTime, endTime] = this.search.timeRange ?? [null, null];
@@ -167,19 +261,30 @@
};
this.zoom = 18;
this.mark = { title: data.address };
+
+ const [startTime, endTime] = this.search.timeRange ?? [null, null];
basecase
.getPointTrendAnalysisData({
- longitude: data.longitude,
- latitude: data.latitude,
+ pointId: data.id,
+ startTime: startTime,
+ endTime: endTime,
})
.then((res) => {
// const countList = res.map(item => +item.count);
this.echartsDataList = [];
this.echartsDateList = [];
- res.forEach((item) => {
+ res.timeList.forEach((item) => {
this.echartsDataList.push(item.count);
this.echartsDateList.push(item.dateTime);
});
+
+ this.echartsTypeDataList = res.typeList;
+ // this.echartsTypeDataList = [];
+ // this.echartsTypeList = [];
+ // res.typeList.forEach((item) => {
+ // this.echartsTypeDataList.push(item.count);
+ // this.echartsTypeList.push(item.name);
+ // });
// this.renderEchart(countList);
})
.catch((err) => this.$message.error(err));
--
Gitblit v1.8.0