bolinscreening-miniapp/pages/chart/methods.js

import Apis from '@/common/apis/index'
import uCharts from '@/common/utils/u-charts/u-charts.js'
let chartsLine = {
	"type": "line",
	"loadingType": "1",
	"canvasId": "",
	"canvas2d": true,
	"background": "none",
	"animation": true,
	"timing": "easeOut",
	"duration": 1000,
	"padding": [
		15,
		10,
		0,
		15
	],
	"rotate": false,
	"errorReload": true,
	"fontSize": 12,
	"fontColor": "#666666",
	"enableScroll": true,
	"touchMoveLimit": 60,
	"enableMarkLine": false,
	"dataLabel": false,
	"dataPointShape": true,
	"dataPointShapeType": "solid",
	"tapLegend": true,
	"xAxis": {
		"disabled": false,
		"axisLine": true,
		"axisLineColor": "#CCCCCC",
		"calibration": false,
		"fontColor": "#666666",
		"fontSize": 13,
		"rotateLabel": false,
		"labelCount": 5,
		"itemCount": 5,
		"boundaryGap": "center",
		"disableGrid": true,
		"gridColor": "#CCCCCC",
		"gridType": "solid",
		"dashLength": 4,
		"gridEval": 1,
		"scrollShow": false,
		"scrollAlign": "left",
		"scrollColor": "#A6A6A6",
		"scrollBackgroundColor": "#EFEBEF",
		"format": "xAxisYear"
	},
	"yAxis": {
		"disabled": false,
		"disableGrid": false,
		"splitNumber": 5,
		"gridType": "dash",
		"dashLength": 2,
		"gridColor": "#CCCCCC",
		"padding": 10,
		"showTitle": true,
		"data": [{
			"type": "value",
			"position": "left",
			"disabled": false,
			"axisLine": true,
			"axisLineColor": "#CCCCCC",
			"calibration": false,
			"fontColor": "#666666",
			"fontSize": 12,
			"textAlign": "right",
			"title": "",
			"titleFontSize": 17,
			"titleOffsetY": -15,
			"titleOffsetX": 40,
			"titleFontColor": "#666666",
			"min": 4,
			"max": 5.3,
			"tofix": 1,
			"unit": "",
			"format": ""
		}]
	},
	"legend": {
		"show": true,
		"position": "top",
		"float": "right",
		"padding": 10,
		"margin": 0,
		"backgroundColor": "rgba(0,0,0,0)",
		"borderColor": "rgba(0,0,0,0)",
		"borderWidth": 0,
		"fontSize": 13,
		"fontColor": "#666666",
		"lineHeight": 11,
		"hiddenColor": "#CECECE",
		"itemGap": 10
	},
	"extra": {
		"line": {
			"type": "curve",
			"width": 2
		},
		"tooltip": {
			"showBox": true,
			"showArrow": true,
			"showCategory": false,
			"borderWidth": 0,
			"borderRadius": 0,
			"borderColor": "#000000",
			"borderOpacity": 0.7,
			"bgColor": "#000000",
			"bgOpacity": 0.7,
			"gridType": "solid",
			"dashLength": 4,
			"gridColor": "#CCCCCC",
			"fontColor": "#FFFFFF",
			"splitLine": true,
			"horizentalLine": false,
			"xAxisLabel": false,
			"yAxisLabel": false,
			"labelBgColor": "#FFFFFF",
			"labelBgOpacity": 0.7,
			"labelFontColor": "#666666"
		},
		"markLine": {
			"type": "solid",
			"dashLength": 4,
			"data": []
		}
	}
}
export default {
	async inData() {
		try {
			uni.showLoading({
				title: '数据获取中'
			});
			const res = await Apis.GetHealthReport({
				id: this.patientId
			})
			res.data.forEach((v) => {
				v.date = v.time && v.time.split(' ')[0].replaceAll('-', '/')
			})
			this.data = res.data
			this.getNaked();
			uni.hideLoading();
		} catch (error) {
			console.error(error)
		}
	},
	getNaked() {
		let LinA = {
			categories: this.data.map(v => v.date),
			series: [{
					name: '右眼',
					lineType: 'solid',
					legendShape: 'circle',
					color: '#FF8673',
					data: this.data.map(v => v.result.visual.r_naked)
				},
				{
					name: '左眼',
					lineType: 'solid',
					legendShape: 'circle',
					color: '#24B1E9',
					data: this.data.map(v => v.result.visual.l_naked)
				}
			]
		}
		this.chartsDataA = LinA
		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({
			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({
			title: '球镜',
			min: -20,
			max: 20,
			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({
			title: '柱镜',
			min: -6,
			max: 6,
			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({
			title: '轴位',
			min: 0,
			max: 190,
			titleOffsetX: -50,
			optName: 'chartsOpts5'
		});
	},
	showCanvasLine(opt) {
		let line = JSON.parse(JSON.stringify(chartsLine))
		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
			line.yAxis.data[0].titleOffsetX = opt.titleOffsetX || ''
		}
		this.$set(this, opt.optName, line)
	}
}