CNCEC_APP/pages/index/board/qms/constructionScheme.vue

<template>
	<ChartCard margin="30rpx 0 0 0" title="施工方案数">
		<view class="inspection" @click="router.push('/pages/quality/constructionPlan/index')">
			<qiun-data-charts type="column" :canvas2d="false" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
		</view>
	</ChartCard>
</template>

<script setup>
import ChartCard from '@/components/chartCard.vue';
import { ref, watch } from 'vue';
import { router } from '@/utils';
let props = defineProps({
	constructSolutionData: {
		type: Array,
		default: () => []
	}
});

const opts = ref({
	padding: [15, 15, 0, 5],
	enableScroll: false,
	legend: { show: false },
	xAxis: {
		disableGrid: true
	},
	yAxis: {
		showTitle: true,
		data: [
			{
				title: '单位：个'
			}
		]
	},
	extra: {
		column: {
			type: 'group',
			width: 30,
			activeBgColor: '#000000',
			activeBgOpacity: 0.08
		}
	}
});

const chartData = ref({});

const handleTap = (e) => {
	console.log(e);
};
watch(
	() => props.constructSolutionData,
	(newVal) => {
		if (newVal && newVal.length) {
			console.log('监听数据', newVal);
			// 只有当数据存在时才赋值
			let res = {
				categories: ['方案总数', '企业审批总数', '项目审批总数'],
				series: [
					{
						data: newVal
					}
				]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}
	},
	{ deep: true, immediate: true }
);
</script>

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