mdapp/pages/shop/chart.vue

<template>
	<view class="scoped-stat">
		<!-- <view class="ss-top" @click="openDeptPopup">
			<view class="label">
				当前：<view class="v">{{ curDeptObj ? curDeptObj.deptName : '未知' }}</view>
			</view>
			<image class="sign" :src="rightIconPath2" mode="aspectFill"></image>
		</view> -->

		<view class="ss-op" v-if="!isdeptShow">
			<view class="so-title">
				<view class="sot-tips">
					<view :class="searchData.store_name === item.val ? 'op cur' : 'op'" v-for="(item, index) in storeTypeList" :key="index" @click="navHandle(item)">{{ item.key }}</view>
				</view>
			</view>
			<!-- :style="'height: ' + chartBoxHeight" -->
			<view class="so-main charts-box">
				<qiun-data-charts 
					type="bar"
					:opts="opts"
					:chartData="chartData"
				/>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			storeTypeList: [],
			searchData: {store_name: ''},
			chartData: {},
			opts: {
				color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
				padding: [15,30,0,5],
				enableScroll: false,
				legend: {},
				xAxis: {
					boundaryGap: "justify",
					disableGrid: false,
					min: 0,
					axisLine: false,
					
					// interval: Math.ceil(Math.max.apply(null, valueDataAll) / 5) || 1,
					// max: Math.ceil(Math.max.apply(null, valueDataAll) / 5) * 5 || 5,
					// max: 10
				},
				yAxis: {},
				extra: {
					bar: {
						type: "group",
						width: 30,
						meterBorde: 1,
						meterFillColor: "#FFFFFF",
						activeBgColor: "#000000",
						activeBgOpacity: 0.08,
						linearType: "custom",
						barBorderCircle: true,
						seriesGap: 2,
						categoryGap: 2
					}
				}
			},
		}
	},
	onLoad(params) {
	},
	created() {
		const dictObj = uni.getStorageSync('MD_dict')
		let store_type = dictObj.store_type || []
		let storeTypeList = [{key: '全部', val: ''}]
		const userInfo2 = uni.getStorageSync('MD_userInfo2')
		if (userInfo2.roles == 1 || userInfo2.roles == 5) {
			store_type.forEach(item => {
				if (item.key !== '其它') {
					storeTypeList.push(item)
				}
			})
		}
		this.storeTypeList = [...storeTypeList]
		this.getDtl()
	},
	methods: {
		navHandle (obj) {
			this.searchData = {
				store_name: obj.val
			}
			this.getDtl()
		},
		getDtl () {
			uni.api.estate.apistorechart({...this.searchData, action: '报备'}).then(res => {
				let chartData = {}
				chartData.categories = res.categories
				chartData.series = [res.series]
				let valueDataAll = res.series.data
				uni.api.estate.apistorechart({...this.searchData, action: '带访'}).then(two => {
					chartData.series.push(two.series)
					this.chartData = JSON.parse(JSON.stringify(chartData))
					valueDataAll = [...valueDataAll, ...two.series.data]

					let opts = {...this.opts}
					opts.xAxis = {
						...opts.xAxis,
						interval: Math.ceil(Math.max.apply(null, valueDataAll) / 5) || 1,
						max: Math.ceil(Math.max.apply(null, valueDataAll) / 5) * 5 || 5,
					}
					this.opts = JSON.parse(JSON.stringify(opts))

				})
			})
			
			
		},
		openDeptPopup () {
			this.isdeptShow = true
		},
		closeDeptPopup (obj) {
			this.isdeptShow = false
			if (obj && obj.indexs) {
				this.curDeptIndex = obj.indexs[0]
				this.curDeptObj = this.deptList[this.curDeptIndex]
				this.getDtl()
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.charts-box {
    width: 100%;
    height: calc(100vh - 100px);
  }
.scoped-stat {
	background: #f4f6f9;
	height: calc(100vh);
}

.ss-top {
	height: 90rpx;
	display: flex;
	padding: 0 30rpx;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	margin-bottom: 20rpx;
	.label {
		color: #666;
		font-size: 30rpx;
		.v {
			display: inline-block;
			color: #000;
		}
	}
	.sign {
		width: 11rpx;
		height: 20rpx;
	}
}

.ss-op {
	background: #fff;
	margin-bottom: 20rpx;
	padding: 20rpx 30rpx 40rpx;
	height: calc(100vh);
	.so-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		padding-bottom: 30rpx;
	}
	.so-main {
		min-height: 180rpx;
	}
	.so-count {
		width: 100%;
		height: 180rpx;
		line-height: 180rpx;
		text-align: center;
		color: #007dff;
		background: #f6fbff;
		font-size: 50rpx;
		font-weight: bold;
		&.t2 {
			color: #f00;
			background: #fff7f6;
		}
	}

	.sot-tips {
		display: inline-block;
		.op {
			margin-right: 20rpx;
			display: inline-block;
			border: 1PX solid #eee;
			border-radius: 10rpx;
			padding: 6rpx 20rpx;
			color: #999;
			&.cur {
				border-color: #007dff;
				color: #007dff;
			}
		}
	}
}
</style>