bolinscreening-miniapp/pages/chart/methods.js

import Apis from '@/common/apis/index'
import uCharts from '@/common/utils/u-charts/u-charts.js'
let canvaLineA = null;
let lastMoveTime = null; //最后执行移动的时间戳
export default {
	async inData() {
		try {
			uni.showLoading({
				title: '数据获取中'
			});
			// date_flag 近几个月
			// exam_type 1为视力，2为眼压，3为综合验光，4为角膜内皮检查，5为光学生物测量
			let query = {
				group_id: uni.getStorageSync('gid'),
				id: this.patientId,
				date_flag: 12,
				exam_type: 5
			}
			const res = await Apis.patientExamResultAnalysis(query)
			res.data.eye_list.forEach(v => {
				let reg = /(\d{4})-(\d{2})-(\d{2})/
				v.month = v.date.toString().replace(reg, '$2/$3')
			})
			this.data = res.data
			this.getServerData();
			uni.hideLoading();
		} catch (error) {
			console.log(error)
		}
	},
	getServerData() {
		let _self = this;
		let data = {
			"categories": this.data.eye_list.map(v => v.month),
			"series": [{
					"name": "右眼",
					"lineType": "solid",
					"legendShape": 'circle',
					"color": '#FF8673',
					"data": this.data.eye_list.map(v => v.al_od)
				},
				{
					"name": "左眼",
					"lineType": "solid",
					"legendShape": 'circle',
					"color": '#24B1E9',
					"data": this.data.eye_list.map(v => v.al_os)
				}
			]
		}
		console.log(data)
		let LineA = {
			categories: [],
			series: []
		};
		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
		LineA.categories = data.categories;
		LineA.series = data.series;

		_self.textarea = JSON.stringify(data);
		_self.showLineA("canvasLineA", LineA);

	},
	showLineA(canvasId, chartData) {
		let _self = this;
		canvaLineA = new uCharts({
			$this: _self,
			canvasId: canvasId,
			type: 'line',
			background: '#ffffff',
			animation: true,
			timing: 'easeOut',
			duration: 1000,
			// color: [
			// 	'#FF8673',
			// 	'#24B1E9',
			// ],
			rotate: false,
			errorReload: true,
			fontSize: 10,
			fontColor: '#999999',
			enableScroll: false,
			touchMoveLimit: 60,
			enableMarkLine: false,
			dataLabel: false,
			dataPointShape: true,
			dataPointShapeType: 'solid',
			tapLegend: true,
			pixelRatio: _self.pixelRatio,
			categories: chartData.categories,
			series: chartData.series,
			animation: true,
			xAxis: {
				disabled: false,
				axisLine: true,
				axisLineColor: '#DBDBDB',
				calibration: false,
				fontColor: '#999999',
				fontSize: 10,
				rotateLabel: false,
				boundaryGap: 'center',
				disableGrid: true,
				gridColor: '#DBDBDB',
				gridType: 'solid',
				dashLength: 4,
				gridEval: 1
			},
			yAxis: {
				disabled: false,
				disableGrid: false,
				padding: 800,
				axisLineColor: '#DBDBDB',
				gridType: 'solid',
				gridColor: '#DBDBDB',
				showTitle: false,
				data: [{
					axisLine: false,
					format: (val) => {
						return val.toFixed(1)
					}
				}],
			},
			legend: {
				show: true,
				position: 'top',
				float: 'right',
				padding: 0,
				margin: 25,
				backgroundColor: 'rgba(0,0,0,0)',
				borderColor: 'rgba(0,0,0,0)',
				borderWidth: 0,
				fontSize: 12,
				fontColor: '#000000',
				lineHeight: 12,
				hiddenColor: '#CECECE',
				itemGap: 16,
			},
			extra: {
				line: {
					type: 'straight',
					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: []
				}
			},
			width: _self.cWidth,
			height: _self.cHeight,
		});

	},
	touchLineA(e) {
		lastMoveTime = Date.now();
	},
	moveLineA(e) {
		let currMoveTime = Date.now();
		let duration = currMoveTime - lastMoveTime;
		if (duration < Math.floor(1000 / 60)) return; //每秒60帧
		lastMoveTime = currMoveTime;

		let currIndex = canvaLineA.getCurrentDataIndex(e);
		if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
			let riqi = canvaLineA.opts.categories[currIndex];
			let leibie = canvaLineA.opts.series[0].name;
			let shuju = canvaLineA.opts.series[0].data[currIndex];
			this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
		}
		canvaLineA.showToolTip(e, {
			format: function(item, category) {
				return category + ' ' + item.name + ':' + item.data
			}
		});
	},
	touchEndLineA(e) {
		let currIndex = canvaLineA.getCurrentDataIndex(e);
		if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
			let riqi = canvaLineA.opts.categories[currIndex];
			let leibie = canvaLineA.opts.series[0].name;
			let shuju = canvaLineA.opts.series[0].data[currIndex];
			this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
		}
		canvaLineA.touchLegend(e);
		canvaLineA.showToolTip(e, {
			format: function(item, category) {
				return category + ' ' + item.name + ':' + item.data
			}
		});
	},
	onOpenPopup(name) {
		this.popupData.title = name
		switch (name) {
			case '屈光度':
				this.popupData.content = '眼轴是角膜正中到视神经与视网膜黄斑中心凹之间的一条假设线的长度，也就是眼球前后径的长度。'
				break
			case '眼轴':
				this.popupData.content =
					`眼球的发育如同人的身高从矮到高的发育一样，眼轴经历从短到长、眼轴屈光状态从远视眼到正视眼的过程，这就是眼球发育的正视化过程。<br/> <img mode="widthFix" style="width:100%;display: block;" src="${this.baseUrl}/device/chart_eye_1.png" > <br/>眼球的发育如同人的身高从矮到高的发育一样，眼轴经历从短到长、眼轴屈光状态从远视眼到正视眼的过程，这就是眼球发育的正视化过程。`
				break
			case '轴率比':
				this.popupData.content =
					`轴率比是眼轴长度与角膜曲率半径平均值的比值。<br/>
				近视分为三种， 屈光指数性近视、 曲率性近视、 轴性近视。 第一种是指轴长不变（ 或在正常范围内）， 而由晶状体等屈光因素改变所引起的近视。 第二种是角膜曲率过高（ 超过46D） 引起的近视。 这两种都不常见。 最常见的是第三种， 由眼轴异常变长引发的近视。<br/>
				眼球在发育过程中为了维持正视化（ 不近视） 的状态， 角膜曲率半径平均值会随着眼轴长度的延长而变大。 当角膜曲率半径变大在不能充分代偿眼轴长度过度延长时， 就会慢慢发展为近视。 轴率比（ AL /
					CR， 即上述第二个指标数值除以第三个指标数值） 均值在不同种族、 年龄、 性别间无显著差距， 不同人种平均值范围在2 .90~3.10 之间。<br/>
				近年来， 研究人员发现， 轴率比可以作为检验小朋友是否近视、 近视程度的一个判定标准。 轴率比大于3小于3 .199， 则意味着产生了低度近视（ 50 度 - 300 度， 准确度90 .3 % ）；轴率比大于3 .199， 则意味着产生了中度近视（ 300 度 - 600 度， 准确度89 .10 % ）。`
				break
		}
		this.$refs.popupShow.open()
	},
}