parking_operation/components/columnChart.vue

<!-- 柱状图 -->
<template>
	<view class="charts-box">
		<view class="charts-box-title">{{ title }}</view>
		<qiun-data-charts type="column" :canvas2d="true" :ontouch="true" :chartData="chartData" :opts="opts" />
	</view>
</template>

<script>
	export default {
		props: {
			chartData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			title: {
				type: [String, Number],
				default: ''
			},
			opts: {
				type: Object,
				default: () => {
					return {
						xAxis: {
							rotateLabel: false,
							labelCount: 12
						},
						yAxis: {
							showTitle: true,
							splitNumber: 5,
							data: [{
								title: '收益(元)',
								titleOffsetY: -5
							}]
						},
						legend: {
							show: false
						},
						dataLabel: false,
						extra: {
							column: {
								width: 20
							}
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		background-color: #fff;
		border-radius: 5px;
		padding: 18px 15px;

		&-title {
			text-align: center;
			margin-bottom: 10px;
		}
	}
</style>