hotelHomestayWx/components/Charts/LineTwo.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,
							max: 1
						}],
					},
					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() {
			this.drawRevenueCharts();
		},
		methods: {
			// 交易趋势
			drawRevenueCharts() {
				let obj = wx.getStorageSync('fromData')
				this.list = obj
				this.list.checkedInChant.forEach(item => {
					this.dataList.push(item.checkedInRatio)
				})
				let list1 = {
					categories: ["01-01", "", "", "", "", "", "", "01-08", "", "", "", "", "", "", "01-15",
						"", "", "", "", "", "", "01-22", "", "", "", "", "", "", "01-29", "", "",
					],
					series: [{
						name: "入住率",
						data: this.dataList,
						legendShape: "circle",
						color: "#600EFF",
						pointShape: "none",
					}, ],
				}
				this.revenueChartData = JSON.parse(JSON.stringify(list1));
			},

		}
	}
</script>

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