shanxian-work-app/pages/mine/charts123.vue

<template>
	<view class="body">
	
	<allArea @getChild="childMess"></allArea>
	
	<swiper :interval="3000" :duration="500" :style="{ height:mainHeight+ 'px' }" style="background-color: #FFFFFF;"  v-bind:current="swiperTabIdx">
		<swiper-item>
			<view class="swiper-item" style="padding-top: 10%;overflow-x: scroll;">
				<view class="qiun-columns" style=" display: flex;">
					<view class="bt" style="flex: 1;">
						<button type="default" v-for="(item,index) in indexList" :key='index' @click="changeDate(index)">{{item}}</button>
					</view>
					<view class="qiun-charts-rotate" style="flex: 0 0 50%;padding: 0;">
						<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts-rotate"></canvas>
					</view>
					<view class="" style="flex:0 0 20%;">
						<view class="text">
							日新增订单
						</view>
							
					</view>
				</view>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<view class="swiper-item" style="padding-top: 10%;overflow-x: scroll;">
					<view class="qiun-columns" style=" display: flex;">

						<view class="qiun-charts-rotate" style="flex: 0 0 80%;padding: 0upx;">
							<canvas canvas-id="canvasColumnA" id="canvasColumnA" class="charts-rotate"></canvas>
						</view>
						<view class="" style="flex:1">
							<view class="text">
								用户数据
							</view>
						</view>
					</view>
				</view>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<view class="swiper-item" style="padding-top: 10%;overflow-x: scroll;">
					<view class="qiun-columns" style=" display: flex;">
						<view class="bt" style="flex:0 0 10%;">
							<!-- <button type="default" v-for="(item,index) in indexList" :key='index' @click="changeDate(index)">{{item}}</button> -->
						</view>
						<view class="qiun-charts-rotate" style="flex: 0 0 70%;padding: 0;">
							<!-- <view class="qiun-charts"> -->
							<!--#ifdef MP-ALIPAY -->
							<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts-rotate" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
							 :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchIt($event,'canvasLineA')"
							 @touchmove="moveLineA"></canvas>
							<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
							<!--#endif-->
							<!--#ifndef MP-ALIPAY -->
							<canvas canvas-id="canvasLineA" style="width:100%;" class="charts-rotate" id="canvasLineA" disable-scroll=true
							 @touchstart="touchIt($event,'canvasLineA')" @touchmove="moveLineA"></canvas>
							<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
							<!--#endif-->
							<!-- </view> -->
						</view>
						<view class="" style="flex:0 0 20%;">
							<view class="text">
								收益详情
							</view>
						</view>
					</view>
				</view>
			</view>
		</swiper-item>
	</swiper>

</view>
</template>
<script>
	import uCharts from '@/pages/mine/uchart/u-charts.js';
	import allArea from '../../component/allArea/allArea.vue'
	import {
		isJSON
	} from '@/pages/mine/uchart/checker.js';
	var _self;
	var canvaColumn = null;
	var app = getApp()
	var canvasObj = {};
	export default {
		data() {
			return {
				swiperTabIdx:2,
				// cWidth:'',
				// cHeight:'',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				pixelRatio: 1,
				serverData: '',
				indexList: "", //默认显示日期
				dayIndex: "",
				dayTabIndex: 0, //默认显示第一个按钮的日期数据
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					console.log(res, "这是屏幕信息")
					this.mainHeight = res.windowHeight;
				}
			})
			console.log(12344)
			_self = this;
			this.cWidth = uni.upx2px(500);
			this.cHeight = uni.upx2px(1100);
			// this.cWidth2 = uni.upx2px(700);
			// this.cHeight2 = uni.upx2px(1100);
			this.dayDate();
			this.userDate();
			this.getServerData(); //收益数据


		},
		methods: {
			
			childMess: function(e) {
				console.log(e, '这是子组件穿过来的值')
				this.areaID = e.areaID
				this.getServerData();
				// this.getFeed()
			},
			changeDate: function(e) {
				this.dayTabIndex = e
				console.log(e, "3333")
				this.dayDate();

			},
			getServerData() {
				let date = {
					area_id: 1,
					days: 'thirtyDays'
				}
				app.request('order/profitChart', date, 'GET').then(res => {
					let LineA = {
						categories: [],
						series: []
					};

					console.log(res, '这是所有数据999999999')
					var arr = new Array
					arr = res.data
					var data = new Array
					for (let i = 0, len = res.data.length; i < len; i++) { // 编程式
						console.log("for循环", arr[i]);
						console.log(arr[i].data, "数组")
						var aa = arr[i].data
						console.log(aa, "这是第" + i)
						LineA.series.push({
							name: arr[i].name,
							data: arr[i].data
						})


					}
					for (let k = 0, leng = aa.length; k < leng; k++) {
						// 	console.log(aa[k].value,'666666')

						// console.log(aa[k].date,"这是横坐标")
						LineA.categories.push(aa[k].date)

						// console.log(this.lineData2.categories,"这是横坐标")


						// console.log(this.lineData2.series,"这是最终数据")
					}
					console.log(res.data.data, "333")
					// LineA.categories=res.data.data.LineA.categories;
					// LineA.series=res.data.data.LineA.series;

					//第二根线为虚线的设置
					// LineA.series[1].lineType='dash';
					// LineA.series[1].dashLength=10;
					_self.textarea = JSON.stringify(LineA);
					_self.showLineA("canvasLineA", LineA);

				})
			},
			//日新增订单
			dayDate() {
				_self = this;
				this.cWidth = uni.upx2px(500);
				this.cHeight = uni.upx2px(1400);
				// this.cWidth2 = uni.upx2px(700);
				// this.cHeight2 = uni.upx2px(1100);

				let date = {
					area_id: 1,
					days: 'thirtyDays'
				}
				app.request('order/hourOrderNumber', date, 'GET').then(res => {

					let Column = {
						categories: [],
						series: []
					};
					// _self.serverData=res;
					console.log(res, '22222')
					// console.log(res, 'disanzu这是所有数据')
					_self.indexList = res.data.date

					Column.categories = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16",
						"17", "18", "19", "20", "21", "22", '23', "24"
					]
					var arr = []

					var day = res.data.date[_self.dayTabIndex]
					console.log(day, "444444555555555")
					arr.push({
						name: day,
						data: res.data.data[day]
					})
					console.log(arr, "444")

					Column.series = arr

					// Column.series=res.data.data
					console.log(Column, "6666")

					_self.showColumn("canvasColumn", Column);
				})
			},
			//用户数据统计
			userDate() {
				let date = {
					area_id: 1,
					days: 'thirtyDays'
				}
				app.request('user/newUsersChart', date, 'GET').then(res => {

					let Column = {
						categories: [],
						series: [

						]
					};
					console.log(res.data, "88888888")
					var arr = []
					for (let i = 0, len = res.data.length; i < len; i++) { // 编程式
						console.log("for循环", res.data[i]);
						Column.categories.push(res.data[i].date)

						arr.push(res.data[i].value)

						Column.series.push({
							name: res.data[i].date,
							data: arr,
							color: '#55ff00'
						})


					}
					console.log(arr, "898988989898")
					console.log(Column, "数组5656565655")

					// _self.indexList = res.data.date

					_self.showColumn1("canvasColumnA", Column);
				})
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: true,
					fontSize: 11,
					background: '#55ff00',
					pixelRatio: _self.pixelRatio,
					animation: true,
					rotate: true,

					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});
			},
			changeGaugeData() {
				let series = [{
					name: "完成率",
					data: Math.random()
				}]; //这里是随机数据，生产环境请从服务器获取，注意series数据类型为数组
				//这里我借用之前的categories数据，判断一下新数据的title.color，没有写死在程序里，以便于自定义
				let newTitleColor;
				for (let i = 0; i < _self.serverData.Gauge.categories.length; i++) {
					if (series[0].data <= _self.serverData.Gauge.categories[i].value) {
						newTitleColor = _self.serverData.Gauge.categories[i].color;
						break;
					}
				}

				canvasObj['canvasGauge'].updateData({
					series: series, //这里给了新数值
					categories: _self.serverData.Gauge.categories,
					title: {
						name: Math.round(series[0].data * 100) + '%',
						color: newTitleColor,
						fontSize: 25 * _self.pixelRatio,
						offsetY: 50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
					},
					subtitle: {
						name: '更新数据',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: -50 * _self.pixelRatio, //新增参数，自定义调整Y轴文案距离
					}
				});
			},
			touchLineA(e) {
				canvasObj['canvasLineA'].scrollStart(e);
			},
			moveLineA(e) {
				canvasObj['canvasLineA'].scroll(e);
			},
			touchEndLineA(e) {
				console.log(e, "00")
				canvasObj['canvasLineA'].scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasObj['canvasLineA'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			touchIt(e, id) {
				canvasObj['canvasLineA'].scrollStart(e);
				canvasObj[id].touchLegend(e, {
					animation: false
				});
				canvasObj[id].showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},

			touchMix(e) {
				canvasObj['canvasMix'].scrollStart(e);
			},
			moveMix(e) {
				canvasObj['canvasMix'].scroll(e);
			},

			showLineA(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 8,
					rotate: true,
					dataLabel:false,
					// dataLabel: false,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					// dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						// rotateLabel: true,
						// disableGrid: true,
						// itemCount: chartData.length,
						// labelCount: 30,
						// gridType: 'dash',
						disableGrid: true,
						type: 'grid',
						rotateLabel: true,
						// gridType: 'dash',
						itemCount: 30,
						// scrollShow: true,
						scrollAlign: 'left',
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 8,
						min: 10,
						max: 180,
						format: (val) => {
							return val.toFixed(0)
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						lineStyle: 'straight'
					},
				});

			},

			showColumn1(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					legend: true,
					fontSize: 8,
					background: '#55ff00',
					// pixelRatio: _self.pixelRatio,
					// animation: true,
					rotate: true,
					legend: {
						show: false
					},
					// rotateLabel: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						rotateLabel: true,
						disableGrid: true,
						itemCount: chartData.length,
						labelCount: 30,
						gridType: 'dash',
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					// extra: {
					// 	column: {
					// 		type: 'group',
					// 		width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
					// 	}
					// },
					extra: {
						lineStyle: 'straight'
					}
				});
			},
			// touchColumn(e) {
			// 	canvaColumn.showToolTip(e, {
			// 		format: function(item, category) {
			// 			if (typeof item.data === 'object') {
			// 				return category + ' ' + item.name + ':' + item.data.value
			// 			} else {
			// 				return category + ' ' + item.name + ':' + item.data
			// 			}
			// 		}
			// 	});
			// },
		}
	}
</script>
<style>/* 	top: 10%; */
	
	.qiun-charts-rotate {
		width: 500upx;
		height: 1400upx;
		background-color: #FFFFFF;
		padding: 25upx;
	}

	.charts-rotate {
		width: 500upx;
		height: 1400upx;
		background-color: #FFFFFF;
	}

	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;

	}

	.bt {
		width: 20%;
		/* 	margin-top: 21%upx; */
	}

	.bt1 {
		height: 50upx;
		width: 180upx;
		line-height: 50upx;
	}

	.bt button {
		font-size: 24upx;
		text-align: center;
		display: inline-block;
		vertical-align: bottom;
		height: 50upx;
		width: 180upx;
		line-height: 50upx;
		margin-top: 80upx;
		margin-bottom: 80upx;
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		/* Internet Explorer 9*/
		-moz-transform: rotate(90deg);
		/* Firefox */
		-webkit-transform: rotate(90deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(90deg);
		/* Opera */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
	}

	..bt button:first-child {
		/* 	margin-top: 300upx; */
	}

	.text {
		font-size: 36upx;
		height: 20upx;
		font-weight: 550;
		line-height: 280upx;
		width: 350upx;
		border-top: solid 2upx #004FB6;

		margin-top: 21%;
		/* 	height: 600upx;
			width: 200upx; */
		/* background-color: #004FB6; */
		color: #004FB6 !important;
		text-align: center;
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		/* Internet Explorer 9*/
		-moz-transform: rotate(90deg);
		/* Firefox */
		-webkit-transform: rotate(90deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(90deg);
		/* Opera */
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
	}


	/* .qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	} */
</style>