优化

pages/work/index.vue

@@ -41,7 +41,7 @@
 		<uni-section title="一周充放曲线" type="line" class="sections-list">
 			<date-range-select ref="weekChartDateRangeSelect" @updateDate="updateWeekChartDate" />
 			<view style="width:100%;height: 250px;">
-				<qiun-data-charts type="line" :chartData="weekChartData" :optsWatch='false' :inScrollView="true"
+				<qiun-data-charts type="area" :chartData="weekChartData" :optsWatch='false' :inScrollView="true"
 					:pageScrollTop="pageScrollTop" :opts="options" :ontouch="true" />
 			</view>
 		</uni-section>
@@ -49,7 +49,7 @@
 		<uni-section title="当日功率曲线" type="line" class="sections-list">
 			<date-range-select ref="activeChartDateRangeSelect" @updateDate="updateActiveChartDate" />
 			<view style="width:100%;height: 250px;">
-				<qiun-data-charts type="line" :chartData="activeChartData" :optsWatch='false' :inScrollView="true"
+				<qiun-data-charts type="area" :chartData="activeChartData" :optsWatch='false' :inScrollView="true"
 					:pageScrollTop="pageScrollTop" :opts="glqxOptions" :ontouch="true" />
 			</view>
 		</uni-section>
@@ -78,6 +78,7 @@
 				activeChartData: {},
 				pageScrollTop: 0,
 				glqxOptions: {
+					padding: [10, 5, 0, 10],
 					dataLabel: false,
 					enableScroll: true,
 					xAxis: {
@@ -85,6 +86,16 @@
 						itemCount: 3,
 						disableGrid: true
 					},
+					extra: {
+						area: {
+							type: "curve",
+							opacity: 0.2,
+							addLine: true,
+							width: 2,
+							gradient: true,
+							activeType: "hollow"
+						}
+					}
 					// update: true,
 					// duration: 2,
 					// animation: false,
@@ -92,6 +103,7 @@
 					// padding: [10, 15, 10, 15]
 				},
 				options: {
+					padding: [10, 5, 0, 10],
 					dataLabel: false,
 					enableScroll: true,
 					xAxis: {
@@ -99,6 +111,16 @@
 						itemCount: 5,
 						disableGrid: true
 					},
+					extra: {
+						area: {
+							type: "curve",
+							opacity: 0.2,
+							addLine: true,
+							width: 2,
+							gradient: true,
+							activeType: "hollow"
+						}
+					}
 					// update: true,
 					// duration: 2,
 					// animation: false,