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

<template>
	<ChartCard margin="30rpx 0 0 0" title="优质工程">
		<view class="inspection ">
			<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,onMounted
	} from 'vue';

	const opts = ref({
		padding: [15, 15, 0, 5],
		enableScroll: false,
		legend: {show: false},
		xAxis: {
			disableGrid: true,
			rotateLabel: true,
			rotateAngle: -30
		},
		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)
	}


	onMounted(() => {
		let res = {
			categories: ["国家级鲁\n班奖", "国家级国\n优奖", "省部级奖\n项", "市级奖项"],
			series: [{
				color: "#91CB74",
					name: '',
					data: [100, 542, 685, 254]
				},
			]
		};
		chartData.value = JSON.parse(JSON.stringify(res));
	})
</script>

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