增加排序图标，修复显示BUG

pages/index/index.vue

@@ -380,6 +380,18 @@ import { uniIcons } from '@dcloudio/uni-ui'
 	},
 	methods: {
 		initChart() {
+			// 获取数据点数量
+			const dataCount = this.currentData.chart.receivable.length;
+			// 计算所需的最小宽度（假设每个数据点需要100px）
+			const minWidth = Math.max(dataCount * 60, 500);
+			
+			// 设置容器宽度
+			const wrapper = document.getElementById('myChart');
+			if (wrapper) {
+				wrapper.style.width = `${minWidth}px`;
+				wrapper.style.padding = '0 0 5px 0';
+			}
+
 			this.myChart = echarts.init(document.getElementById('myChart'))
 			
 			const option = {
@@ -387,6 +399,14 @@ import { uniIcons } from '@dcloudio/uni-ui'
 					trigger: 'axis',
 					axisPointer: {
 						type: 'shadow'
+					},
+					formatter: function(params) {
+						return params.map(item => {
+							if (item.seriesName === '利润率') {
+								return `${item.seriesName}: ${item.value}%`
+							}
+							return `${item.seriesName}: ${item.value}万元`
+						}).join('<br/>')
 					}
 				},
 				legend: {
@@ -397,19 +417,22 @@ import { uniIcons } from '@dcloudio/uni-ui'
 				grid: {
 					left: '3%',
 					right: '4%',
-					// top: '8%',
-					// bottom: '15%',
+					top: '5%',
+					bottom: '12%',
 					width: 'auto',
 					containLabel: true
 				},
 				xAxis: {
 					type: 'category',
-		
-					axisTick: {
-						alignWithLabel: true
+					axisLine: {
+						show: true,
+						lineStyle: { color: '#E8E8E8' }
 					},
-					
-					
+					axisLabel: {
+						interval: 0,
+						color: '#666',
+						fontSize: 12
+					}
 				},
 				yAxis: [
 					{
@@ -421,7 +444,9 @@ import { uniIcons } from '@dcloudio/uni-ui'
 						},
 						splitLine: {
 							show: false
-						}
+						},
+						nameTextStyle: { color: '#666' },
+						axisLabel: { color: '#666' }
 					},
 					{
 						type: 'value',
@@ -434,7 +459,9 @@ import { uniIcons } from '@dcloudio/uni-ui'
 						},
 						splitLine: {
 							show: false
-						}
+						},
+						nameTextStyle: { color: '#666' },
+						axisLabel: { color: '#666' }
 					}
 				],
 				series: [
@@ -444,7 +471,8 @@ import { uniIcons } from '@dcloudio/uni-ui'
 						barGap: '0%',
 						barWidth: '35%',
 						itemStyle: {
-							color: '#52C41A'
+							color: '#52C41A',
+							borderRadius: [4, 4, 0, 0]
 						}
 					},
 					{
@@ -452,7 +480,8 @@ import { uniIcons } from '@dcloudio/uni-ui'
 						type: 'bar',
 						barWidth: '35%',
 						itemStyle: {
-							color: '#FF4D4F'
+							color: '#FF4D4F',
+							borderRadius: [4, 4, 0, 0]
 						}
 					},
 					{
@@ -907,11 +936,13 @@ import { uniIcons } from '@dcloudio/uni-ui'
 			border-radius: 8px;
 			margin-bottom: 15px;
 			
+	
 			.chart-header {
+				padding: 15px 15px 0px 15px;
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-
+				margin-bottom: 15px;
 				
 				.chart-title {
 					font-size: 16px;
@@ -921,12 +952,12 @@ import { uniIcons } from '@dcloudio/uni-ui'
 				
 				.sort-buttons {
 					display: flex;
-					gap: 2px;
+					gap: 1px;
 					
 					.sort-btn {
 						font-size: 12px;
 						color: #666;
-						padding: 2px 4px;
+						padding: 4px 10px;
 						border-radius: 12px;
 						background: #F5F5F5;
 						border: 1px solid #E8E8E8;
@@ -934,6 +965,7 @@ import { uniIcons } from '@dcloudio/uni-ui'
 						transition: all 0.3s ease;
 						display: flex;
 						align-items: center;
+						margin-left: 8px;
 						
 						.sort-icon {
 							font-family: "custom-icon" !important;
@@ -952,6 +984,7 @@ import { uniIcons } from '@dcloudio/uni-ui'
 							color: #fff;
 							background: #52C41A;
 							border-color: #52C41A;
+							box-shadow: 0 2px 4px rgba(82, 196, 26, 0.2);
 						}
 					}
 				}
@@ -961,14 +994,25 @@ import { uniIcons } from '@dcloudio/uni-ui'
 				width: 100%;
 				overflow-x: auto;
 				-webkit-overflow-scrolling: touch;
+				
+				&::-webkit-scrollbar {
+					height: 6px;
+					background: #f5f5f5;
+				}
+				
+				&::-webkit-scrollbar-thumb {
+					background: rgba(0, 0, 0, 0.1);
+					border-radius: 3px;
 				}
 				
 				.chart-wrapper {
-				height: 300px;
-				width: 600%;
+					height: 250px;
+					width: 100%;
+					padding: 0 0 5px 0;
 					min-width: 100%;
 				}
 			}
+		}
 		
 		.table-container {
 			background-color: #fff;
@@ -991,11 +1035,11 @@ import { uniIcons } from '@dcloudio/uni-ui'
 
 	@font-face {
 		font-family: "custom-icon";
-		src: url('/static/fonts/iconfont.ttf') format('truetype');
+		src: url('/static/fonts/icomoon.ttf') format('truetype');
 	}
 
 	.sort-icon::before {
-		content: '\e737';
+		content: '\ea4d';
 		font-family: "custom-icon" !important;
 		font-size: 12px;
 		font-style: normal;

static/fonts/icomoon.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xea4d;" glyph-name="sort-amount-desc" d="M320 192v768h-128v-768h-160l224-224 224 224h-160zM448 960h576v-128h-576v128zM448 768h448v-128h-448v128zM448 576h320v-128h-320v128zM448 384h192v-128h-192v128z" />
+</font></defs></svg>
\ No newline at end of file