supervise/supervise-uniapp/pages/index/AccountBalance.vue

<template>

	<view class="pages">

		<view class="top">
			<!-- <image src="../../static/baseIcon/orders.png" style="width: 18px;height: 18px;" mode="aspectFill"></image> -->
			<text class="top-name">{{info.name}}</text>
			<text class="top-date">{{info.date}}</text>

		</view>

		<view class="content">

			<view class="content-lift">
				<image src="https://supervise.yxtsoft.com/img/newApp/zhye.png" style="width: 18px;height: 18px;"
					mode="aspectFill"></image>
				<text class="content-title">总余额</text>
			</view>
			<text class="content-balance">{{info.balance}}万元</text>
		</view>

		<view class="echarts" v-show="uEchartsShow">

			<qiun-data-charts type="bar" ref="charts" :ontouch='true' :echartsApp="true" :opts="opts"
				:chartData="chartData" />

		</view>
		
		<view v-show="!uEchartsShow">
			<view style="display:flex;flex-direction: column;justify-content: center;align-items: center;">
				<image src="../../static/baseIcon/notData.png" mode="aspectFill" style="width: 150px;height: 150px;">
				</image>
				<text style="text-align: center;width: 100%; color: #717171;">暂无数据</text>
		
			</view>
		</view>


	</view>

</template>

<script>
	export default {

		data() {
			return {
				uEchartsShow: false,
				info: {
					sid: "",
					name: "",
					number: "",
					date: "",
					balance: "",
				},
				bankList: [],
				chartData: {

				},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 15, 5], // 上、 右、下、左
					enableScroll: false,
					legend: {
						show: false,
					}, // 隐藏X轴下方图列
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: true,
						max: 1000,
						rotateLabel: true,
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						gridType: 'dash',
						dashLength: 8,
						gridColor: '#CCCCCC',
					},
					extra: {
						bar: {
							type: "stack",
							width: 30,
							meterBorde: 1,
							meterFillColor: "#f0f",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
						}
					}
				}

			}
		},
		onLoad(option) {
			this.info = {
				sid: option.sid,
				name: option.name,
				number: option.number,
				date: option.date,
				balance: option.balance,
			}
			this.getServerData(this.info.sid)
		},
		methods: {

			getServerData(sid) {
				this.$api.getAccountByProjectSid(sid).then((resp) => {
					console.log('1111>>>>>>', resp)

					this.bankList = resp
					var bankData = []
					var balanceData = []

					console.log('1111>>>>>>', this.bankList)

					this.uEchartsShow = this.bankList.length > 0

					for (var i = 0; i < this.bankList.length; i++) {

						var strEnd = this.bankList[i].accountNumber.substring(this.bankList[i].accountNumber
							.length - 4, this.bankList[i].accountNumber.length)

						console.log('1111>>>>>>', strEnd)

						bankData.push(this.bankList[i].bank + strEnd)
						balanceData.push(this.bankList[i].wBalance)
					}
					console.log('bankData>>>>>>', bankData)


					setTimeout(() => {
						//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
						let res = {
							categories: bankData,
							series: [{
									name: "账户余额",
									data: balanceData,
									format: "seriesDemo2"
								},

							]
						};

						this.opts.xAxis.format = "xAxisDemo3"
						this.chartData = JSON.parse(JSON.stringify(res));
					}, 500);


				}).catch(e => {
					console.log('eeeee', e)

				})

			}
		}
	}
</script>

<style lang="scss">
	.pages {

		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		.top {
			background: #fff;
			padding: 20px 25px;
			display: flex;
			flex-direction: row;
			align-items: center;

			.top-name {
				flex: 1;
				margin-right: 10px;
				font-size: 16px;
				color: #000;
				font-weight: 600;
				font-family: sans-serif;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.top-date {
				flex-shrink: 0;
				font-size: 13px;
				color: #717171;
			}
		}

		.content {
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 3px;
			justify-content: space-between;
			padding: 13px 18px;

			.content-lift {
				display: flex;
				flex-direction: row;
				align-items: center;

				.content-title {
					margin-left: 5px;
					color: #191919;
					font-size: 14px;
				}

			}

			.content-balance {
				color: #6C6C6C;
				font-size: 12px;
			}

		}

		.echarts {
			background: #fff;
			margin-top: 2px;
			width: 100%;
			height: 300px;
		}

	}
</style>