fix: 修改折线图配置

pages/chart/index.vue

@@ -1,28 +1,23 @@
 <template>
 	<div class="container">
 		<div class="chart-box">
-			<div class="chart-title"><span>裸眼数据</span></div>
-			<qiun-data-charts type="line" :chartData="chartsDataA" :opts="chartsOpts" :inScrollView="true" />
+			<qiun-data-charts type="line" :chartData="chartsDataA" :opts="chartsOpts1" :canvas2d="true" canvasId="bluIsPUXClcwSxSnviUHpYIHAqlkYPGmYz" />
 		</div>
 		<div class="line"></div>
 		<div class="chart-box">
-			<div class="chart-title"><span>戴镜数据</span></div>
-			<qiun-data-charts type="line" :chartData="chartsDataB" :opts="chartsOpts" :inScrollView="true" />
+			<qiun-data-charts type="line" :chartData="chartsDataB" :opts="chartsOpts2" :canvas2d="true" canvasId="blPMsbivCyZIDsJZkkpmvJLkogLPjsRPoJ" />
 		</div>
 		<div class="line"></div>
 		<div class="chart-box">
-			<div class="chart-title"><span>屈光数据-球镜</span></div>
-			<qiun-data-charts type="line" :chartData="chartsDataC" :opts="chartsOpts1" :inScrollView="true" />
+			<qiun-data-charts type="line" :chartData="chartsDataC" :opts="chartsOpts3" :canvas2d="true" canvasId="blLGJdyEQwqrvotuWABGnrcJeiexEaPKdW" />
 		</div>
 		<div class="line"></div>
 		<div class="chart-box">
-			<div class="chart-title"><span>屈光数据-柱镜</span></div>
-			<qiun-data-charts type="line" :chartData="chartsDataD" :opts="chartsOpts2" :inScrollView="true" />
+			<qiun-data-charts type="line" :chartData="chartsDataD" :opts="chartsOpts4" :canvas2d="true" canvasId="blSUhcoDishvakzzaivrrrhhQmNiMGxkQG" />
 		</div>
 		<div class="line"></div>
 		<div class="chart-box">
-			<div class="chart-title"><span>屈光数据-轴位</span></div>
-			<qiun-data-charts type="line" :chartData="chartsDataE" :opts="chartsOpts3" :inScrollView="true" />
+			<qiun-data-charts type="line" :chartData="chartsDataE" :opts="chartsOpts5" :canvas2d="true" canvasId="blcEFtdubHXYnljaqVrYZjAVKTWSssDQxw" />
 		</div>
 		<!-- 名词解释弹窗 -->
 		<!-- <uni-popup ref="popupShow" type="bottom">
@@ -58,8 +53,7 @@ export default {
 		return {
 			imgUrl: '',
 			baseUrl: '',
-			cWidth: '',
-			cHeight: '',
+			winHeight: '',
 			patientId: '',
 			data: '',
 			popupData: {
@@ -72,10 +66,11 @@ export default {
 			chartsDataC: {},
 			chartsDataD: {},
 			chartsDataE: {},
-			chartsOpts: {},
 			chartsOpts1: {},
 			chartsOpts2: {},
-			chartsOpts3: {}
+			chartsOpts3: {},
+			chartsOpts4: {},
+			chartsOpts5: {}
 		};
 	},
 	onLoad(options) {
@@ -83,8 +78,7 @@ export default {
 		this.imgUrl = app.globalData.imgUrl;
 		this.baseUrl = app.globalData.baseUrl;
 		this.patientId = options.id;
-		this.cWidth = uni.upx2px(750);
-		this.cHeight = uni.upx2px(600);
+		this.winHeight = uni.getSystemInfoSync().windowHeight + 'px';
 		this.inData();
 	},
 	onShow() {},

pages/chart/methods.js

@@ -4,7 +4,7 @@ let chartsLine = {
 	"type": "line",
 	"loadingType": "1",
 	"canvasId": "",
-	"canvas2d": false,
+	"canvas2d": true,
 	"background": "none",
 	"animation": true,
 	"timing": "easeOut",
@@ -34,8 +34,8 @@ let chartsLine = {
 		"fontColor": "#666666",
 		"fontSize": 13,
 		"rotateLabel": false,
-        "labelCount": 5,
-        "itemCount": 5,
+		"labelCount": 5,
+		"itemCount": 5,
 		"boundaryGap": "center",
 		"disableGrid": true,
 		"gridColor": "#CCCCCC",
@@ -56,7 +56,7 @@ let chartsLine = {
 		"dashLength": 2,
 		"gridColor": "#CCCCCC",
 		"padding": 10,
-		"showTitle": false,
+		"showTitle": true,
 		"data": [{
 			"type": "value",
 			"position": "left",
@@ -68,9 +68,9 @@ let chartsLine = {
 			"fontSize": 12,
 			"textAlign": "right",
 			"title": "",
-			"titleFontSize": 14,
-			"titleOffsetY": 0,
-			"titleOffsetX": 0,
+			"titleFontSize": 17,
+			"titleOffsetY": -15,
+			"titleOffsetX": 40,
 			"titleFontColor": "#666666",
 			"min": 4,
 			"max": 5.3,
@@ -167,55 +167,65 @@ export default {
 			]
 		}
 		this.chartsDataA = LinA
-		this.showCanvasLine("canvasLineA");
+		this.showCanvasLine({
+			title: '裸眼数据',
+			optName: 'chartsOpts1'
+		});
 
 		let LinB = JSON.parse(JSON.stringify(LinA))
 		LinB.series[0].data = this.data.map(v => v.result.visual.r_mirror)
 		LinB.series[1].data = this.data.map(v => v.result.visual.l_mirror)
 		this.chartsDataB = LinB
-		this.showCanvasLine("canvasLineB");
+		this.showCanvasLine({
+			title: '戴镜数据',
+			optName: 'chartsOpts2'
+		});
 
 		let LinC = JSON.parse(JSON.stringify(LinB))
 		LinC.series[0].data = this.data.map(v => v.result.optometry.r_sph)
 		LinC.series[1].data = this.data.map(v => v.result.optometry.l_sph)
 		this.chartsDataC = LinC
-		this.showCanvasLine("canvasLineC", {
+		this.showCanvasLine({
+			title: '球镜',
 			min: -20,
 			max: 20,
-			type: '1'
+			titleOffsetX: -50,
+			optName: 'chartsOpts3'
 		});
 
 		let LinD = JSON.parse(JSON.stringify(LinC))
 		LinD.series[0].data = this.data.map(v => v.result.optometry.r_cyl)
 		LinD.series[1].data = this.data.map(v => v.result.optometry.l_cyl)
 		this.chartsDataD = LinD
-		this.showCanvasLine("canvasLineD", {
+		this.showCanvasLine({
+			title: '柱镜',
 			min: -6,
 			max: 6,
-			type: '2'
+			titleOffsetX: -50,
+			optName: 'chartsOpts4'
 		});
 
 		let LinE = JSON.parse(JSON.stringify(LinD))
 		LinE.series[0].data = this.data.map(v => v.result.optometry.r_axis)
 		LinE.series[1].data = this.data.map(v => v.result.optometry.l_axis)
 		this.chartsDataE = LinE
-		this.showCanvasLine("canvasLineE", {
+		this.showCanvasLine({
+			title: '轴位',
 			min: 0,
 			max: 190,
-			type: '3'
+			titleOffsetX: -50,
+			optName: 'chartsOpts5'
 		});
 	},
-	showCanvasLine(canvasId, opt) {
+	showCanvasLine(opt) {
 		let line = JSON.parse(JSON.stringify(chartsLine))
-		line.canvasId = canvasId
-		if (opt) {
+		line.yAxis.data[0].title = opt.title || ''
+		if (opt && opt.max) {
 			line.yAxis.data[0].min = opt.min
 			line.yAxis.data[0].max = opt.max
 			line.yAxis.data[0].tofix = 2
-			this[`chartsOpts${opt.type}`] = line
-		} else {
-			this.chartsOpts = line
+			line.yAxis.data[0].titleOffsetX = opt.titleOffsetX || ''
 		}
-	},
-
+		this.$set(this, opt.optName, line)
+	}
 }

pages/chart/style.scss

@@ -1,10 +1,10 @@
 .container {
-	position: fixed;
-	right: 0;
-	left: 0;
-	top: 0;
-	bottom: 0;
-	overflow-y: scroll;
+	// position: fixed;
+	// right: 0;
+	// left: 0;
+	// top: 0;
+	// bottom: 0;
+	// overflow-y: scroll;
 }
 
 .line {
@@ -14,23 +14,7 @@
 }
 
 .chart-box {
-	position: relative;
-	padding: 10px 0;
-	.chart-title {
-		position: absolute;
-		top: 10px;
-		left: 10px;
-		z-index: 1;
-		span {
-			font-size: 17px;
-			color: #333333;
-		}
-		.icon-wenhao {
-			font-size: 16px;
-			color: #dbdbdb;
-			margin-left: 8px;
-		}
-	}
+	padding-bottom: 10px;
 }
 .popup-content {
 	width: 100%;