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.显示结果

总结

以上就是今天要讲的内容，本文简单介绍了ucharts组件在微信小程序中的导入和使用方式

ucharts组件的导入和使用相关推荐

uniapp中使用ucharts组件开发App中的折线图流程
uniapp中使用ucharts组件开发流程官方ucharts地址我是在uniapp使用echarts后发现在安卓手机app上不显示,所以使用ucharts来代替echarts 组件地址在这里导 ...
flash中制的SWC组件怎样导入到flex中使用
flash中制的SWC组件怎样导入到flex中使用 2010-04-30 11:18 在使用FLASH导出SWC组件文件后,放入项目的LIB文件夹,然后要用实例化一个对象才能进行时操作使用, 但要记得 ...
导入excel（基础表+多表头（二级表头，三级表头）-封装组件实现导入xslx）推荐使用
一级表头:↓ 二级表头↓ 三级表头↓ 思路:封装一个导入的组件,然后全局引用,可以导入基础表,二级表头,三级表头. 封装的组件的作用:接收用户上传的文件 xslx插件的任务:把用户上传的文件转换成后 ...
vue --- 全局注册子组件,并导入全局的子组件
假设: 需要一个评论的模块comment 由于comment在多个页面中可能会复用. 于是创建一个comment.vue 步骤: 创建comment.vue 在需要引用的位置使import comme ...
android pod 组件化_Flutter组件化导入至iOS现有工程中（CocoaPods篇）
Flutter项目实战:方案有三纯Flutter项目,需要投入大量人力进入到Flutter编程中,且现有原生项目需要完全摒弃 Flutter项目混编,暂且不说Flutter所支持的框架,与原生交互的 ...
import引入json文件_在React组件中导入Json文件
我正在尝试在React组件中加载languages.json文件.当我想导入json文件时,我在第一步收到以下错误.这是错误: ERROR in ./app/languages.json Module ...
Axure的安装和组件库导入
背景 Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或Web网站的线框图 ...
【ucharts】uniapp -- 使用秋云 ucharts echarts高性能跨全端图表组件
uCharts简介 uCharts是一款基于canvas API开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web.iOS.Android(基于 uni-app / taro ). ...
Alink（4）：Alink中流组件的数据导入
目录 0. 相关文章链接 1. 内存数据源(MemSourceStreamOp) 1.1. 概述和参数说明 1.2. 代码演示 2. Text文件数据源(TextSourceStreamOp) 2.1 ...

ucharts组件的导入和使用

ucharts相关链接

前言

一、导入方式

1.使用comment（复制文件方式）

2.nmp引用方式

二、具体使用示例

1.js文件

2.json文件

3.wxml文件

4.wxss文件

5.显示结果

总结

ucharts组件的导入和使用相关推荐

最新文章

热门文章