图表V2

pages/index/index.vue

@@ -382,32 +382,6 @@ import { uniIcons } from '@dcloudio/uni-ui'
 		initChart() {
 			this.myChart = echarts.init(document.getElementById('myChart'))
 			
-			const baseSeries = [{
-				type: 'bar',
-				barGap: 0,
-				barWidth: 15,
-				itemStyle: {
-					color: '#52C41A'
-				}
-			}, {
-				type: 'bar',
-				barWidth: 15,
-				itemStyle: {
-					color: '#FF4D4F'
-				}
-			}, {
-				type: 'line',
-				yAxisIndex: 1,
-				symbol: 'circle',
-				symbolSize: 8,
-				itemStyle: {
-					color: '#1890FF'
-				},
-				lineStyle: {
-					width: 2
-				}
-			}]
-			
 			const option = {
 				tooltip: {
 					trigger: 'axis',
@@ -418,21 +392,24 @@ import { uniIcons } from '@dcloudio/uni-ui'
 				legend: {
 					data: ['应收', '应付', '利润率'],
 					bottom: 0,
-					padding: [0, 0, 5, 0]
+					// itemGap: 20
 				},
 				grid: {
 					left: '3%',
 					right: '4%',
-					top: '8%',
-					bottom: '15%',
+					// top: '8%',
+					// bottom: '15%',
+					width: 'auto',
 					containLabel: true
 				},
 				xAxis: {
 					type: 'category',
-					data: ['老板A', '老板B', '老板C', '老板D', '老板E', '老板F', '老板G', '老板H', '老板I', '老板J'],
+		
 					axisTick: {
 						alignWithLabel: true
-					}
+					},
+					
+					
 				},
 				yAxis: [
 					{
@@ -461,9 +438,36 @@ import { uniIcons } from '@dcloudio/uni-ui'
 					}
 				],
 				series: [
-					{ ...baseSeries[0], data: this.currentData.chart.receivable },
-					{ ...baseSeries[1], data: this.currentData.chart.payable },
-					{ ...baseSeries[2], data: this.currentData.chart.profitRate }
+					{
+						name: '应收',
+						type: 'bar',
+						barGap: '0%',
+						barWidth: '35%',
+						itemStyle: {
+							color: '#52C41A'
+						}
+					},
+					{
+						name: '应付',
+						type: 'bar',
+						barWidth: '35%',
+						itemStyle: {
+							color: '#FF4D4F'
+						}
+					},
+					{
+						name: '利润率',
+						type: 'line',
+						yAxisIndex: 1,
+						symbol: 'circle',
+						symbolSize: 6,
+						itemStyle: {
+							color: '#1890FF'
+						},
+						lineStyle: {
+							width: 2
+						}
+					}
 				]
 			}
 			
@@ -900,15 +904,14 @@ import { uniIcons } from '@dcloudio/uni-ui'
 		.chart-container {
 			display: block;
 			background-color: #fff;
-			padding: 15px;
 			border-radius: 8px;
 			margin-bottom: 15px;
-			
+	
 			.chart-header {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
-				margin-bottom: 15px;
+
 				
 				.chart-title {
 					font-size: 16px;
@@ -918,12 +921,12 @@ import { uniIcons } from '@dcloudio/uni-ui'
 				
 				.sort-buttons {
 					display: flex;
-					gap: 4px;
+					gap: 2px;
 					
 					.sort-btn {
 						font-size: 12px;
 						color: #666;
-						padding: 4px 8px;
+						padding: 2px 4px;
 						border-radius: 12px;
 						background: #F5F5F5;
 						border: 1px solid #E8E8E8;
@@ -931,7 +934,6 @@ import { uniIcons } from '@dcloudio/uni-ui'
 						transition: all 0.3s ease;
 						display: flex;
 						align-items: center;
-						gap: 4px;
 						
 						.sort-icon {
 							font-family: "custom-icon" !important;
@@ -956,14 +958,15 @@ import { uniIcons } from '@dcloudio/uni-ui'
 			}
 			
 			.chart-scroll {
-				
 				width: 100%;
-				overflow: hidden;
+				overflow-x: auto;
+				-webkit-overflow-scrolling: touch;
 			}
 			
 			.chart-wrapper {
 				height: 300px;
-				width: 100%;
+				width: 600%;
+				min-width: 100%;
 			}
 		}