统计信息

pages/investigation/task.vue

@@ -136,10 +136,15 @@
 			</view>
 			<u-picker :show="showPicker" :columns="columnsPicker" keyName="label" @cancel="pickerCancel"
 				@confirm="pickerConfirm"></u-picker>
-			<view class="echarts" v-if="active === 2">
+
+			<!-- 	<view class="echarts" v-if="active === 2">
 				<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
-			</view>
+			</view> -->
 			<view class="formBox form-step-2" v-if="active === 2">
+				<view class="label-box label-box2">
+					<view class="border"></view> 交通流量
+				</view>
+				<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
 				<uni-forms :modelValue="formData" border label-width="120">
 					<uni-forms-item label="最大流量">
 						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
@@ -190,8 +195,35 @@
 							<view class="Height100">辆</view>
 						</view>
 					</uni-forms-item>
+
 				</uni-forms>
 			</view>
+			<view class="formBox form-step-2" v-if="active === 2">
+				<view class="label-box label-box2">
+					<view class="border"></view> 违法情况
+				</view>
+				<view class="label-box label-box2 label-box-small">
+					违法数量
+				</view>
+				<qiun-data-charts type="area" :opts="opts2" :chartData="chartData2" v-if="chartData2.series.length>0" />
+				<view v-else class="nodata">暂无数据</view>
+				<view class="label-box label-box2 label-box-small">
+					违法占比
+				</view>
+				<qiun-data-charts type="rose" :opts="opts3" :chartData="chartData3" v-if="chartData3.series.length>0" />
+				<view v-else class="nodata">暂无数据</view>
+			</view>
+			<view class="formBox form-step-2" v-if="active === 2">
+				<view class="label-box label-box2">
+					<view class="border"></view> 事故情况
+				</view>
+				<view class="label-box label-box2 label-box-small">
+					事故数量
+				</view>
+				<qiun-data-charts type="area" :opts="opts4" :chartData="chartData4" v-if="chartData4.series.length>0" />
+				<view v-else class="nodata">暂无数据</view>
+				
+			</view>
 			<view class="formBox form-step-3" v-if="active === 3">
 				<view class="point">
 					<view class="title">重点排查</view>
@@ -419,6 +451,7 @@
 		},
 		onReady() {
 			this.getChartsData();
+			this.getChartsData2()
 		},
 		onLoad(e) {
 			this.boxHeight = uni.getSystemInfoSync().windowHeight;
@@ -535,6 +568,44 @@
 				chartData: {},
 				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
 				opts: {
+					color: [
+						"#1890FF",
+						"#FAC858",
+						"#91CB74",
+						"#EE6666",
+						"#73C0DE",
+						"#3CA272",
+						"#FC8452",
+						"#9A60B4",
+						"#ea7ccc",
+					],
+					padding: [0, 15, 15, 15],
+					enableScroll: false,
+					legend: {
+						icon: "rect",
+						position: "top",
+						float: "right",
+						padding: 10,
+					},
+					xAxis: {
+						disableGrid: true,
+					},
+					yAxis: {
+						gridType: "dash",
+						dashLength: 2,
+					},
+					extra: {
+						area: {
+							type: "straight",
+							opacity: 0.2,
+							addLine: true,
+							width: 2,
+							gradient: true,
+							activeType: "hollow",
+						},
+					},
+				},
+				opts2: {
 					color: [
 						"#1890FF",
 						"#FAC858",
@@ -552,7 +623,8 @@
 						icon: "rect",
 						position: "top",
 						float: "right",
-						padding: 15,
+						padding: 10,
+						show: false,
 					},
 					xAxis: {
 						disableGrid: true,
@@ -572,6 +644,39 @@
 						},
 					},
 				},
+				chartData2: {},
+				opts3: {
+					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
+						"#ea7ccc"
+					],
+					padding: [5, 5, 5, 5],
+					enableScroll: false,
+					legend: {
+						show: true,
+						position: "right",
+						lineHeight: 25
+					},
+					extra: {
+						rose: {
+							type: "radius",
+							minRadius: 50,
+							activeOpacity: 0.5,
+							activeRadius: 10,
+							offsetAngle: 0,
+							labelWidth: 15,
+							border: true,
+							borderWidth: 2,
+							borderColor: "#FFFFFF",
+							linearType: "custom"
+						}
+					}
+				},
+				chartData3: {
+					series: []
+				},
+				chartData4: {
+					series: []
+				},
 				showProblem: false,
 				showProblemTreeSelect: false,
 				problemTreeSelect: 0,
@@ -1157,8 +1262,7 @@
 				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
 				let res = {
 					categories: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
-					series: [
-						{
+					series: [{
 							name: "总量",
 							legendShape: "line",
 							data: [],
@@ -1177,6 +1281,14 @@
 				};
 				this.chartData = JSON.parse(JSON.stringify(res));
 			},
+			getChartsData2() {
+				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
+				let res = {
+					categories: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
+					series: [],
+				};
+				this.chartData2 = JSON.parse(JSON.stringify(res));
+			},
 			// 删除图片
 			deletePic(event, key) {
 				this[key].splice(event.index, 1);
@@ -1843,6 +1955,7 @@
 		align-items: center;
 		height: 110rpx;
 		font-size: 30rpx;
+		font-weight: 600;
 
 		.border {
 			background-color: #2663BF;
@@ -1852,6 +1965,18 @@
 		}
 	}
 
+	.label-box2 {
+		height: 100rpx;
+		
+
+	}
+
+	.label-box-small {
+		font-size: 28rpx;
+		margin-top: -25rpx;
+		font-weight: 500;
+	}
+
 	.border-bottom {
 		border-bottom: 1px #eee solid;
 	}
@@ -1859,7 +1984,16 @@
 	.border-top {
 		border-top: 1px #eee solid;
 	}
+
 	// .uni-forms-item__labe{
 	// 	width: ;
 	// }
+	.nodata {
+		width: 100%;
+		text-align: center;
+		height: 300rpx;
+		line-height: 300rpx;
+		font-size: 28rpx;
+		color: #ccc;
+	}
 </style>