V-能显示图表

pages/index/index.vue

@@ -172,20 +172,10 @@
 				</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>
@@ -214,7 +204,6 @@ import { uniIcons } from '@dcloudio/uni-ui'
 			loading: false,
 			activeTime: 'today',
 			myChart: null,
-			operationChart: null,
 			sortType: 'receivable',
 			
 			// 所有时间维度的数据集合
@@ -383,9 +372,8 @@ import { uniIcons } from '@dcloudio/uni-ui'
 		}
 	},
 	mounted() {
-		this.$nextTick(() => {
 		this.initChart()
-			this.initOperationChart()
+		this.$nextTick(() => {
 			this.sortChart('receivable')
 			window.addEventListener('resize', this.onResize)
 		})
@@ -480,90 +468,6 @@ 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
@@ -626,11 +530,10 @@ 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">
@@ -1058,31 +961,6 @@ import { uniIcons } from '@dcloudio/uni-ui'
 				overflow: hidden;
 			}
 			
-			.chart-wrapper {
-				height: 50vw;
-				max-height: 300px;
-				min-width: 150%;
-				width: max-content;
-				margin-bottom: 10px;
-			}
-		}
-		
-		.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%;