H5_QiCaiYao/page_salesman_customer/detailed/lineChart.vue

<template>
	<view>
		<qiun-data-charts v-if="selty" type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
	</view>
</template>

<script>
	import qiunDataCharts from "./qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
	export default {
		components: {
			qiunDataCharts
		},
		data() {
			return {
				port: this.Monthly,
				selty: false,
				chartData: {
					categories: [],
					series: [{
						name: "订单金额",
						"index": 0,
						data: []
					}, {
						name: "订单笔数",
						"index": 1,
						data: []
					}]
				},

				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [20, 0, 0, 0],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: false,
					scrollShow: true,
					enableScroll: true,

					legend: {},
					xAxis: {
						disableGrid: true,
						itemCount: 4,
						scrollShow: true,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{ //这里y轴分组   left是下标为0的第一组y数据在最左侧
								position: "left",
								axisLine: false, //坐标轴轴线是否显示
								// axisLineColor: '#fff', //坐标轴轴线颜色
								fontColor: "#474e5b",
								fontSize: 14,
								disabled: false, //是否绘画y轴  true不 默认为false
								min: '', //y轴最小值
								max: '', //y轴最大值   最大值来除以y轴显示的数量=每份的数量
								// unit:'焦',//y轴刻度后面的单位
								tofix: 2,
								title: '',
								titleOffsetY: -6,
								titleOffsetX: -6,
							},
							{ //这里y轴分组   right是下标为1的第二组y数据在最右侧
								position: "right",
								axisLine: false, //坐标轴轴线是否显示
								axisLineColor: '#fff', //坐标轴轴线颜色
								fontColor: "#474e5b",
								fontSize: 14,
								disabled: false, //是否绘画y轴  true不 默认为false
								min: '', //y轴最小值
								max: '', //y轴最大值   最大值来除以y轴显示的数量=每份的数量
								// unit:'焦',//y轴刻度后面的单位
								tofix: 2,
								title: '',
								// 

								titleOffsetY: -6,
								titleOffsetX: 10,
							},

						]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "custom"
						},
						column: {
							type: "group",
							width: 10,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			};
		},
		props: {
			Monthly: Object
		},
		created() {
			console.log(this.port, 'port');
			let myDate = new Date();
			console.log(myDate.getDate(), '当前天数');
			this.$api.sendRequest({
				url: `/api/salasmanstat/memberStat`,
				data: {
					member_id: this.port.msgabc.msg,
					month_time: this.port.shijian
				},
				success: res => {
					// console.log(res.data.list, '画像图表');
					let a = []
					let b = []
					let c = []
					let d = []
					let e = []
					for (let i = 0; i < res.data.list.length; i++) {
					
						// console.log(Number(myDate.getDate()))
						// console.log(Number(res.data.list[i].date.substring(0, res.data.list[i].date.length -
						// 	1)))
						if (Number(res.data.list[i].date.substring(0, res.data.list[i].date.length - 1)) <=
							Number(myDate.getDate())) {
									a.push(res.data.list[i].date)
							b.push(Number(res.data.list[i].order_money))
							c.push(Number(res.data.list[i].order_num))
						}

						// console.log(res.data.list[i].date);
						//订单金额 push后顺序不对


					}
					setTimeout(() => {
						this.chartData.categories = a
						console.log(b, '订单金额');
						console.log(a, '日期');
						// console.log(b.sort()[b.length-1]);
						this.opts.yAxis.data[0].min = this.format(Math.min(...b))
						this.opts.yAxis.data[0].max = this.formatRoundNum(Math.max(...b))
						this.opts.yAxis.data[1].min = this.format(Math.min(...c))
						this.opts.yAxis.data[1].max = this.formatRoundNumten(Math.max(...c))
						console.log(c, '订单量');
						this.chartData.series[0].data = b
						this.chartData.series[1].data = c
						this.selty = true
					}, 200)
				}
			})
		},
		methods: {
			formatRoundNum(num) {
				return Math.ceil(num / 1000) * 1000
			},
			formatRoundNumten(num) {
				return Math.ceil(num / 10) * 10
			},
			format(num) {
				return num != 0 ? Math.floor(num / 10) * 10 : 0
			},
			
			btn(memberStat) {
				this.$api.sendRequest({
					url: `/api/salasmanstat/memberStat`,
					data: {
						member_id: this.port.msg,
						month_time: memberStat
					},
					success: res => {
						// console.log(res.data.list, '画像图表');
						let a = []
						let b = []
						let c = []
						let d = []
						let e = []
						for (let i = 0; i < res.data.list.length; i++) {
							a.push(res.data.list[i].date)
							b.push(Number(res.data.list[i].order_money))
							c.push(Number(res.data.list[i].order_num))

						}
						setTimeout(() => {
							this.chartData.categories = a
							console.log(b, '订单量');
							console.log(c, '订单金额');
							this.chartData.series[0].data = b
							this.chartData.series[1].data = c
							this.selty = true
						}, 100)
					}
				})
			}
		}
	}
</script>

<style lang="scss">

</style>