2026.3.26

使用ucharts图表，兼容app
每个图表组件添加:canvas2d="false"
加载方法改成onMounted

pages/index/board/safe/bigCrisisCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard margin="0 0 30rpx 0" title="危大工程管控数据">
 		<view class="big-crisis">
-			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="column" :opts="opts" :canvas2d="false" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
@@ -9,12 +9,8 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app'
-
 	const opts = ref({
 		padding: [15, 15, 0, 5],
 		enableScroll: false,
@@ -46,7 +42,7 @@
 	}
 
 
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			categories: ["未开始", "进行中", "已完成", "培训人次", "作业人次"],
 			series: [{

pages/index/board/safe/educationCard.vue

@@ -1,72 +1,68 @@
 <template>
 	<ChartCard margin="0 0 30rpx 0" title="教育培训">
 		<view class="charts-box">
-			<qiun-data-charts type="area" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<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
-	} from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app'
+import ChartCard from '@/components/chartCard.vue';
+import { ref ,onMounted} from 'vue';
 
-	const opts = ref({
-		padding: [15, 15, 0, 15],
-		enableScroll: false,
-		legend: {
-			show: false
+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
 		},
-		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"
-			}
+		area: {
+			type: 'curve',
+			opacity: 0.2,
+			addLine: true,
+			width: 2,
+			gradient: true,
+			activeType: 'hollow'
 		}
-	})
-
-	const chartData = ref({})
-
-	const handleTap = (e) => {
-		console.log(e)
 	}
+});
 
+const chartData = ref({});
 
-	onReady(() => {
-		let res = {
-			categories: ["专项培训", "特种作业\n培训", "三级安全\n教育培训", "安全技术\n交底"],
-			series: [{
+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));
-	})
+			}
+		]
+	};
+	chartData.value = JSON.parse(JSON.stringify(res));
+});
 </script>
 
 <style scoped>
-	.charts-box {
-		width: 100%;
-		height: 400rpx;
-	}
-</style>
+.charts-box {
+	width: 100%;
+	height: 400rpx;
+}
+</style>

pages/index/board/safe/emergencyCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard  margin="0 0 30rpx 0" title="应急管理数据" >
 		<view class="emergencyCard">
-			<qiun-data-charts type="column" :opts="opts" :chartData="chartData" @getIndex="handleTap" />
+			<qiun-data-charts type="column" :opts="opts" :canvas2d="false" :chartData="chartData" @getIndex="handleTap" />
 		</view>
 	</ChartCard>
 </template>
@@ -9,11 +9,8 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app'
 	
 	const opts = ref({
 		padding: [15, 15, 0, 5],
@@ -47,7 +44,7 @@
 	}
 	
 	
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			categories: ["应急预案", "专项预案", "现场处置\n预案", "演练次数", "参演人数"],
 			series: [{

pages/index/board/safe/riskRankingCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<ChartCard  margin="0 0 30rpx 0" title="风险分级管控" >
 	<view class="rish-ranking">
-		<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
+		<qiun-data-charts type="pie" :opts="opts" :canvas2d="false" :chartData="chartData" />
 	</view>
 	</ChartCard>
 </template>
@@ -9,7 +9,7 @@
 <script setup>
 	import ChartCard from '@/components/chartCard.vue'
 	import {
-		ref
+		ref,onMounted
 	} from 'vue';
 	import {
 		onReady, onShow
@@ -44,7 +44,7 @@
 	}
 
 
-	onReady(() => {
+	onMounted(() => {
 		let res = {
 			series: [{
 				data: [{