fix: 样式修改

src/pages/tabbar/canteenAnalyse.vue

@@ -8,7 +8,7 @@
 		</tm-sheet>
 
 		<tm-sheet :margin="[0, 20]">
-			<view class="prefix_title mb-15rpx">近一周食堂购买次数趋势图</view>
+			<view class="prefix_title mb-15rpx">近一周食堂购买人数趋势图</view>
 			<view class="w-full h-600rpx">
 				<!-- tooltipFormat="canteenAreaTooltip" -->
 				<qiun-data-charts type="area" :opts="areaChartOpts" :chartData="areaChartData" />
@@ -90,6 +90,14 @@ const pieChartOpts = {
 	color: COLORLIST,
 	padding: [15, 15, 15, 15],
 	enableScroll: false,
+	legend: {
+		float: "center",
+		padding: 2,
+		margin: 2,
+		fontSize: 14,
+		lineHeight: 14,
+		itemGap: 10,
+	},
 	extra: {
 		pie: {
 			activeOpacity: 0.5,
@@ -108,7 +116,14 @@ const areaChartOpts = {
 	color: COLORLIST,
 	padding: [15, 0, 0, -5],
 	enableScroll: false,
-	legend: {},
+	legend: {
+		float: "center",
+		padding: 2,
+		margin: 2,
+		fontSize: 12,
+		lineHeight: 12,
+		itemGap: 4,
+	},
 	xAxis: {
 		disableGrid: true,
 	},
@@ -119,6 +134,8 @@ const areaChartOpts = {
 		data: [
 			{
 				title: "购买人数",
+				titleOffsetX: 10,
+				titleOffsetY: -4,
 			},
 		],
 	},
@@ -156,7 +173,7 @@ const getPieChartData = async () => {
 			index: index,
 			name: item.classifyName,
 			value: Number(item.payUserCount),
-			labelText: item.classifyName,
+			labelText: `${item.classifyName} ${item.payUserCount}次`,
 			...item,
 		}
 	})