当前位置： 首页uniapp正文 本文介绍: uniapp:如何使用uCharts 目录 第一章 前言 第二章 安装插件uCharts 第三章 使用uCharts 第四章 注意 第一章 前言 需求：这是很久之前的一个项目的需求了，当时我刚接触app，有这么一个需求，在uniapp写的app项目中做一些图表统计，最开始以为用echarts就能解决，用着用着发现有一个这么一个插件它兼容性更高，因此就尝试了一个新的工具，但是弄了一天才完全弄好，于是就想着要留下这个使用的记录，方便以后使用。 查看兼容性：echarts 查看uCharts，官网原话——uCharts是一款基于canvas API开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni–app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东/360）、快应用等更多支持 canvas API 的平台。 uchart官网： uCharts官网 – 秋云uCharts跨平台图表库 第二章 安装插件uCharts 找到插件安装 安装新插件 ->前往插件市场安装 搜索，找到我们要的uChart 下载并导入，导入自己的项目中 选择即可 导入成功 第三章 使用uCharts 我们根据官网走就行 导入成功后，我们直接使用就好 <template> <view> <view class="charts-box"> <qiun-data-charts type="column" :chartData="chartData" /> </view> </view> </template> <script> export default { data() { return { chartData: {}, }; }, onReady() { this.getServerData(); }, methods:{ getServerData() { //模拟从服务器获取数据时的延时 setTimeout(() => { let res = { categories: ["2016","2017","2018","2019","2020","2021"], series: [ { name: "目标值", data: [35,36,31,33,13,34] }, { name: "完成量", data: [18,27,21,24,6,28] } ] }; this.chartData = JSON.parse(JSON.stringify(res)); }, 500); }, } } </script> <style lang="scss"> .charts-box { width: 100%; height: 1200rpx; } </style> 效果图 说明我们使用没有问题 具体使用，我们可以根据demo形成初稿，然后再修改细节。 第四章 注意 如果项目中出现如下问题，先到官网查看是否包括，然后再自行研究 原文地址:https://blog.csdn.net/qq_45796592/article/details/130409528 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若转载，请注明出处：http://www.7code.cn/show_41548.html 如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！ 主题授权提示：请在后台主题设置-主题授权-激活主题的正版授权，授权购买：RiTheme官网显示所有内容声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。uchartsuniapp插件 代码007普通 打赏 收藏 海报 链接
