hotelHomestayWx/components/Charts/LineTwo.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(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: [0.1, 0.3, 0.4, 0.3, 0.6, 0.7, 0.4, 1, 0.5],
						legendShape: "circle",
						color: "#600EFF",
						pointShape: "none",
					}],
				};
				this.revenueChartData = JSON.parse(JSON.stringify(res));
			},

		}
	}
</script>

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