## [uCharts官方网站](https://www.ucharts.cn)
## [DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn](https://demo.ucharts.cn)
## [优秀的nvue全端组件与模版库nPro](https://ext.dcloud.net.cn/plugin?id=5169)
## [图表组件在项目中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
### [v1.0文档(将在9月30日作废,请尽快转v2.0)](http://doc.ucharts.cn)
## [如何安装、更新 uni_modules 插件点这里,必看,必看,必看](https://uniapp.dcloud.io/uni_modules?id=%e4%bd%bf%e7%94%a8-uni_modules-%e6%8f%92%e4%bb%b6)
## 点击右侧绿色【使用HBuilderX导入插件】即可使用,示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
## <font color=#FF0000> 新手请先完整阅读【帮助文档】及【常见问题】3遍,右侧蓝色按钮【示例项目】请看2遍! </font>
## <font color=#FF0000> 关于NVUE兼容的说明: </font> uCharts.js从2.3.0开始支持nuve(暂时只能通过原生canvas写法调用uCharts,nuve版本组件请见码云示例项目[uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)),因其渲染方式是通过nvue的gcanvas组件来渲染,理论上性能不及renderjs的qiun-data-charts组件性能。官方仍然建议NVUE使用图表的页面改为vue页面,在App端,从性能来讲,由于通讯阻塞的问题,nvue的canvas性能不可能达到使用renderjs的vue页面的canvas。在App端,仍然推荐使用qiun-data-charts组件。[详见uni-app官方说明](https://uniapp.dcloud.io/component/canvas?id=canvas)
[![uCharts/uCharts](https://gitee.com/uCharts/uCharts/widgets/widget_card.svg?colors=393222,ebdfc1,fffae5,d8ca9f,393222,a28b40)](https://gitee.com/uCharts/uCharts)
## 秋云图表组件使用帮助
全新图表组件,全端全平台支持,开箱即用,可选择uCharts引擎全端渲染,也可指定PC端或APP端`单独使用ECharts`引擎渲染图表。支持极简单的调用方式,只需指定图表类型及传入符合标准的图表数据即可,使开发者只需专注业务及数据。同时也支持datacom组件读取uniClinetDB,无需关心如何拼接数据等不必要的重复工作,大大缩短开发时间。
## 为何使用官方封装的组件?
封装组件并不难,谁都会,但组件调试却是一件令人掉头发的事,尤其是canvas封装成组件会带来一系列问题:例如封装后不显示,图表多次初始化导致抖动问题,单页面多个图表点击事件错乱,组件放在scroll-view中无法点击,在图表上滑动时页面无法滚动等等一系列问题。为解决开发者使用可视化组件的困扰,uCharts官方特推出可视化通用组件,本组件具备以下特点:
- 极简单的调用方式,默认配置下只需要传入`图表类型`及`图表数据`即可全端显示。
- 提供强大的`在线配置生成工具`,可视化中的可视化,鼠标点一点就可以生成图表,可视化从此不再难配。
- 兼容ECharts,可选择`PC端或APP端单独使用ECharts`引擎渲染图表。
- H5及App采用`renderjs`渲染图表,动画流畅、性能翻倍。
- 根据父容器尺寸`弹性显示图表`,再也不必为宽高匹配及多端适配问题发愁。
- 支持`加载状态loading及error展示`,避免数据读取显示空白的尴尬。
- chartData`配置与数据解耦`,即便使用ECharts引擎也不必担心拼接option的困扰。
- localdata`后端数据直接渲染`,无需自行拼接chartData的categories及series,从后端拿回的数据简单处理即可生成图表。
- 小程序端不必担心包体积过大问题,ECharts引擎将不会编译到各小程序端,u-charts.js编译后`仅为93kb`。
- 未来将支持通过HbuilderX的[schema2code自动生成全端全平台图表](https://ext.dcloud.net.cn/plugin?id=4684),敬请期待!!!
- uCharts官方拥有3个2000人的QQ群支持,庞大的用户量证明我们一直在努力,本组件将持续更新,请各位放心使用,本组件问题请在`QQ3群`反馈,您的宝贵建议是我们努力的动力!!
## 致开发者
感谢各位开发者`两年`来对秋云及uCharts的支持,uCharts的进步离不开各位开发者的鼓励与贡献,为更好的帮助各位开发者在uni-app生态系统更好的应用图表,uCharts始终坚持开源,并提供社群帮助开发者解决问题。 为确保您能更好的应用图表组件,建议您先`仔细阅读本页文档`以及uCharts官方文档,而不是下载下来`直接使用`。 如遇到问题请先阅读文档,如仍然不能解决,请加入QQ群咨询,如群友均不能解决或者您有特殊需求,请在群内私聊我,因工作原因,回复不一定很及时,您可直接说问题,有时间一定会回复您。
uCharts的开源图表组件的开发,付出了大量的个人时间与精力,经过两年来的考验,不会有比较明显的bug,请各位放心使用。不求您5星评价,也不求您赞赏,`只求您对开源贡献的支持态度`,所以,当您想给`1星评价`的时候,秋云真的会`含泪希望您绕路而行……`。如果您有更好的想法,可以在`码云提交Pull Requests`以帮助更多开发者完成需求,再次感谢各位对uCharts的鼓励与支持!
## 快速体验
一套代码编到7个平台,依次扫描二维码,亲自体验uCharts图表跨平台效果!IOS因demo比较简单无法上架,请自行编译。
![](https://box.kancloud.cn/58092090f2bccc6871ca54dbec268811_654x479.png)
## 快速上手
### <font color=#FF0000> 注意前提条件【版本要求:HBuilderX 3.1.0+】 </font>
- 1、插件市场点击右侧绿色按钮【使用HBuilderX导入插件】,或者【使用HBuilderX导入示例项目】查看完整示例工程
- 2、依赖uniapp的vue-cli项目:请将uni-modules目录复制到src目录,即src/uni_modules。(请升级uniapp依赖为最新版本)
- 3、页面中直接按下面用法直接调用即可,无需在页面中注册组件qiun-data-charts
- 4、注意父元素class='charts-box'这个样式需要有宽高
## 基本用法
- template代码:([建议使用在线工具生成](https://demo.ucharts.cn))
```
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
```
- 标准数据格式1:(折线图、柱状图、区域图等需要categories的直角坐标系图表类型)
```
chartData:{
categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
series: [{
name: "目标值",
data: [35, 36, 31, 33, 13, 34]
}, {
name: "完成量",
data: [18, 27, 21, 24, 6, 28]
}]
}
```
- 标准数据格式2:(饼图、圆环图、漏斗图等不需要categories的图表类型)
```
chartData:{
series: [{
data: [
{
name: "一班",
value: 50
}, {
name: "二班",
value: 30
}, {
name: "三班",
value: 20
}, {
name: "四班",
value: 18
}, {
name: "五班",
value: 8
}
]
}]
}
```
注:其他特殊图表类型,请参考mockdata文件夹下的数据格式,v2.0版本的uCharts已兼容ECharts的数据格式,v2.0版本仍然支持v1.0版本的数据格式。
## localdata数据渲染用法
- 使用localdata数据格式渲染图表的优势:数据结构简单,无需自行拼接chartData的categories及series,从后端拿回的数据简单处理即可生成图表。
- localdata数据的缺点:并不是所有的图表类型均可通过localdata渲染图表,例如混合图,组件并不能识别哪个series分组需要渲染成折线还是柱状图,涉及到复杂的图表,仍需要由chartData传入。
- template代码:([建议使用在线工具生成](https://demo.ucharts.cn))
```
<view class="charts-box"
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
毕业设计基于Springboot + vue的社区医疗服务系统源码+数据库,后台基于若依框架,含用uniapp设计的微信小程序端 前端技术 前端采用Vue、Element UI。 后端技术 后端采用Spring Boot、Spring Security、Redis & Jwt。 项目部署 准备工作 安装idea,MySQL,Redis 扩展 本项目为前后端分离项目,可以安装接口测试软件Postman 项目部署 将项目导入idea中,数据库导入到MySQL中,启动Redis
资源推荐
资源详情
资源评论
收起资源包目录
毕业设计基于Springboot + vue的社区医疗服务系统源码+数据库,后台基于若依框架,含用uniapp设计的微信小程序端 (1742个子文件)
goeasy-android-sdk-release.aar 794KB
push-internal-4.0.2.aar 319KB
update-2.0.7.302.aar 274KB
base-5.0.4.301.aar 238KB
vivo_pushsdk-v2.9.0.0.aar 166KB
push-5.0.4.302.aar 142KB
ui-5.0.4.301.aar 121KB
stats-5.0.4.301.aar 109KB
security-ssl-1.1.5.302.aar 83KB
availableupdate-5.0.4.301.aar 78KB
network-grs-4.0.18.300.aar 71KB
opendevice-5.0.4.300.aar 61KB
security-base-1.1.5.302.aar 44KB
security-encrypt-1.1.5.302.aar 43KB
network-common-4.0.18.300.aar 37KB
device-5.0.4.301.aar 32KB
com.heytap.msp.aar 31KB
tasks-1.4.1.300.aar 25KB
agconnect-core-1.4.0.300.aar 21KB
log-5.0.4.301.aar 6KB
ry.bat 2KB
run.bat 229B
package.bat 153B
package.bat 141B
build.bat 109B
run-web.bat 107B
clean.bat 102B
CodeDirectory 168B
CodeRequirements 188B
CodeRequirements-1 216B
CodeResources 2KB
CodeSignature 5KB
.env.development 221B
若依环境使用手册.docx 418KB
.editorconfig 514B
.eslintignore 298B
liaotian.gif 2.83MB
401.gif 160KB
142.gif 12KB
142.gif 12KB
142.gif 12KB
135.gif 12KB
135.gif 12KB
135.gif 12KB
140.gif 10KB
140.gif 10KB
140.gif 10KB
111.gif 8KB
111.gif 8KB
111.gif 8KB
119.gif 7KB
119.gif 7KB
119.gif 7KB
118.gif 7KB
118.gif 7KB
118.gif 7KB
132.gif 7KB
132.gif 7KB
132.gif 7KB
149.gif 6KB
149.gif 6KB
149.gif 6KB
131.gif 5KB
131.gif 5KB
131.gif 5KB
197.gif 5KB
197.gif 5KB
197.gif 5KB
129.gif 5KB
129.gif 5KB
129.gif 5KB
157.gif 5KB
157.gif 5KB
157.gif 5KB
146.gif 5KB
146.gif 5KB
146.gif 5KB
108.gif 5KB
108.gif 5KB
108.gif 5KB
168.gif 4KB
168.gif 4KB
168.gif 4KB
145.gif 4KB
145.gif 4KB
145.gif 4KB
133.gif 4KB
133.gif 4KB
133.gif 4KB
143.gif 4KB
143.gif 4KB
143.gif 4KB
126.gif 4KB
126.gif 4KB
126.gif 4KB
loading.gif 4KB
loading.gif 4KB
107.gif 4KB
107.gif 4KB
107.gif 4KB
共 1742 条
- 1
- 2
- 3
- 4
- 5
- 6
- 18
资源评论
程序员柳
- 粉丝: 6324
- 资源: 1373
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功