uni-app如何导入秋云 ucharts echarts 高性能跨全端图表组件
感性认识
想在 uni-app 中使用 ucharts 官方提供了两种方法:
- uni_modules版本
- 非 uni_modules版本
何为 uni_modules?请看官方文档 uni_modules插件规范 - uni-app官网 (dcloud.io)
导入步骤
uni_modules版本
第一步:下载
如果你是使用 HBuilderX 开发,那就选择第一个自动导入。
如果你和我一样使用 VScode 开发,那你就点击第二个 。下载之后解压文件如下:
第二步:移植文件
官方有这么句话
所以我们在 自己的 src 下新建一个 uni_modules 文件夹 并将上面解压得到的 qiun-data-charts_2.3.3-20210706 改名为 qiun-data-charts ,然后复制到 我们新建的 uni_modules 中
第三步:使用
<!-- 数据展示 --><view class="charts-box"><qiun-data-charts type="column" :chartData="chartsDataColumn1" /></view>data() {return {chartsDataColumn1: {categories: ["2016", "2017", "2018", "2019", "2020", "2021"],series: [{name: "目标值",data: [35, 36, 31, 33, 13, 34],},{name: "完成量",data: [18, 27, 21, 24, 6, 28],},],},};},/* 请根据需求修改图表容器尺寸,如果父容器没有高度图表则会显示异常 */
.charts-box {width: 100%;height: 320px;
}
弄到这里,其实你发现没有效果
我认为其原因是我们自己手动建的 uni_modules 并没有帮我们管理第三方插件(如果时间充足的小伙伴,可以尝试如何从 如何让自己建的 uni_modules 有效入手解决这个问题)
我就不再这浪费时间了,我们来看看第二种引入方式
非uni_modules版本
这种方式其实就是把 qiun-data-charts 当成我们自己写的组件一样,按照 定义 -》引入 -》注册 -》使用 四步走方式导入。
第一步:定义
这里的定义非真正意义上的定义,这里我是想强调大家得看别人的注释和源码。
源码来源:秋云 ucharts echarts 高性能跨全端图表组件 解压之后文件结构如下:
我们只用关心这个文件夹
第二步:移植组件
看官方给的 使用说明
本人亲测:前1-4都是废话 5点才是关键
那么将 components 文件夹移植到我们的项目的哪里呢??
可以从他的组件 源码中找到答案
这个 @ 就是破解点:@ 指的就是 自己项目的 src 目录,所以 将 components 放到 src 下即可。
第三步:引入+注册
import qiunDataCharts from "@/components/qiun-data-charts/qiun-data-charts";components: {qiunDataCharts
},
第四步:使用
<!-- 数据展示 --><view class="charts-box"><qiun-data-charts type="column" :chartData="chartsDataColumn1" /></view>data() {return {chartsDataColumn1: {categories: ["2016", "2017", "2018", "2019", "2020", "2021"],series: [{name: "目标值",data: [35, 36, 31, 33, 13, 34],},{name: "完成量",data: [18, 27, 21, 24, 6, 28],},],},};},/* 请根据需求修改图表容器尺寸,如果父容器没有高度图表则会显示异常 */
.charts-box {width: 100%;height: 320px;
}
效果展示
uni-app如何导入秋云 ucharts echarts 高性能跨全端图表组件相关推荐
- 【ucharts】uniapp -- 使用秋云 ucharts echarts高性能跨全端图表组件
uCharts简介 uCharts是一款基于canvas API开发的适用于所有前端应用的图表库,开发者编写一套代码,可运行到 Web.iOS.Android(基于 uni-app / taro ). ...
- uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件
uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件 首先下载地址如下秋云 ucharts echarts 高性能跨全端图表组件,如果是用uni_mo ...
- uni-app项目使用uCharts高性能跨全端图表组件
前言: uCharts全新图表组件,全端全平台支持,开箱即用,可选择uCharts引擎全端渲染,也可指定PC端或APP端单独使用ECharts引擎渲染图表.支持极简单的调用方式,只需指定图表类型及传入 ...
- 高性能跨全端图表组件--uCharts
安装 注意前提条件[版本要求:HBuilderX 3.3.8+] 使用HBuilderX导入插件:https://ext.dcloud.net.cn/plugin?id=271 导入成功后项目会多一个 ...
- uniapp 使用秋云uCharts图表组件、echarts图表组件
一.uniapp 使用秋云uCharts图表组件 1.我们的项目是依赖uniapp的vue-cli项目 操作:将uni_modules目录复制到src目录,即src/uni_modules. 2.页面 ...
- uniapp 中使用图表(秋云uCharts图表组件)
在用uniapp做项目时,遇到要做折线图的需求,但是又不想用echarts,在uniapp中dom操作非常的麻烦.于是找到了一个专门为app而生的图表插件uCharts(秋云uCharts图表组件), ...
- uniapp中 秋云uCharts图表组件 基础使用
官方文档:秋云uCharts图表组件 1.导入到对应项目中 根目录会多出文件夹uni_modules 柱状图基础使用 完整代码: <template><view><vie ...
- uni app 调用网络打印机_uni-app 的使用体验总结
[实践] uni-app 的使用总结 最近使用 uni-app 的感受. 使用体验 没用之前以为真和 Vue 一样,用了之后才知道.有点类似 Vue 和 小程序结合的感觉.写类似小程序的标签,有着小程 ...
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
最新文章
- java数据和窗口怎么结合_卖jsp编程技巧的那个垃圾的所有实例的答案全部
- 【Python基础】这份 pip 使用小抄,要有全有多全(建议收藏)
- java 正则首位8或者9的8位数字_Python 正则表达式re最完整的操作教程
- 高速通道 > 专有网络对等连接(关闭新购) > VPC互连
- 数学模型——人口增长模型(基于python)
- 算法设计与分析期末复习
- 【060】助力一箭四星,翼辉系统再续辉煌
- 牢记公式,ardupilot EKF2就是纸老虎(五)!
- html中的em的使用方法,css布局的em的使用方法
- 请将磁盘插入‘‘U盘(F:)‘‘的解决方法
- 整除理论与线性丢番图方程相关
- 极客日报第123期:华为鸿蒙商标被驳回复审;《王者荣耀》蝉联全球手游畅销榜冠军;苹果承认iOS 14.5.1令旧款iPhone性能下降
- 细说Dev c++的使用方法及常见问题
- 英国招生官建议个人陈述该做些什么
- 做数学建模,学matlab还是python?
- crontab 奇数时间定时执行
- 完整验证用户注册页面
- AutoCAD.Net二次开发 致命错误 “unhandled access violation reading xxx...”的处理经验
- 证明爱因斯坦错了!诺贝尔物理学奖今年颁给量子纠缠,潘建伟博士导师加冕...
- 【人工智能】AI究竟能为你的生意做什么(以及不能做什么)