uniapp使用ucharts数据过多时可横向拖动图表

前言

一、使用步骤

1.引入库

代码如下（示例）：点击查看导入方式

2.使用

enableScroll: true 和 ontouch=“true” 配套使用，注意此时可能会出现图表不显示问题，先确保xAxis添加itemCount和type=“area”，其次有可能出现真机调试页面滑动时图表不动且压在页面上方，此时就需要canvas2d="true"和canvasId（canvasId注意事项可参考官网），必须确保开启了enableScroll: true，以上都有了一个可横向拖拽的图表就好了
代码如下（示例）：

			chartData: {},

1.
```c
<qiun-data-charts type="area" :opts="opts" :chartData="chartData" canvas2d="true" ontouch="true" canvasId="XkloZdBtQYjFOYuZxpgSUAdZkogOMqxg" />

2.
opts: {
				animation: true,
				background: '#FFFFFF',
				rotateLock: true,
				touchMoveLimit: 60,
				enableScroll: true,-----开启拖拽----
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [15, 10, 0, 15],
				legend: {
					position: 'top',
					float: 'left',
					margin: 16
				},
				xAxis: {
					disableGrid: true,
					itemCount: 5
				},
				yAxis: {
					gridType: 'dash',
					dashLength: 2
				},
				extra: {
					area: {
						type: 'curve',
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true
					}
				}
			}

let res = {
					categories: this.cateData,     //cateData为后台返回值数据做过处理的x轴数组
					series: temp //y轴数组
				};
this.chartData = JSON.parse(JSON.stringify(data));

总结