v

pages/index/index.vue

@@ -172,10 +172,20 @@
 				</view>
 			</view>
 			<scroll-view class="chart-scroll" scroll-x>
+				<view >11111111111111111</view>
 				<view class="chart-wrapper" id="myChart"></view>
+				<view >11111111111111111</view>
 			</scroll-view>
 		</view>
 
+		<!-- 项目运营情况图表 -->
+		<view class="operation-chart-container">
+			<view class="chart-header">
+				<text class="chart-title">项目运营情况</text>
+			</view>
+			<view class="chart-wrapper" id="operationChart"></view>
+		</view>
+
 		<!-- 项目运营表格 -->
 		<view class="table-container">
 			<text class="table-title">项目运营情况</text>
@@ -204,6 +214,7 @@ import { uniIcons } from '@dcloudio/uni-ui'
 			loading: false,
 			activeTime: 'today',
 			myChart: null,
+			operationChart: null,
 			sortType: 'receivable',
 			
 			// 所有时间维度的数据集合
@@ -372,8 +383,9 @@ import { uniIcons } from '@dcloudio/uni-ui'
 		}
 	},
 	mounted() {
-		this.initChart()
 		this.$nextTick(() => {
+			this.initChart()
+			this.initOperationChart()
 			this.sortChart('receivable')
 			window.addEventListener('resize', this.onResize)
 		})
@@ -468,6 +480,90 @@ import { uniIcons } from '@dcloudio/uni-ui'
 			}
 			
 			this.myChart.setOption(option)
+			console.log(option)
+			console.log('------------------this.initChart.setOption'+option)
+		},
+		initOperationChart() {
+			this.operationChart = echarts.init(document.getElementById('operationChart'))
+			
+			const option = {
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'shadow'
+					}
+				},
+				legend: {
+					data: ['收入', '支出', '利润率'],
+					right: 10,
+					top: 0
+				},
+				grid: {
+					left: '3%',
+					right: '4%',
+					bottom: '3%',
+					containLabel: true
+				},
+				xAxis: [{
+					type: 'category',
+					data: ['项目A', '项目B', '项目C', '项目D', '项目E'],
+					axisLabel: {
+						interval: 0,
+						rotate: 30
+					}
+				}],
+				yAxis: [
+					{
+						type: 'value',
+						name: '金额',
+						axisLabel: {
+							formatter: '{value} 万'
+						}
+					},
+					{
+						type: 'value',
+						name: '利润率',
+						axisLabel: {
+							formatter: '{value} %'
+						}
+					}
+				],
+				series: [
+					{
+						name: '收入',
+						type: 'bar',
+						barGap: 0,
+						data: [50, 45, 40, 38, 35],
+						itemStyle: {
+							color: '#FF4D4F'
+						}
+					},
+					{
+						name: '支出',
+						type: 'bar',
+						data: [30, 25, 20, 18, 15],
+						itemStyle: {
+							color: '#52C41A'
+						}
+					},
+					{
+						name: '利润率',
+						type: 'line',
+						yAxisIndex: 1,
+						data: [40, 44, 50, 52, 57],
+						symbol: 'circle',
+						symbolSize: 8,
+						itemStyle: {
+							color: '#1890FF'
+						},
+						lineStyle: {
+							width: 2
+						}
+					}
+				]
+			}
+			
+			this.operationChart.setOption(option)
 		},
 		switchTime(time) {
 			this.activeTime = time
@@ -530,10 +626,11 @@ import { uniIcons } from '@dcloudio/uni-ui'
 	beforeDestroy() {
 		if (this.myChart) {
 			this.myChart.dispose()
-		}
+			this.operationChart.dispose()
 			window.removeEventListener('resize', this.onResize)
 		}
 	}
+}
 </script>
 
 <style lang="scss">
@@ -970,6 +1067,28 @@ import { uniIcons } from '@dcloudio/uni-ui'
 			}
 		}
 		
+		.operation-chart-container {
+			background-color: #fff;
+			padding: 15px;
+			border-radius: 8px;
+			margin-bottom: 15px;
+			
+			.chart-header {
+				margin-bottom: 15px;
+				
+				.chart-title {
+					font-size: 16px;
+					font-weight: bold;
+					color: #333;
+				}
+			}
+			
+			.chart-wrapper {
+				height: 300px;
+				width: 100%;
+			}
+		}
+		
 		.table-container {
 			background-color: #fff;
 			padding: 15px;