CNCEC_APP/pages/index/board/safe/educationCard.vue

<template>
	<ChartCard margin="0 0 30rpx 0" title="教育培训">
		<view class="charts-box">
			<qiun-data-charts type="area" :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,
		rotateLabel: true,
		rotateAngle: -30,
		fontSize: 10
	},
	yAxis: {
		gridType: 'dash',
		dashLength: 2
	},
	extra: {
		tooltip: {
			showBox: false
		},
		area: {
			type: 'curve',
			opacity: 0.2,
			addLine: true,
			width: 2,
			gradient: true,
			activeType: 'hollow'
		}
	}
});

const chartData = ref({});

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

onMounted(() => {
	let res = {
		categories: ['专项培训', '特种作业\n培训', '三级安全\n教育培训', '安全技术\n交底'],
		series: [
			{
				data: [302265, 70770, 399175, 14851]
			}
		]
	};
	chartData.value = JSON.parse(JSON.stringify(res));
});
</script>

<style scoped>
.charts-box {
	width: 100%;
	height: 400rpx;
}
</style>