province-uniapp-qinghai-ipad/pages/storageInfoAnalysis/storageInfoAnalysis.vue

<template>
	<view class="content">
		<view class="chart-top">
			<view class="chart-top-item left">
				<view class="title">按粮食品种展示</view>
				<qiun-data-charts type="mount" :opts="opts" :chart-data="chartData1" class="chart-line"
					@getIndex="onTap"></qiun-data-charts>
			</view>
			<view class="chart-top-item right">
				<view class="title">按粮食性质展示</view>
				<qiun-data-charts type="mount" :opts="opts" :chart-data="chartData2"
					class="chart-line" @getIndex="gotoList"></qiun-data-charts>
			</view>
		</view>
		<view class="chart-bottom">
			<view class="chart-bottom-item">
				<view class="title">按生产年度展示</view>
				<view class="bar">
					 <uni-data-select
					      v-model="pzValue"
					      :localdata="[
							  { value: '小麦', text: '小麦'},
							  { value: '青稞', text: '青稞'},
							  { value: '稻谷', text: '稻谷'},
						  ]"
						  :clear="false"
					      @change="change"
						  class="pz-select"
					    ></uni-data-select>
					<view class="unit">单位: 吨</view>
				</view>
				<qiun-data-charts type="area" :opts="opts2" :chart-data="chartData3" class="chart-line"></qiun-data-charts>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getReserveChartDatas
	} from '@/api/storageInfoAnalysis';
	export default {
		data() {
			return {
				chartData3: {},
				chartData1: {},
				chartData2: {},
				pzValue: '小麦',
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true,
						rotateLabel: false,
						rotateAngle: 45,
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						mount: {
							type: "bar",
							widthRatio: 0.8,
						}
					}
				},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow"
						}
					}
				},
			}
		},
		mounted() {
			this.getServerData()
		},
		methods: {
			//图表渲染
			getServerData() {
				getReserveChartDatas({
					type: 1
				}).then(resp => {
					if (resp.code === 200) {
						const data = resp.data.map(d => {
							return {
								name: d.pzName,
								value: d.kcsl,
								raw: d,
							}
						})
						this.chartData1 = {
							series: [{
								data: data,
							}, ]
						};
					}
				})

				getReserveChartDatas({
					type: 2
				}).then(resp => {
					if (resp.code === 200) {
						const data = resp.data.map(d => {
							let name = d.hwxzName
							if(name && name.length > 6) {
								name = `${name.substr(0, 6)}...`
							}
							return {
								name: name ,
								value: d.kcsl,
								raw: d,
							}
						})
						this.chartData2 = {
							series: [{
								data: data,
							}, ]
						};
					}
				})
				
				this.renderChart3()
			},
			renderChart3() {
				return getReserveChartDatas({
					type: 3,
					pzName: this.pzValue,
				}).then(resp => {
					if(resp.code == 200) {
						const categories = []
						const maps = {}
						resp.data.forEach(d => {
							if(! categories.includes(d.scnfName)) {
								categories.push(d.scnfName)
							}
						})
						
						const data = []
						categories.forEach(d => {
							const n = resp.data.find(dd => dd.scnfName === d)?.kcsl || 0
							data.push(n)
						})
						console.log('data', data);
						
						this.chartData3 = {
							categories: categories,
							series: [{
								name: this.pzValue,
								data: data,
							}, ]
						};
					}
				})
				
			},
			onTap() {
				console.log('tap', arguments);
				uni.navigateTo({
					// url: '/pages/storageInfoAnalysis/granaryInfo',
					url: '/pages/storageInfoAnalysis/details'
				})
			},
			gotoList() {
				uni.navigateTo({
					url: '/pages/storageInfoAnalysis/list'
				})
			},
			change(pzName) {
				this.renderChart3()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 10px;
		height: 100vh;

		.chart-top {
			display: flex;
			justify-content: space-around;
			height: 40vh;

			.chart-top-item {
				width: 45%;
			}

			.chart-line {
				width: 100%;
			}
		}

		.chart-bottom {
			margin-top: 40px;
			.bar {
				margin-top: 5px;
				margin-bottom: 5px;
				display: flex;
				justify-content: space-between;
				.pz-select {
					margin-left: 10px;
					max-width: 200px;
				}
				.unit {
					margin-right: 10px;
				}
			}
		}
	}
</style>