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

<template>
	<view class="" >
		<view @click="back" class="back">
			<text>返回上一页</text>
		</view>
		<view class="select" style="">
			<view class="allArea">
				<view class="area1">
					<text class="arear-text" @click="tanKuang">{{list[curVal].text}}</text>
					<image src="../../static/down.png" mode=""></image>
				</view>
			</view>
		</view>
		<swiper :interval="3000" :duration="500" :style="{ height:mainHeight + 'px' }" style="padding-top: 8%;width: 100%;background-color: #FFFFFF;"
		 v-bind:current="swiperTabIdx">
			<swiper-item>
				<view class="swiper-item" style="height: 100%;">
					<view class="qiun-columns" style=" display: flex;overflow-y: scroll; ">
						<view class="bt" style="flex:0 0 5%;">
							<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 60%;padding:0;">
							<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts-rotate" style="padding-top: 20upx"></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">
						<view class="qiun-columns" style=" display: flex;overflow-y: scroll;">
							<view class="bt" style="flex:0 0 5%;">
								<!-- <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: 0upx;">
								<canvas canvas-id="canvasColumnA" id="canvasColumnA" class="charts-rotate" disable-scroll=true  @touchstart="touchIt($event,'canvasColumnA')"
								 @touchmove="moveLineA"></canvas>
							</view>
							<view class=""  style="flex:0 0 20%;">
								<view class="text">
									用户数据
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item">
						<view class="qiun-columns" style=" display: flex;overflow-y: scroll;">
							<view class="bt" style="flex:0 0 5%;">
								<!-- <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, //默认显示第一个按钮的日期数据
				list: [{ //所有区域选项
					areaID: '',
					text: '全部区域',
					value: -1,
				}], //骑行区域选择列表
				value1: 0, //骑行区与第一个显示什么
				curVal: uni.getStorageSync('curVal') ? uni.getStorageSync('curVal') : 0, //骑行区与第一个下标
			}
		},
		onLoad() {
			var arr = uni.getStorageSync('allArea');
			this.list = this.list.concat(arr);
			console.log(this.list)
			uni.getSystemInfo({
				success: res => {
					console.log(res, "这是屏幕信息")
					this.mainHeight = res.windowHeight;
				}
			})
			console.log(12344)
			_self = this;
			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(1100);
			// this.cWidth2 = uni.upx2px(700);
			// this.cHeight2 = uni.upx2px(1100);
			this.dayDate();
			this.userDate();
			this.getServerData(); //收益数据
		},
		methods: {
			back:function(){
				uni.navigateBack({
					
				})
			},
			tanKuang: function() {
				var that = this;
				var arr = []
				for (let i = 0; i < this.list.length; i++) {
					arr = arr.concat(this.list[i].text)
				}
				console.log(arr)
				uni.showActionSheet({
					itemList: arr,
					success: function(res) {
						let index = res.tapIndex
						that.areaID = that.list[index].areaID;
						that.curVal = res.tapIndex
						console.log(that.list[index].areaID, "66666");
						console.log('选中了第' + res.tapIndex + '个按钮');
						that.dayDate();
						that.userDate();
						that.getServerData(); //收益数据

					},
					fail: function(res) {}
				})
			},
			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: this.areaID,
					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: this.areaID,
					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这是所有数据')
				var aa=res.data.date
				var aa1=[]
				for(let i=0,len=aa.length;i<len;i++){
					
					aa1.push(aa[i].substring(aa[i].length-2))
					  console.log(aa1,"5555555555")
				}
				
				console.log("00000000000000000000000000")
				
					_self.indexList = aa1

					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: this.areaID,
					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, //开启图表拖拽功能
					dataZoom: [
					    {
					        show: true,
					        realtime: true,
					        start: 0,
					        end: 50
					    },
					    // {
					    //     type: 'outside',
					    //     realtime: true,
					    //     start: 0,
					    //     end: 50
					    // }
					],
					xAxis: {
						// rotateLabel: true,
						// disableGrid: true,
						// itemCount: chartData.length,
						// labelCount: 30,
						// gridType: 'dash',
						disableGrid: true,
						type: 'grid',
						rotateLabel: true,
						// gridType: 'dash',
						itemCount:25,
						// 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
					},
					enableScroll: true,
					// rotateLabel: true,
					categories: chartData.categories,
					series: chartData.series,
					// legend: {
					// 	show: true,
					// 	padding: 5,
					// 	lineHeight: 11,
					// 	margin: 5,
					// },
					xAxis: {
						rotateLabel: true,
						disableGrid: true,
						// itemCount: chartData.length,
						itemCount: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%; */
	.back{
		height: 80upx;
		line-height: 170upx;
		padding-left: 30upx;
		font-size: 34upx;
		position: absolute;
		z-index: 99999;
		bottom: 50%;
		right: -12%;
		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);
	}
	.select {
		height: 80upx;
		line-height: 170upx;
		padding-left: 30upx;
		font-size: 34upx;
		position: absolute;
		z-index: 99999;
		bottom: 10%;
		right: -12%;
		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);
	}

	.allArea image {
		display: inline-block;
		vertical-align: middle;
		margin-left: 20upx;
		height: 40upx;
		width: 40upx;
	}

	.qiun-charts-rotate {
		width: 1000upx;
		height: 2400upx;
		background-color: #FFFFFF;
		padding: 25upx;
	}

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

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

	}

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

	.bt1 {
		height: 50upx;
		width: 180upx;
		line-height: 50upx;
	}
.bt{
	padding-left: 30upx;
	padding-top: 50%;
	/* text-align: center; */
}
	.bt button {
		font-size: 24upx;
		text-align: center;
		display: inline-block;
		vertical-align: bottom;
		height:70upx;
		line-height: 70upx;
		background-color: #007AFF;
		color: #FFFFFF;
		width: 70upx;
		border-radius: 50%;
		padding: 0;
		/* margin-left: 20upx; */
		text-align: center;
	/* 	line-height: 70upx; */
		margin: 0;
		
		margin-top:20upx;
		margin-bottom: 20upx;
		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; */
	}
	.bt button::after{
		border: none;
	}

	.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>