uni-zhihuikuangshan/pages/workbench/gridding/chart_statistics/chart_statistics.vue

<template>
	<view>
		<view class="section">
			<view class="title">统计图</view>
			<view class="box">
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="ring_1" :chartData="chartData" tooltipFormat="column_1"
						background="none" />
				</view>
			</view>
		</view>

		<view class="content">
			<view class="input_box">
				<view class="label"><text> * </text>时间范围：</view>
				<view class="box">
					<uni-datetime-picker v-model="range" type="daterange" rangeSeparator="至" />
				</view>
			</view>
			<view class="input_box">
				<view class="label"><text> * </text>网格编号（单选）：</view>
				<view class="box" @click="change()">
					{{array_text}}
				</view>
			</view>
			<view class="btn" @click="get_trouble_grid_region_annular()">查询</view>
		</view>
	</view>
</template>

<script>
	Date.prototype.format = function(fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};

		if (/(y+)/.test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		}

		for (var k in o) {
			if (new RegExp("(" + k + ")").test(fmt)) {
				fmt = fmt.replace(
					RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			}
		}

		return fmt;
	}
	export default {
		data() {
			return {
				// 时间范围
				range: [],
				array_text: "",
				// 网格编号的配置参数
				array: [],
				// 网格编号的原始数据
				array_data: [],
				// 选中网格编号的id
				array_id: "",

				// 图表数据
				chartData: {
					categories: [],
					"series": [{
						"data": []
					}]
				},
				ring_1: {
					"dataLabel": false,
					"legend": {
						"position": "bottom",
						"float": "left"
					},
					"title": {
						"name": " "
					},
					"subtitle": {
						"name": " "
					},
					"extra": {
						"ring": {
							"centerColor": "#FFFFFF",
							"border": true,
						},

					}
				}

			};
		},
		watch: {
			range(newval) {
				console.log("范围选:", this.range);
			},
		},
		onLoad() {
			// 初始化时间
			this.range[0] = new Date().format("yyyy-MM-01")
			this.range[1] = new Date().format("yyyy-MM-dd")
			// console.log(this.range)

			this.get_trouble_grid_number_list()
		},
		methods: {
			// 配置参数 网格编号
			get_trouble_grid_number_list() {
				this.$api.trouble_grid_number_list({
					type: 1
				}).then((res)=>{
					// console.log(res.data.data)
					this.array_data = res.data.data
					
					const data = res.data.data
					data.forEach((item, index) => {
						this.array.push(item.itemValue)
					})
					
					// 初始化
					// 当前显示的名称
					this.array_text = data[0].itemValue
					// 当前选中的id
					this.array_id = data[0].id
					
					// 初始化查询
					this.get_trouble_grid_region_annular()
				})
			},


			change() {
				uni.showActionSheet({
					itemList: this.array,
					success: (res) => {
						// 当前显示的名称
						this.array_text = this.array_data[res.tapIndex].itemValue
						// 当前选中的id
						this.array_id = this.array_data[res.tapIndex].id
					}
				});
			},

			// 查询
			get_trouble_grid_region_annular() {
				uni.showLoading({
					mask: true
				})
				this.$api.trouble_grid_region_annular({
					type: 1,
					
					number_id: this.array_id,
					start_time: this.range[0],
					end_time: this.range[1]
				}).then((res)=>{
					uni.hideLoading()
					console.log(res.data.data)
					
					const data = res.data.data
					const series = []
					data.map((item, index) => {
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm['name'] = item.name + '(' + item.size + '次' + ')';
						sevm['value'] = item.size;
						//将项放进新的数组
						series.push(sevm)
					})
					this.chartData.series[0].data = series
					console.log(this.chartData.series[0].data)
				})

			}
		}
	}
</script>

<style lang="scss">
	.section {
		box-sizing: border-box;
		padding: 25rpx;

		.title {
			line-height: 60rpx;
			border-left: 8rpx solid #009FE8;
			box-sizing: border-box;
			padding-left: 20rpx;
			margin-bottom: 20rpx;
		}

		.box {

			/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
			.charts-box {
				width: 100%;
				height: 350px;
			}
		}
	}

	.content {
		margin-bottom: 50rpx;
		box-sizing: border-box;
		padding: 25rpx;

		.input_box {
			margin-bottom: 20rpx;
			font-size: 32rpx;

			.label {
				min-height: 80rpx;
				line-height: 80rpx;
				color: #6C6F74;

				text {
					color: red;
				}
			}

			.box {
				width: 700rpx;
				min-height: 90rpx;
				line-height: 90rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #E9EBF2;

				box-sizing: border-box;
				padding: 0 25rpx;

				/deep/.uni-date-editor--x {
					.uniui-clear {
						display: none;
					}
				}

				/deep/.uni-date-x--border {
					box-sizing: border-box;
					border-radius: 4px;
					border: none;
				}

				/deep/.uni-date-x {
					padding: 0;
				}
			}
		}

		.btn {
			margin-top: 40rpx;
			background-color: #009FE8;
			padding: 25rpx 50rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>