pika_shangjia/pages/operationDataPersonal/operationDataPersonal.vue

<template>
	<view style="padding-bottom: 30rpx;">
		<!-- 图表统计 -->
		<view class="echart-box">
			<view class="echart-box-header ddflex">
				<view class="echart-box-title">运营情况</view>
			</view>
			<view class="sssb-box ddflex">
				<view class="sssb-item fflex">
					<view class="sssb-data sssb-color">867.00</view>
					<view class="sssb-label">营业总额</view>
				</view>
				<view class="sssb-line"></view>
				<view class="sssb-item fflex">
					<view class="sssb-data sssb-color">1915.00</view>
					<view class="sssb-label">累计退款</view>
				</view>
			</view>
			<view class="sssb-box ddflex">
				<view class="sssb-item fflex">
					<view class="sssb-label">收益总额</view>
					<view class="sssb-data sssb-color">1915.00</view>
				</view>
				<view class="sssb-line"></view>
				<view class="sssb-item fflex">
					<view class="sssb-label">可分账金额</view>
					<view class="sssb-data sssb-color">1915.00</view>
				</view>
			</view>
			<view style="margin-top: 30rpx;height:500rpx">
				<view class="echart-title">近一周营业额度(元)图表数据</view>
				<l-echart ref="chart2" @finished="init"></l-echart>
			</view>
			<view style="margin-top: 30rpx;height:500rpx">
				<view class="echart-title">近一周收益额度(元)</view>
				<l-echart ref="chart3" @finished="init"></l-echart>
			</view>
		</view>
		
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import LEchart from '../../components/l-echart/l-echart.vue';
	import * as echarts from '../../utils/echarts.min.js'
	export default {
		components: {
			LEchart
		},
		props: {},
		data() {
			return {
				systems: {},
				isTop: 0,
				pxToRpxScale: 0,
				rpxTopxScale: 0,


				// 近一周营业额度(元)图表数据
				option2: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					grid: {
						left: 0,
						right: 8,
						bottom: 20,
						top: 30,
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666',
							// interval: 0,

						}
					}],
					yAxis: [{
						type: 'value',

						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666'
						}
					}],
					series: [{
						name: '订单',
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'top',
								color: '#FF770F',
								formatter: '￥{c}',
							},
						},
						data: [285, 200, 285, 300, 285, 285, 320],
						barWidth: 15,
						itemStyle: {
							// 颜色
							color: '#FF770F',
							// 给bar设置倒角
							barBorderRadius: [0, 0, 0, 0]
						}
					}]
				},

				// 近一周收益额度(元)
				option3: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						confine: true
					},
					grid: {
						left: 0,
						right: 8,
						bottom: 20,
						top: 30,
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666',
							// interval: 0,

						}
					}],
					yAxis: [{
						type: 'value',

						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#999999'
							}
						},
						axisLabel: {
							color: '#666666'
						}
					}],
					series: [{
						name: '订单',
						type: 'bar',
						label: {
							normal: {
								show: true,
								position: 'top',
								color: '#FF770F',
								formatter: '￥{c}',
							},
						},
						data: [285, 200, 285, 300, 285, 285, 320],
						barWidth: 15,
						itemStyle: {
							// 颜色
							color: '#FF770F',
							// 给bar设置倒角
							barBorderRadius: [0, 0, 0, 0]
						}
					}]
				}

			}
		},
		onLoad(options) {

		},
		onShow() {

		},
		methods: {
			jumpUrl(url) {
				if (req.isLogins(true)) {
					uni.navigateTo({
						url: url
					})
				}
			},
			
			init() {
				if (this.$refs.chart2) {
					this.$refs.chart2.init(echarts, async chart => {
						// let echartData = await this.getEchartData()
						this.option2.xAxis[0].data = ['04-04', '04-05', '04-06', '04-07', '04-08', '04-09',
							'04-10'
						]
						this.option2.yAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option2.xAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option2.series[0].data = [300, 270, 340, 344, 300, 320, 310]
						this.option2.series[0].label.normal.fontSize = 13 * this.rpxTopxScale
						chart.setOption(this.option2);
					});
				}
				if (this.$refs.chart3) {
					this.$refs.chart3.init(echarts, async chart => {
						// let echartData = await this.getEchartData()
						this.option3.xAxis[0].data = ['04-04', '04-05', '04-06', '04-07', '04-08', '04-09',
							'04-10'
						]
						this.option3.yAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option3.xAxis[0].axisLabel.fontSize = 13 * this.rpxTopxScale
						this.option3.series[0].data = [300, 270, 340, 344, 300, 320, 310]
						this.option3.series[0].label.normal.fontSize = 13 * this.rpxTopxScale
						chart.setOption(this.option3);
					});
				}
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			this.pxToRpxScale = pxToRpxScale
			this.rpxTopxScale = systemInfo.windowWidth / 750
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./operationDataPersonal.css";
</style>