官网: https://www.ucharts.cn
文档: https://www.ucharts.cn/v2/#/document/index
插件和 示例: https://ext.dcloud.net.cn/plugin?id=271
uniapp 引入第三方插件直接去插件市场上添加到项目中;
这里主要说下怎么使用:
- 先去示例 Dome 中查看对应的样式,设置要显示的样式.
- 对于图标的细节方面的问题需要通过设置opts进行配置:
<qiun-data-charts type="column" :opts="opts" :chartData="column" />
- 文档怎么看
WeChat619093cd6063b32bc8d9a98b789b59df.jpg
-
Y轴刻度如何只显示整数;
WeChatc422d33e43e04c896d439649b9295ae4.jpg
WeChatb7c0523cc8859bdcba04321a599e0689.jpg
根据文档上描述, 横向向网格数量间隔数量默认为 5, 如果展示的数据列表中最大值为 1, 系统会自动平分成 5 份,就会像图表中显示的那样 0.20, 0.40,0.60,0.80, 1;
要想 Y轴显示整数, 则需要我们将 Y轴设置个 max 和 min , 由于网格数量默认会被分为 5 个, 所以我们在取 max 需要为 5 的倍数, 这样就可以了;
WeChatae61905c5fc6e150e17d57b4ba2cde9e.jpg
取最大值的思路:
// 参数 Value 为展示数据中的最大值.
// 对最大值进行倍数处理
getMultipleMax(value) {
if (value > 5) {
// 大于 5 的 分情况:
if (value / 5 === 0) {
//1. 能被整除的取当前值
return value
} else {
// 2. 不能被整除的的取 (n+1) * 5
let num = Math.floor(num)
return (num + 1) * 5
}
} else {
// 小于 5 的 直接取 5
return 5
}
}
opts 的设置:
opts: {
yAxis: {
gridType: 'dash',
showTitle: true,
data: [{
position: 'left',
title: '数量(辆)',
max: 9,
min: 0,
}]
}
}
