目录
ucharts相关链接
前言
一、导入方式
1.使用comment（复制文件方式）
2.nmp引用方式
二、具体使用示例
1.js文件
2.json文件
3.wxml文件
4.wxss文件
5.显示结果
总结
ucharts相关链接
[ucharts官网]uCharts跨平台图表库
[ucharts组件库git下载]uCharts: 高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。
[微信小程序文档之自定义组件]自定义组件 | 微信开放文档
前言
具体针对微信小程序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.显示结果
文章来源：https://www.toymoban.com/news/detail-665853.html
总结
以上就是今天要讲的内容，本文简单介绍了ucharts组件在微信小程序中的导入和使用方式文章来源地址https://www.toymoban.com/news/detail-665853.html
到了这里，关于ucharts组件的导入和使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
