## [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"
没有合适的资源?快使用搜索试试~ 我知道了~
汽车管理系统前台页面源码+项目说明.zip
共1357个文件
js:229个
json:212个
png:173个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 174 浏览量
2024-01-24
23:42:51
上传
评论
收藏 5.46MB ZIP 举报
温馨提示
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 汽车管理系统前台页面源码+项目说明.zip
资源推荐
资源详情
资源评论
收起资源包目录
汽车管理系统前台页面源码+项目说明.zip (1357个子文件)
uni-fab.vue.bak 8KB
uni.css 23KB
font-icon.css 795B
iconfont.css 608B
iconfont.css 608B
iconfont.css 608B
.editorconfig 207B
.eslintignore 53B
.gitattributes 75B
.gitignore 213B
index.html 778B
sfrz.jpeg 45KB
background2.jpg 33KB
background3.jpg 10KB
echarts.min.js 730KB
echarts.min.js 730KB
vendor.js 485KB
mock.browser.js 254KB
u-charts.js 250KB
u-charts.js 250KB
u-charts.js 250KB
vendor.js 246KB
mock.mp.js 242KB
mock.browser.esm.js 237KB
mock.mp.esm.js 225KB
mock.node.js 222KB
mock.browser.min.js 138KB
qiun-data-charts.js 31KB
calendar.js 24KB
calendar.js 24KB
parser.js 24KB
test.xhr.js 21KB
test.random.js 20KB
uni-forms-item.js 18KB
test.dtd.js 18KB
uni-forms.js 18KB
carManagement.js 17KB
mock.js 17KB
test.dtd.js 16KB
login.js 16KB
uni-popup.js 16KB
test.random.js 16KB
uni-easyinput.js 16KB
authentication.js 16KB
protectDetail.js 15KB
examineDetail.js 15KB
sendDetail.js 15KB
returnDetail.js 15KB
lendDetail.js 15KB
fixDeclare.js 15KB
fixDetail.js 15KB
sendCarDeclare.js 15KB
fixRecord.js 15KB
uni-pagination.js 15KB
fixDeclare.js 15KB
lendCar.js 15KB
index.js 15KB
violationsRecord.js 15KB
fine.js 14KB
protectDeclare.js 14KB
drive.js 14KB
returnCar.js 14KB
lendCarDetail.js 13KB
investigation.js 13KB
uni-segmented-control.js 13KB
protectDetail.js 13KB
sendDetail.js 13KB
index.js 13KB
uni-transition.js 13KB
uni-steps.js 13KB
uni-card.js 13KB
message.js 13KB
protectDetail.js 13KB
carDetail.js 13KB
returnCar.js 13KB
lendCarDeclare.js 13KB
examToDo.js 13KB
examDone.js 13KB
returnCar.js 13KB
drive.js 13KB
protectDeclare.js 13KB
sendCarDeclare.js 13KB
test.fetch.js 13KB
protect.js 13KB
protect.js 13KB
sendCar.js 13KB
sendCar.js 13KB
lendCar.js 13KB
lendCar.js 13KB
uni-group.js 13KB
carDetail.js 13KB
index.js 12KB
protectRecord.js 12KB
carManagement.js 12KB
fix.js 12KB
fix.js 12KB
violationsDetail.js 12KB
uni-icons.js 12KB
validate.js 12KB
fineDetail.js 12KB
共 1357 条
- 1
- 2
- 3
- 4
- 5
- 6
- 14
资源评论
土豆片片
- 粉丝: 1573
- 资源: 5636
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功