parking_operation/pages/operationOverview/operationalAnalysis/operationalAnalysis.vue

<template>
	<view class="report">
		<view class="report-header">
			<view class="report-header-left">
				营收趋势分析
			</view>
			<view class="report-header-right">
				<view class="report-header-right-item" :class="{'current': current === 1}" @click="current = 1">日</view>
				<view class="report-header-right-item" :class="{'current': current === 2}" @click="current = 2">月</view>
				<view class="report-header-right-item" :class="{'current': current === 3}" @click="current = 3">年</view>
			</view>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="column" :chartData="chartData" :opts="opts" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 3,
				chartData: {
					categories: ["党固路",
						"富强路",
						"玉兔山路",
						"顺时路",
						"本杰路",
						"可处路",
						"物资路",
						"桂花苑路",
						"丰林路",
						"教育路"
					],
					series: [{
						data: [100,
							140,
							230,
							100,
							130,
							100,
							100,
							100,
							100,
							100
						]
					}],
				},
				opts: {
					xAxis: {
						rotateLabel: true
					},
					yAxis: {
						showTitle: true,
						splitNumber: 5,
						data: [
							{
								title: '收益(元)',
								max: 250
							}
						]
					},
					legend: {
						show: false
					},
					padding: [10, 0, 10, 0],
					extra: {
						column: {
							width: 20
						}
					}
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.report {
		padding: 28rpx;
		font-family: PingFangSC-regular;

		&-header {
			display: flex;
			align-items: center;

			&-left {
				border-left: solid 4px #EC0D0D;
				padding-left: 10rpx;
				color: #101010;
				font-size: 30rpx;
				margin-right: 40rpx;
			}

			&-right {
				display: flex;

				&-item {
					width: 100rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					border: solid 1px #008CFF;
					border-right: none;

					&:last-child {
						border-radius: 0 8rpx 8rpx 0;
						border-right: solid 1px #008CFF;
					}

					&:first-child {
						border-radius: 8rpx 0 0 8rpx;
					}
				}

				.current {
					background-color: #008CFF;
					color: #fff;
				}
			}
		}

		.charts-box {
			margin-top: 30rpx;
			width: 100%;
			height: 700rpx;
		}
	}
</style>