web-africa-h5/pages/market/performance/placementDiagram/realPerformance.vue

<template>
	<view class="content-box">
		<view class="content d-e-c">
			<picker :range="monthList" @change="changeMonth">
				<view class="picker-small">
					<text>{{ monthIndex + 1 }}{{ $t('ENU_SETTLE_P_3') }}</text>
					<u-icon name="arrow-down-fill" size="28rpx" color="#333"></u-icon>
				</view>
			</picker>
		</view>
		<view style="width: 750rpx;height: 600rpx;">
			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
		</view>
		
		<liu-calendar-date ref="calendar2" isRange @checked="getDate2"></liu-calendar-date>
	</view>
</template>

<script>
var getStarDay = function() {
	let date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	month = month > 9 ? month : '0' + month;
	return year + '-' + month + '-01';
};
var getEndDay = function() {
	let date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	month = month > 9 ? month : '0' + month;
	let day = date.getDate();
	if (day > 1) {
		day -= 1;
	}
	day = day < 10 ? '0' + day : day;
	return year + '-' + month + '-' + day;
};
export default {
	data() {
		return {
			now: 0,
			monthList: [],
			monthIndex: 0,
			checkDay2: [getStarDay(), getEndDay()],
			chartData: {},
			//这里的 opts 是图表类型 type="column" 的全部配置参数，您可以将此配置复制到 config-ucharts.js 文件中下标为 ['column'] 的节点中来覆盖全局默认参数。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
			opts: {
				timing: 'easeOut',
				height: uni.upx2px(1000),
				duration: 1000,
				rotate: false,
				rotateLock: false,
				color: ['#ee5858', '#01c291', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [15, 15, 0, 5],
				fontSize: 11,
				fontColor: '#666666',
				dataLabel: false,
				dataPointShape: true,
				dataPointShapeType: 'solid',
				touchMoveLimit: 60,
				enableScroll: false,
				enableMarkLine: false,
				legend: {
					show: true,
					position: 'bottom',
					float: 'center',
					padding: 5,
					margin: 5,
					backgroundColor: 'rgba(0,0,0,0)',
					borderColor: 'rgba(0,0,0,0)',
					borderWidth: 0,
					fontSize: 11,
					fontColor: '#666666',
					lineHeight: 11,
					hiddenColor: '#CECECE',
					itemGap: 10
				},
				xAxis: {
					disableGrid: true,
					disabled: false,
					axisLine: true,
					axisLineColor: '#CCCCCC',
					calibration: false,
					fontColor: '#666666',
					fontSize: 11,
					lineHeight: 20,
					marginTop: 0,
					rotateLabel: false,
					rotateAngle: 45,
					itemCount: 5,
					boundaryGap: 'center',
					splitNumber: 5,
					gridColor: '#CCCCCC',
					gridType: 'solid',
					dashLength: 4,
					gridEval: 1,
					scrollShow: false,
					scrollAlign: 'left',
					scrollColor: '#A6A6A6',
					scrollBackgroundColor: '#EFEBEF',
					title: '',
					titleFontSize: 11,
					titleOffsetY: 0,
					titleOffsetX: 0,
					titleFontColor: '#666666',
					format: 'xAxisDemo1'
				},
				yAxis: {
					data: [
						{
							min: 0
						}
					],
					disabled: false,
					disableGrid: false,
					splitNumber: 5,
					gridType: 'solid',
					dashLength: 8,
					gridColor: '#CCCCCC',
					padding: 10,
					showTitle: false
				},
				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
						seriesGap: 2,
						categoryGap: 3,
						barBorderCircle: true,
						linearType: 'none',
						linearOpacity: 1,
						colorStop: 0,
						meterBorder: 1,
						meterFillColor: '#FFFFFF',
						labelPosition: 'outside'
					},
					tooltip: {
						showBox: true,
						showArrow: true,
						showCategory: false,
						borderWidth: 0,
						borderRadius: 0,
						borderColor: '#000000',
						borderOpacity: 0.7,
						bgColor: '#000000',
						bgOpacity: 0.7,
						gridType: 'solid',
						dashLength: 4,
						gridColor: '#CCCCCC',
						boxPadding: 3,
						fontSize: 11,
						lineHeight: 20,
						fontColor: '#FFFFFF',
						legendShow: true,
						legendShape: 'auto',
						splitLine: true,
						horizentalLine: false,
						xAxisLabel: false,
						yAxisLabel: false,
						labelBgColor: '#FFFFFF',
						labelBgOpacity: 0.7,
						labelFontColor: '#666666'
					},
					markLine: {
						type: 'solid',
						dashLength: 4,
						data: []
					}
				}
			}
		};
	},
	onReady() {
		this.initDate();
	},
	methods: {
		initDate() {
			let date = new Date();
			let self = this;
			self.now = date.getMonth();
			for (var i = 1; i <= self.now + 1; i++) {
				self.monthList.push(i + self.$t('ENU_SETTLE_P_3'));
			}
			this.monthIndex = self.now;
			this.getServerData();
			console.log(self.monthList);
		},
		changeMonth(e) {
			this.monthIndex = e.detail.value;
			this.getServerData();
		},
		//打开选择器
		openCalendar2() {
			this.$refs.calendar2.open();
		},
		//日期区间选择成功
		getDate2(e) {
			this.checkDay2 = e.value;
			this.getServerData();
		},
		getServerData() {
			let self = this;
			self._get(
				'member/api/achieve/query-real-performance',
				{
					month: self.monthIndex + 1
				},
				res => {
					let list = res.data;
					let obj = {
						categories: [self.$t('N_I_103'), self.$t('N_I_108'), self.$t('N_I_104')],
						series: [
							{
								data: [list.leftGrandTotal * 1, list.firstLeftPurchaseTotal, list.firstLeftRepurchaseTotal],
								name: self.$t('S_C_18')
							},
							{
								data: [list.rightGrandTotal * 1, list.firstRightPurchaseTotal, list.firstRightRepurchaseTotal],
								name: self.$t('S_C_19')
							}
						]
					};
					console.log(obj);
					this.chartData = JSON.parse(JSON.stringify(obj));
				}
			);
		}
	}
};
</script>

<style scoped>
page {
	background-color: #fff;
}

.content-box {
	background-color: #ffffff;
	min-height: 100vh;
}

.content {
	padding: 26rpx 22rpx 26rpx 23rpx;
}

.content-picker {
	padding: 26rpx 22rpx 26rpx 23rpx;
}

.picker-small {
	height: 72rpx;
	border: 1rpx solid #eeeeee;
	border-radius: 15rpx;
	font-size: 28rpx;
	padding: 0 28rpx 0 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}

.charts {
	width: 750rpx;
	height: 1000rpx;
}
</style>