web-store-retail-h5/components/distribution/recommendPerformance.vue

<template>
	<div class="width-auto">
		<div class="title">
			<div>{{'推荐业绩分布'}}</div>
			<div style="color: #999;font-size: 14px;margin: 0px 0 0 14px">{{'本人及伞下前十'}}</div>
		</div>
		<div class="color-s">
			<div id="mounthData4" :style="myChartStyle">
			</div>
		</div>
		<view class="flex-s">
			<div class="item-s" v-for="item in gradeList">
				<div>
					<div class="bg-color" :style="{background:`${item.color}`}"></div>
					<div style="color: #333;text-align: center;">{{item.gradeName}}</div>
				</div>
			</div>
		</view>
	</div>
</template>

<script>
	import * as api from '@/config/distribute.js'
	import {
		parentAchieveLeft,
		systemGrandeRange
	} from "@/config/distribute.js";
	import * as echarts from "echarts";

	export default {
		data() {
			return {
				arr: [],
				barList: {},
				gradeList: [],
				dataLists: {},
				myChartStyle: {
					width: "690rpx",
					height: "1000rpx",
					margin: "10rpx 0 10rpx 20rpx",
				}, //图表样式
			}
		},
		mounted() {

		},
		created() {
			this.systemGrandeRange()
			this.upDateCover2()
		},
		methods: {
			systemGrandeRange() {
				// 所有等级名称
				systemGrandeRange().then((res) => {
					this.gradeList = res.data
					let _barList = {
						id: [],
						name: [],
						color: []
					}
					res.data.forEach((item) => {
						_barList.id.push(item.pkId)
						_barList.name.push(item.gradeName)
						_barList.color.push(item.color)
					});
					this.barList = _barList
				})
			},
			initArrData(_data) {
				let _barList = {};
				let _barList1 = {};
				let arr = this.arr;
				this.systemGrandeRange();
				_data.forEach((item) => {
					if (item.umbrellaList.length > 0) {
						let lists = this.sortBy(item.umbrellaList, "gradeValue")
						this.barList.id.forEach((_item, index) => {
							lists.forEach((items) => {
								if (_item == items.pkGrade) {
									_barList[_item] = this.barList.name[index];
									_barList1[_item] = this.barList.color[index];
								}
							})
						});
					} else if (item.umbrellaList.length == 0) {
						this.barList.id.forEach((_item, index) => {
							_barList[_item] = this.barList.name[index];
							_barList1[_item] = this.barList.color[index];
						});
					}
				});
				let _list = {
					id: [],
					name: [],
					color: []
				};
				for (let key in _barList) {
					_list.id.push(key);
					_list.name.push(_barList[key]);
				}
				for (let key in _barList1) {
					_list.color.push(_barList1[key])
				}

				this.barList = _list;
				let _arrList = {};
				this.barList.id.forEach((item) => {
					let _arrs = [];
					for (let i = 0; i < _data.length; i++) {
						_arrs.push(0);
					}
					_arrList[item] = _arrs;
				});
				return this.initServiceData(_data, _arrList);
			},
			initServiceData(_data, _arrList) {
				//初始化data值
				_data.forEach((item, index) => {
					if (item.umbrellaList != undefined) {
						item.umbrellaList.forEach((items) => {
							if (_arrList[items.pkGrade] != undefined) {
								_arrList[items.pkGrade][index] = items.achieve;
							}
						})
					}
				});
				return _arrList;
			},
			getStartTime() {
				let date = new Date()
				date.setDate(1) // 将当前时间的日期设置成第一天
				let year = date.getFullYear() // 得到当前年份
				let month = date.getMonth() + 1 // 得到当前月份（0-11月份，+1是当前月份）
				month = month > 9 ? month : '0' + month // 补零
				return year + '-' + month
			},
			getEndTime() {
				var date = new Date();
				var year = date.getFullYear() // 年
				var month = date.getMonth() + 1; // 月
				var day = date.getDate(); // 日
				var hour = date.getHours(); // 时
				var minutes = date.getMinutes(); // 分
				var seconds = date.getSeconds() //秒
				// 给一位数的数据前面加 “0”
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (day >= 0 && day <= 9) {
					day = "0" + day;
				}
				if (hour >= 0 && hour <= 9) {
					hour = "0" + hour;
				}
				if (minutes >= 0 && minutes <= 9) {
					minutes = "0" + minutes;
				}
				if (seconds >= 0 && seconds <= 9) {
					seconds = "0" + seconds;
				}
				return year + "-" + month + "-" + day + " "
			},
			sortBy(array, field, sort = "asc") {
				const sortOpt = {
					asc: (a, b, sortField) => a[sortField] - b[sortField],
					desc: (a, b, sortField) => b[sortField] - a[sortField],
				};
				array.sort((a, b) => sortOpt[sort](a, b, field));
				return array;
			},
			upDateCover2(val) {
				console.error(val)
				api
					.parentAchieveLeft({
						month: val ? val.startDate : this.getStartTime()
						// startDate:val? val.startDate :this.getStartTime(),
						// endDate: val?val.endDate:this.getEndTime(),
						// endDate: val?val[1]:'2023-06-29',
						// startDate:val? val[0] :'2023-06-01',
					})
					.then((res) => {
						let xAxisData = []
						//初始化services数组
						let _arrList = this.initArrData(res.data);
						//初始化data值
						res.data.forEach((item, index) => {
							xAxisData.push(item.memberName)
						})
						let _series = [];
						this.barList.name.forEach((item, index) => {
							let _service = {
								name: item,
								showSymbol: false,
								type: 'bar',
								stack: 'one',
								color: this.barList.color[index],
								data: _arrList[this.barList.id[index]]
							};
							_series.push(_service);
						});
						this.$nextTick(() => { //结合$nextTick使用
							this.drawChart(xAxisData, _series);
						})
					})
			},
			drawChart(arr1, series) {
				// 基于准备好的dom，初始化echarts实例  这个和上面的main对应
				let myChart = echarts.init(document.getElementById('mounthData4'))
				// 指定图表的配置项和数据
				let option = {
					// legend: {
					//     data: this.barList.name,
					//     left: '10%',
					//
					// },



					tooltip: {},
					textStyle: {
						fontSize: 10,
					},
					xAxis: {
						data: arr1,
						bottom: 10,
						axisLabel: {
							formatter: function(params) {
								var newParamsName = ''; // 拼接后的新字符串
								var paramsNameNumber = params.length; // 实际标签数
								var provideNumber = 2; // 每行显示的字数
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 如需换回，算出要显示的行数

								if (paramsNameNumber > provideNumber) {
									/** 循环每一行,p表示行 */

									for (var i = 0; i < rowNumber; i++) {
										var tempStr = ''; // 每次截取的字符串
										var start = i * provideNumber; // 截取位置开始
										var end = start + provideNumber; // 截取位置结束

										// 最后一行的需要单独处理

										if (i == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + '\n';
										}
										newParamsName += tempStr;
									}
								} else {
									newParamsName = params;
								}

								return newParamsName;
							},
							interval: 0,
							textStyle: {
								fontSize: 8,
							},
							axisLabel: {
								// 轴文字
								show: false,
								color: "#A0B2D3",
								fontSize: 8,
							},
						}
					},
					// xAxis: {
					//     data: arr1,
					//     bottom:10,
					//     axisLabel: {
					//         interval: 0,
					//         margin:10,
					//         textStyle:{
					//             fontSize:10,
					//         },
					//         formatter:function(value,index)
					//         {
					//             return value;
					//         }
					//     },
					// },
					yAxis: {
						axisLabel: {
							// 轴文字
							show: true,
							fontSize: 8,
						},
					},
					grid: {
						bottom: 100,
						left: '15%', // 调整y轴字体显示不完整，原来值是
					},
					series: series
				}

				// myChart.clear();
				myChart.setOption(option);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.item-s {
		padding-bottom: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 100%;
		line-height: 30px;
		margin-left: 20rpx;
		// margin-right: 20rpx;
	}

	.bg-color {
		width: 40px;
		height: 20px;
		border-radius: 4px;
		margin: 0 auto;
	}

	.flex-s {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		//align-items: center;
		text-align: center;
		background-color: #fff;
		position: absolute;
		//justify-content: center;
		bottom: 10rpx;
		// height: 80rpx;
		// line-height: 80rpx;
	}

	.width-auto {
		position: relative;
		height: 1400rpx;
		background-color: #fff;
		width: 690rpx;

		border-radius: 20rpx;
		margin: 20rpx auto;
	}

	.title {
		padding: 20rpx 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 10rpx solid #f3f3f3;
		margin-top: 10rpx;
		font-size: 28rpx;
		display: flex;
	}

	.color-s {
		// width: 790px;
		// height: 646px;
		// border: 4px solid #979797;
		// margin: 80px;
		// position: absolute;
		// left: 0px;
		// top: 10px;
	}

	.title1 {
		position: absolute;
		left: 80px;
		top: 40px;
		display: flex;
		color: #333333;
		font-size: 20px;

		div {}
	}
</style>