<template>
	<ciy-header ref="header" title="图表"></ciy-header>
	<view>
		<view class="ciy-card">
			<view class="title">饼图1</view>
			<view class="content">
				<view style="width:7em;height:7em;margin:auto;">
					<ciy-chart-pie :data="chartdata"></ciy-chart-pie>
				</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="title">饼图2</view>
			<view class="content">
				<view style="width:9em;height:9em;margin:auto;">
					<ciy-chart-pie :data="chartdata">
						<view style="position:relative;width:65%;height:65%;text-align:center;background:var(--bg6);border-radius: 50%;display: flex;justify-content: center;align-items: center;">
							<text style="font-size:0.9em;font-weight: bold;">文字</text>
						</view>
						<view style="width:100%;height:100%;position: absolute;top:0;border-radius: 50%;box-shadow: 0px 0px 0 6px #ffffff22;">
						</view>
					</ciy-chart-pie>
				</view>
			</view>
		</view>
		<button class="btn sm" @tap="chgdata">变更</button>
	</view>
</template>

<style>
	@import '@/pages/demo/zdemo.css';
</style>

<script>
	import zmixin from '@/pages/demo/zmixin.js';
	export default {
		mixins: [zmixin],
		data() {
			return {
				chartdata: '120|#ff8d1a,320|#ffeb3b'
			}
		},
		onLoad() {},
		methods: {
			chgdata() {
				var ds = [];
				var max = parseInt(Math.random() * 5) + 2;
				for (var i = 0; i < max; i++)
					ds.push(parseInt(Math.random() * 100));
				this.chartdata = ds.join(',');
			}
		}
	}
</script>