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;
}