<template>
	<ChartCard margin="30rpx 0 0 0" title="报验记录">
		<view class="inspection ">
			<qiun-data-charts type="mix" :opts="opts" :canvas2d="false" :chartData="chartData" @getIndex="handleTap" />
		</view>
	</ChartCard>
</template>

<script setup>
	import ChartCard from '@/components/chartCard.vue'
	import {
		ref,onMounted
	} from 'vue';

	const opts = ref({
		padding: [15, 15, 0, 15],
		enableScroll: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
		},
		yAxis: {
			disabled: false,
			disableGrid: false,
			splitNumber: 5,
			gridType: "dash",
			dashLength: 4,
			gridColor: "#CCCCCC",
			padding: 10,
			showTitle: true,
			data: [{
					position: "left",
					title: "",
					textAlign: "left"
				},
				{
					position: "right",
					min: 0,
					max: 100,
					title: "单位: %"
				}
			]
		},
		extra: {
			mix: {
				column: {
					width: 20
				}
			}
		}
	})

	const chartData = ref({})

	const handleTap = (e) => {
		console.log(e)
	}


	onMounted(() => {
		let res = {
			categories: ["设材报验数", "机具报验数", "人员报验数"],
			series: [

				{
					name: "",
					index: 1,
					type: "line",
					color: "#5cffc9",
					data: [70, 50, 85],
			
				},
				{
					name: "",
					type: "column",
					style: "curve",
					color: "#fff705",
					disableLegend: true,
					data: [56872, 4027, 8452],
					format: 'formatDataLabel'
				},

			]
		};
		chartData.value = JSON.parse(JSON.stringify(res));
	})
</script>

<style lang="scss">
	.inspection {
		width: 100%;
		height: 300rpx;
	}
</style>