province-uniapp-qinghai-ipad/pages/queryStatistics/storageDistrbution/index.vue

<template>
	<view class="content">
		<view class="charts-box">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="onTap" />
		</view>
	</view>
</template>

<script>
	import * as api from "@/api/statisticalQuery.js"
	export default {
		data() {
			return {
				chartData: {},
				opts: {
					color: ["#FFC71C", "#19BE6B"],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {
						float: 'left',
						position: 'top',
						margin: '20'
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							seriesGap: 5,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			};
		},
		onLoad() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				api.warehouseCapacity().then(res => {
					let cityList = []
					let emptyCapacity = []
					let totalCapacity = []
					res.data.map(item => {
						if (item.cityName) {
							cityList.push(item.cityName)
							totalCapacity.push(item.designCapacity)
							emptyCapacity.push(item.actualNoneCapacity)
						}

					})
					let option = {
						categories: cityList,
						series: [{
							name: "总仓容",
							data: totalCapacity
						}, {
							name: "有效空仓容",
							data: emptyCapacity
						}]
					}
					this.chartData = JSON.parse(JSON.stringify(option));
				})
			},
			onTap() {
				uni.navigateTo({
					url: '/pages/queryStatistics/storageDistrbution/details'
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.content {
		padding: 0 30px;
		height: calc(100vh - 44px);

		.charts-box {
			margin: 0 30px;
			height: 300px;
			padding-top: 100px;
		}
	}
</style>