uniapp canvas绘制折线图

<view class="qiun-charts">
	<!--#ifdef MP-ALIPAY -->
	<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio"
		:height="cHeight*pixelRatio" :style="{'width':cWidth+'px','height':cHeight+'px'}"
		disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA"
		@touchend="touchEndLineA"></canvas>
	<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
	<!--#endif-->
	<!--#ifndef MP-ALIPAY -->
	<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true
		@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
	<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
	<!--#endif-->
</view>
<view class="progranClose">
	<button plain="true" @click="progranViewSubmit" size="mini">关闭</button>
</view>

onReady() {
	this.fillData();
},
// 视图函数
fillData(data) {
	//data 是图表展示的数据
	// console.log(data)
	let LineA = {
		categories: [],
		series: []
	};

	let numhyp = [],
		numdia = [],
		cate = []


	for (let i = 0; i < data.length; i++) {
		// console.log(data[i])
		cate.push(data[i].createDate.split(' ')[0])
		// if(data[i].hypertensiveClassificationLevel==null){
		// 	data[i].hypertensiveClassificationLevel=0
		// }
		// if(data[i].diabeticClassificationLevel==null){
		// 	data[i].diabeticClassificationLevel=0
		// }
		numhyp.push(data[i].hypertensiveClassificationLevel)
		numdia.push(data[i].diabeticClassificationLevel)
	}

	LineA.categories = cate;

	// console.log(numDate)
	LineA.series = [{
		name: 'xxx',
		data: numhyp,
		color: "#1890ff",
	}, {
		name: 'xxx',
		data: numdia,
		color: "#ffa500",
	}];

	// console.log(LineA)
	let gunShow;
	if (LineA.categories.length > 4) {
		gunShow = true
	} else {
		gunShow = false
	}
	// console.log(LineA,gunShow)
	this.showLineA("canvasLineA", LineA, gunShow);
},

showLineA(canvasId, chartData, gunShow) {
	canvasObj[canvasId] = new uCharts({
		$this: _self, //指针
		canvasId: canvasId, //id
		type: 'line', //类型
		fontSize: 11, //字体大小
		// padding: [15, 15, 0, 15],
		padding: [20, 0, 20, 0], //空白区域值
		//显示下面的内容 高血压 糖尿病 颜色值那个
		legend: { //图例相关配置
			show: false,
		},
		// legend: {
		// 	show: true,
		// 	padding: 5,
		// 	lineHeight: 11,
		// 	margin: 0,
		// },
		dataLabel: false, //显示数据标签内容值
		dataPointShape: false,
		background: '#FFFFFF',
		pixelRatio: _self.pixelRatio,
		categories: chartData.categories, //数据类别
		series: chartData.series, //数据列表
		animation: false,
		enableScroll: gunShow, //开启图表拖拽功能
		xAxis: { //X轴配置
			disableGrid: true,
			type: 'grid',
			gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
			itemCount: 5, //x轴单屏显示数据的数量，默认为5个
			scrollShow: true,
			scrollAlign: 'left',
			scrollBackgroundColor: '#F7F7FF',
			scrollColor: '#DEE7F7',
			rotateLabel: true,
			//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
			//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
		},
		yAxis: { //y轴配置
			//disabled:true
			gridType: 'solid', //网格线条是实线还是虚线
			// gridColor:'#000', //网格线条的颜色，如果不想要网格线，就直接设置成白色就显示不出来了
			solidLength: 8, //X轴网格为虚线时，单段虚线长度
			splitNumber: 5,
			min: 0,
			max: 5,
			format: (val) => {
				// return val.toFixed(0) + '元'
				return val.toFixed(0)
			} //如不写此方法，Y轴刻度默认保留两位小数
		},
		width: _self.cWidth * _self.pixelRatio, //canvas宽度，单位为px
		height: _self.cHeight * _self.pixelRatio, //canvas高度，单位为px
		dataLabel: true,
		dataPointShape: true,
		extra: { //扩展配置
			lineStyle: 'straight' //曲线  curve曲线，straight直线
		},
	});

},

touchLineA(e) {
canvasObj['canvasLineA'].scrollStart(e);
},
moveLineA(e) {
	canvasObj['canvasLineA'].scroll(e);
},
touchEndLineA(e) {
	canvasObj['canvasLineA'].scrollEnd(e);
	//下面是toolTip事件，如果滚动后不需要显示，可不填写
	canvasObj['canvasLineA'].showToolTip(e, {
		format: function(item, category) {
			return category + ' ' + item.name + ':' + item.data
		}
	});
},