hotelHomestayWx/components/Charts/LineOne.vue

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

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateContent',
		mixins: [template_page_mixin],
		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,
						},
					},
				},

			}
		},
		onReady() {
			this.drawRevenueCharts(); //公司营收
		},
		methods: {
			// 公司营收 绘制
			drawRevenueCharts() {
				let res = {
					categories: ["01-01", "", "01-08", "", "01-15", "", "01-22", "", "01-29"],
					series: [{
							name: "收入",
							data: [6800, 8040, 5203, 9850, 7510, 6301, 5968, 9808, 5200],
							legendShape: "circle",
							color: "#4088FE",
							pointShape: "none",
						},

					],
				};
				this.revenueChartData = JSON.parse(JSON.stringify(res));
			},

		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 85%;
	}
</style>