hotelHomestayWx/components/Charts/LineOne.vue

<template>
	<view class="charts-box">
		<qiun-data-charts type="area" :opts="revenueOpts" :chartData="revenueChartData" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 公司营收
				revenueChartData: {},
				revenueOpts: {
					color: ["#4B98FE"],
					padding: [15, 15],
					dataLabel: false,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						// gridColor: "rgba(230,230,230,0.6)",
						gridColor: "rgba(200,200,200,0.6)",
						disabled: false,
						disableGrid: false,
						gridType: 'dash',
						dashLength: '4',
						data: [{
							axisLineColor: "#FFFFFF",
							min: 0,
						}],
					},
					legend: {
						show: false,
						position: "top",
						float: "right",
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 1,
							gradient: true,
						},
					},
				},
				dataList: [],
				list: {},
				fromData: {
					dateDay: '2024-01',
					homestayId: '1744620500506251265'
				},
			}
		},
		onReady() {
			let obj = wx.getStorageSync('fromData')
			this.fromData.dateDay = obj.dateDay
			this.fromData.homestayId = obj.homestayId
			this.drawRevenueCharts();

		},
		methods: {
			// 交易趋势
			drawRevenueCharts() {
				let obj = wx.getStorageSync('fromData')
				this.list = obj
				this.list.dealLineChant.forEach(item => {
					this.dataList.push(item.orderAmount)
				})
				let list1 = {
					categories: [
						"01-01", "", "", "", "", "", "",
						"01-08", "", "", "", "", "", "",
						"01-15", "", "", "", "", "", "",
						"01-22", "", "", "", "", "", "",
						"01-29", "", ""
					],
					series: [{
						name: "收入",
						data: this.dataList,
						legendShape: "circle",
						color: "#4088FE",
						pointShape: "none",
					}, ],
				}
				this.revenueChartData = JSON.parse(JSON.stringify(list1));
			},

		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 630rpx;
		height: 388rpx;
	}
</style>