目录
ucharts相关链接
[ucharts官网]uCharts跨平台图表库
[微信小程序文档之自定义组件]自定义组件 | 微信开放文档
前言
具体针对微信小程序ucharts组件库的导入和使用提供了方式和步骤
一、导入方式
1.使用comment(复制文件方式)
①将下载好的qiun-wx-ucharts直接导入到comment
②打开ucharts官网中演示部分并选取需要的图例,点击查看代码,点击微信,点击组件复制js、json、wxml、wxss的代码
③其中json文件的操作步骤为打开pages中index(具体编写ucharts的页面)页面,打开json文件,并写入
{
"usingComponents": {
"qiun-wx-ucharts": "/components/qiun-wx-ucharts/index"
}
}
④阅读文档,并修改相应的属性值
2.nmp引用方式
①将下载好的qiun-wx-ucharts更改命名为@qiun,将下一级的src文件更改命名为wx-ucharts
②打开ucharts官网中演示部分并选取需要的图例,点击查看代码,点击微信,点击组件复制js、json、wxml、wxss的代码
③其中json文件的操作步骤为打开pages中index(具体编写ucharts的页面)页面,打开json文件,并写入
{
"usingComponents": {
"qiun-wx-ucharts": "@qiun/wx-ucharts"
}
}
④阅读文档,并修改相应的属性值
二、具体使用示例
1.js文件
Page({
data: {
chartData: {
},
opts: {
// 通过这个修改主题颜色
color: ["#32CD99"],
// 画布填充边距[上,右,下,左],Array格式
padding:[30,30,30,15],
//dataLabel 是否显示图表区域内数据点上方的数据文案
dataLabel:false,
// 图形标识点显示类型 hollow 空心
dataPointShapeType:"hollow",
// legend设置扩展属性
legend: {
show: false,
},
// 通过这个修改uchart的CSS样式
yAxis: {
gridType: "solid",
dashLength: 2,
disabled: false,
disableGrid: false,
splitNumber: 5,
gridColor: "#CCCCCC",
padding: 10,
showTitle: false,
data: [
{
type: "value",
position: "left",
disabled: false,
axisLine: false,
axisLineColor: "#CCCCCC",
calibration: false,
fontColor: "#666666",
fontSize: 13,
textAlign: "right",
min: 0,
max: 2000,
tofix: null,
unit: "",
format: ""
}
]
},
},
},
onReady() {
this.getServerData();
},
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
//模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
let chartData = {
categories:["5月", "6月", "7月", "8月", "9月"],
series: [
{
name: "目标值",
data: [1500, 1800,1400, 1600, 1800]
}
]
};
this.setData({ chartData });
}, 500);
},
complete(e){
console.log(e);
}
})
2.json文件
{
"usingComponents": {
"qiun-wx-ucharts": "@qiun/wx-ucharts"
}
}
3.wxml文件
<view class="charts-box">
<view>
每月零花钱
</view>
<qiun-wx-ucharts
type="line"
opts="{{opts}}"
chartData="{{chartData}}"
/>
</view>
4.wxss文件
.charts-box{
width: 750rpx;
height: 500rpx;
}
5.显示结果
总结
以上就是今天要讲的内容,本文简单介绍了ucharts组件在微信小程序中的导入和使用方式