<!-- 饼图 -->
<template>
	<view class="charts-box">
		<view class="charts-box-title">{{ title }}</view>
		<qiun-data-charts type="pie" :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 {
						dataLabel: true,
						legend: {
							position: 'bottom',
							lineHeight: 20
						}
					}
				}
			}
		},
		data() {
			return {}
		}
	}
</script>

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

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