ucharts的引入和使用

1.官网

在线配置网址：https://www.ucharts.cn/
进入首页后，点击“在线工具”，然后点击“在线生成工具”，如图:

这两个按钮都可以进入：

2.项目引入

hbuilderx的版本要是3.1以上，从uniapp的插件市场导入ucharts，地址：https://ext.dcloud.net.cn/plugin?id=271
引入后的目录结构为：

要仔细研读这个文件，支持自定义相关配置：

3.使用

<qiun-data-charts class="charts-box" type="demotype" :chartData="chartData" :opts="options" :inScrollView="true" :canvas2d="true" :ontouch="true" canvasId="canvans" />
// 横纵坐标数据设置
chartData: {
	categories: [111, 2222],
	series: [{
			index: 1,
			name: '心率',
			data: [18, 27, 21, 24, 6, 28]
		},
		{
			index: 0,
			name: '体温',
			data: [35, 36, 31, 33, 13, 34]
		}
	]
},
// 配置
options: {
	color: ['#4EB7FF', '#FF8686'],
	yAxis: {
		data: [{
				position: 'left',
				title: '',
				min: 0,
				max: 1,
				disabled: false,
				disableGrid: false,
				splitNumber: 5,
				gridType: 'solid',
				dashLength: 8,
				gridColor: '#CCCCCC',
				padding: 10,
				showTitle: false,
				// max: 100,
				// textAlign: 'left'
			},
			{
				position: 'right',
				disabled: false,
				disableGrid: false,
				splitNumber: 5,
				gridType: 'solid',
				dashLength: 8,
				gridColor: '#CCCCCC',
				padding: 10,
				showTitle: false,
				title: '',
				min: 0
				// max: 15,
				// max: 100,
				// textAlign: 'left'
			}
		]
	},
	enableScroll: true,
	xAxis: {
		"disabled": false,
		"axisLine": true,
		"axisLineColor": "#CCCCCC",
		"calibration": false,
		"fontColor": "#666666",
		"fontSize": 13,
		"rotateLabel": false,
		"itemCount": 5,
		"boundaryGap": "center",
		"disableGrid": true,
		"gridColor": "#CCCCCC",
		"gridType": "solid",
		"dashLength": 4,
		"gridEval": 1,
		"scrollShow": false,
		"scrollAlign": "left",
		"scrollColor": "#A6A6A6",
		"scrollBackgroundColor": "#EFEBEF",
		format: 'xAxisDemo1' //格式化使用
	},
	legend: { //图标显示的位置
		position: 'top',
		float: 'right'
	},
	extra: {
		area: { //区域的设置
			type: 'curve', //曲线
			gradient: true
		},
		tooltip: { //提示框的设置
			bgColor: '#2177FF'
		}
	}
}

.charts-box {
	width: 100%;
	height: 200rpx;
}