当前位置: 首页 > news >正文

uni-app 使用uCharts-进行图表展示(折线图带单位)

前言

  • 在uni-app经常是需要进行数据展示,针对这个情况也是有人开发好了第三方包,来兼容不同平台展示

  • uCharts和pc端的Echarts使用差不多,甚至会感觉在uni-app使用uCharts更轻便,更舒服

  • 但是这个第三方包有优点就会有缺点,还会有坑的地方下面我会一一讲解

uCharts使用-注意事项-和避坑

  • 首先我们在hb插件市场下载这个包时可能需要看一段广告......

  • 官方文档确实写的很清楚也很多,稍微适应一下就行了。但在线调试和定制需求是需要收费的

  • 这个组件在uni-app使用时,会受到定位,子绝父相,固定定位,隐藏等css属性影响,会导致显示正常,但是点击数据是没反应的,并且数据弹出框也是显示不出来的

  • 关于这个网上是说加一个canasid等,但并没有大作用,改源码的话不建议删代码,建议往上加

  • 在页面使用时,建议把每一个图标封装成全局组件(组件长宽100),在页面直接使用。

  • 每个图标padding属性很重要它可以是负值,从上 右 下 左 来帮助我们在父组件矫正布局

  • uCharts在示例里面各种图形数据格式-包括标题等,都不能修改它,只能像他看齐

  • x,y 轴单位x轴直接生效,y轴是需要开启才会生效,注意看文档

uCharts包地址

插件市场地址:秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

包文档地址:uCharts官网 - 秋云uCharts跨平台图表库

代码实现

1.来到插件市场-下载插件导入HBuilderX

2.来到全局组件components文件-右键新建组件-创建同名目录(很重要)创建scss命名failure-rate

代码如下-查看官方文档-注意宽高-100-使用父组件宽高

<template><view style="width: 100% ;height: 100%"><qiun-data-charts type="line" :opts="calleqopts" :chartData="calleqdata" /></view>
</template><script>export default {name: "failure-rate",// 接受父组件传递数据props: ['data'],watch: {data: {deep: true,handler(newVal) {console.log('执行了', newVal);// 监听data的变化,数据变化时候更新图标// x轴数据this.categories = newVal.xdata// 数据this.calleqdata.series[0].name = newVal.series[0].namethis.calleqdata.series[0].data = newVal.series[0].datathis.calleqdata.series[1].name = newVal.series[1].namethis.calleqdata.series[1].data = newVal.series[1].data}}},data() {return {// 报警故障配置calleqopts: {// 数据颜色color: ["#1890FF", "#ffc370", ],// 内边距-矫正父组件布局padding: [-5, 0, 0, -5],// 是否显示折线图每个节点数据dataLabel: false,// 是否在每个节点-显示节点dataPointShape: false,// 是否开启滚动条-配合x轴itemCount出现x轴滚动条enableScroll: false,// 图例配置legend: {// 把图例放在图表上方position: "top",},// x轴配置xAxis: {// 单位title: '日期',// 单位横移偏移量titleOffsetX: '-20',// 不绘制纵向网格disableGrid: true},// y轴配置yAxis: {// 虚线-实线gridType: "dash",// 虚线单位dashLength: 2,// 开启y轴单位showTitle: true,// y轴配置data: [{// 不写最大最小值-自增长// min: 0,// max: 150,// y轴单位title: '数量',}]},extra: {line: {// 曲线圆滑模式type: "curve",// 折线的宽度width: 2,// 点击弹出框时,节点样式activeType: "hollow",// 自定义渐变色linearType: "custom",// 开启阴影onShadow: true,// 水平动画animation: "horizontal"}}},// 报警故障数据calleqdata: {// x轴数据categories: [],// 表格数据 - 一个对象就是一个数据series: [{// 数据名name: "",// 数据渐变linearColor: [[0,"#1890FF"],[0.25,"#00B5FF"],[0.5,"#00D1ED"],[0.75,"#00E6BB"],[1,"#90F489"]],// 阴影部分setShadow: [3,8,10,"#1890FF"],// 数据量data: []},{name: "",linearColor: [[0,"#FAC858"],[0.33,"#FFC371"],[0.66,"#FFC2B2"],[1,"#FA7D8D"]],setShadow: [3,8,10,"#FC8452"],data: []}]},};},}
</script>

3.来到父组件使用-因为我们组件符合小程序规范-不用注册直接使用-代码如下

<template><view class="failceshi"><i>折线图</i><view class="failceshi-item"><failure-rate :data="calltendency" /></view></view>
</template><script>export default {data() {return {// 报警率趋势calltendency: {},};},onLoad() {// 模拟掉接口this.getcalltendency()},onReady() {// 模拟掉接口// this.getcalltendency()},methods: {getcalltendency() {console.log('发送数据');setTimeout(() => {let a = {xdata: ["2018", "2019", "2020", "2021", "2022", "2023"],series: [{name: '电话',data: [15, 45, 15, 45, 15, 45]},{name: '短信',data: [95, 125, 95, 125, 95, 125]}]}// 传递数据this.calltendency = aconsole.log('发送完毕');}, 2000)}}}
</script><style lang="scss">.failceshi {i {color: skyblue;font-weight: 700;font-size: 38rpx;margin-left: 50rpx;}.failceshi-item {width: 100vw;height: 400rpx;}}
</style>

4.调用接口传递真实数据-在子组件侦听传递过来的数据进行操作


总结:

经过这一趟流程下来相信你也对 uni-app 使用uCharts-进行图表展示(折线图带单位) 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

相关文章:

uni-app 使用uCharts-进行图表展示(折线图带单位)

前言 在uni-app经常是需要进行数据展示&#xff0c;针对这个情况也是有人开发好了第三方包&#xff0c;来兼容不同平台展示 uCharts和pc端的Echarts使用差不多&#xff0c;甚至会感觉在uni-app使用uCharts更轻便&#xff0c;更舒服 但是这个第三方包有优点就会有缺点&#xf…...

180B参数的Falcon登顶Hugging Face,vs chatGPT 最好开源大模型使用体验

文章目录 使用地址使用体验test1:简单喜好类问题test2:知识性问题test3:开放性问题test4:中文支持test5:问题时效性test6:学术问题使用地址 https://huggingface.co/spaces/tiiuae/falcon-180b-demo 使用体验 相比Falcon-7b,Falcon-180b拥有1800亿的参数量...

服务器数据恢复-EMC存储磁盘损坏的RAID5数据恢复案例

服务器数据恢复环境&#xff1a; 北京某单位有一台EMC某型号存储&#xff0c;有一组由10块STAT硬盘组建的RAID5阵列&#xff0c;另外2块磁盘作为热备盘使用。RAID5阵列上层只划分了一个LUN&#xff0c;分配给SUN小机使用&#xff0c;上层文件系统为ZFS。 服务器故障&#xff1…...

Nginx优化文件上传大小限制

Nginx默认配置 Nginx 默认情况下&#xff0c;上传文件的大小为1M&#xff0c;超过1M就会返回413错误。只用对Nginx进行简单配置即可解决问题。 优化Nginx文件上传大小限制 可以在Nginx配置文件中配置 client_max_body_size 配置项。 设置客户端请求正文允许的最大大小。如果…...

navicat SSH连接数据库报错: Putty key format too new

问题 下载 Putty 0.79 生成了密钥&#xff0c;但是在navicat 15 使用SSH通道连接数据库报错: Putty key format too new 错误原因和处理 原来是因为生成的私钥格式是 V3 &#xff0c; navicat 15 只能识别 V2 所以&#xff0c;在 PuTTYgen Load 私钥&#xff0c;重新保存为 …...

基于大规模MIMO通信系统的半盲信道估计算法matlab性能仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 %EM算法收敛所需的迭代 nIter 1; Yp Y(:,1:L_polit,:); %与导频序列相对应的部分 q…...

自然语言处理学习笔记(九)———— OVV Recall Rate与 IV Recall Rate

目录 1.OVV Recall Rate 2. IV Recall Rate 1.OVV Recall Rate OOV指的是“未登录词”&#xff08;Out Of Vocabulary&#xff09;&#xff0c;或者俗称的“新词”&#xff0c;也即词典未收录的词汇。如何准确切分00V&#xff0c;乃至识别其语义&#xff0c;是整个NLP领域的核…...

区块链正在开启一场回归商业,融合商业的新发展

对于区块链来讲&#xff0c;它其实同样在延续着这样一种发展路径。   正如上文所说&#xff0c;区块链正在开启一场回归商业&#xff0c;融合商业的新发展。   而欲要实现这一点&#xff0c;区块链就是要从底层算法&#xff0c;底层数据传输&#xff0c;底层体系的打造着手…...

【软考】系统集成项目管理工程师(三)信息系统集成专业技术知识③

一、云计算 1、定义 通过互联网来提供大型计算能力和动态易扩展的虚拟化资源&#xff1b;云是网络、互联网的一种比喻说法。是一种大集中的服务模式。 2、特点 &#xff08;1&#xff09;超大规模&#xff08;2&#xff09;虚拟化&#xff08;3&#xff09;高可扩展性&…...

js中如何判断一个对象是否为空对象?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用 Object.keys()⭐ 使用 for...in 循环⭐ 使用 JSON.stringify()⭐ 使用 ES6 的 Object.getOwnPropertyNames()⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带…...

Linux SysRq 简介

文章目录 1. 前言2. 背景3. Linux SysRq3.1 SysRq 简介3.1.1 SysRq 初始化 3.2 通过 procfs 发起 SysRq 请求3.2.1 修改内核日志等级3.2.1.1 触发3.2.1.2 实现简析 3.2.2 手动触发内核 panic3.2.2.1 触发3.2.2.2 实现简析3.2.2.3 应用场景 3.2.3 其它 SysRq 请求 3.3 通过 特殊…...

Mac版本破解Typora,解决Mac安装软件的“已损坏,无法打开。 您应该将它移到废纸篓”问题

一、修改配置文件 首先去官网选择mac版本下载安装 typora下载 然后打开typora包内容找到 /Applications/Typora.app/Contents/Resources/TypeMark/ 编辑器打开上面文件夹&#xff0c;这里我拉到vscode 找到page-dist/static/js/Licen..如下图 输入 hasActivated"…...

elementui el-dialog 动态生成多个,点击按钮打开对应的 dialog

业务场景&#xff1a; 根据后端返回的数据&#xff0c;动态生成表单&#xff0c;返回的数据中会有表单字段的类型&#xff0c;如果单选、多选、富文本&#xff0c;其它的属性还好说&#xff0c;重点说在富文本&#xff0c;因为我想通过 dialog 弹窗的方式&#xff0c;进行富文…...

自己开发一个接口文档页面html

演示效果 具体代码如下 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>框架框架文档页面</…...

信息化发展28

区块链概述 区块链技术具有多中心化存储、隐私保护、防篡改等特点&#xff0c; 提供了开放、分散和容错的事务机制&#xff0c; 成为新一代匿名在线支付、汇款和数字资产交易的核心&#xff0c; 被广泛应用于各大交易平台&#xff0c; 为金融、监管机构、科技创新、农业以及政…...

React 入门实例教程

目录 一、HTML 模板 二、ReactDOM.render() 三、JSX 语法 四、组件 五、this.props.children 六、PropTypes 七、获取真实的DOM节点 八、this.state 九、表单 十、组件的生命周期 constructor() componentWillMount() render() componentDidMount() 组件生命周期…...

Window安装Node.js npm appium Appium Desktop

Window安装Node.js npm appium appium Desktop 1.安装nodejs 参考链接&#xff1a; https://blog.csdn.net/weixin_42064877/article/details/131610918 1)打开浏览器&#xff0c;并前往 Node.js 官网 https://nodejs.org/ ↗。 2)在首页中&#xff0c;您可以看到当前 Node.…...

Pytorch intermediate(三) RNN分类

使用RNN对MNIST手写数字进行分类。RNN和LSTM模型结构 pytorch中的LSTM的使用让人有点头晕&#xff0c;这里讲述的是LSTM的模型参数的意义。 1、加载数据集 import torch import torchvision import torch.nn as nn import torchvision.transforms as transforms import torc…...

vue2+webpack升级vue3+vite,修改插件兼容性bug

同学们可以私信我加入学习群&#xff01; 前言 在前面使用electronvue3的过程中&#xff0c;已经验证了历史vue2代码vue3混合开发的模式。 本次旧项目vue框架整体升级中&#xff0c;同事已经完成了vue3、pinia、router等基础框架工具的升级。所以我此次记录的主要是vite打包工…...

案例实战-Spring boot Web

准备工作 需求&环境搭建 需求&#xff1a; 部门管理&#xff1a; 查询部门列表 删除部门 新增部门 修改部门 员工管理 查询员工列表&#xff08;分页、条件&#xff09; 删除员工 新增员工 修改员工 环境搭建 准备数据库表&#xff08;dept、emp&#xff09; -- 部门管理…...

Spring6.1之RestClient分析

文章目录 1 RestClient1.1 介绍1.2 准备项目1.2.1 pom.xml1.2.2 创建全局 RestClient1.2.3 Get接收数据 retrieve1.2.4 结果转换 Bean1.2.5 Post发布数据1.2.6 Delete删除数据1.2.7 处理错误1.2.8 Exchange 方法 1 RestClient 1.1 介绍 Spring 框架一直提供了两种不同的客户端…...

冒泡排序、选择排序、插入排序、希尔排序

冒泡排序 基本思想 代码实现 # 冒泡排序 def bubble_sort(arr):length len(arr) - 1for i in range(length):flag Truefor j in range(length - i):if arr[j] > arr[j 1]:temp arr[j]arr[j] arr[j 1]arr[j 1] tempflag Falseprint(f第{i 1}趟的排序结果为&#…...

OpenCV(二十三):中值滤波

1.中值滤波的原理 中值滤波&#xff08;Median Filter&#xff09;是一种常用的非线性图像滤波方法&#xff0c;用于去除图像中的椒盐噪声等离群点。它的原理是基于邻域像素值的排序&#xff0c;并将中间值作为当前像素的新值。 2.中值滤波函数 medianBlur() void cv::medianBl…...

Prompt Tuning训练过程

目录 0. 入门 0.1. NLP发展的四个阶段&#xff1a; Prompt工程如此强大&#xff0c;我们还需要模型训练吗&#xff1f; - 知乎 Prompt learning系列之prompt engineering(二) 离散型prompt自动构建 Prompt learning系列之训练策略篇 - 知乎 ptuning v2 的 chatglm垂直领域训练记…...

装备制造企业是否要转型智能装备后服务型公司?

一、从制造到服务&#xff1a;装备制造企业的转型之路 装备制造企业作为国家经济发展的重要支柱&#xff0c;面临着日益激烈的市场竞争。在这样的背景下&#xff0c;越来越多的装备制造企业开始意识到&#xff0c;通过转型为智能装备后服务型公司&#xff0c;可以更好地满足客…...

day-49 代码随想录算法训练营(19) 动态规划 part 10

121.买卖股票的最佳时机 思路一&#xff1a;贪心 不断更新最小买入值不断更新当前值和最小买入值的差值最大值 思路二&#xff1a;动态规划&#xff08;今天自己写出来了哈哈哈哈哈哈哈&#xff09; 1.dp存储&#xff1a;dp[i][0] 表示当前持有 dp[i][1]表示当前不持有2.状…...

检查文件名是否含不可打印字符的C++代码源码

本篇文章属于《518抽奖软件开发日志》系列文章的一部分。 我在开发《518抽奖软件》&#xff08;www.518cj.net&#xff09;的时候&#xff0c;有时候需要检查输入的是否是合法的文件名&#xff0c;文件名是否含不可打印字符等。代码如下&#xff1a; //----------------------…...

学习笔记-正则表达式

https://www.runoob.com/regexp/regexp-tutorial.html 正则表达式re(Regular Expression)是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xff09;和特殊字符&#xff08;称为"元字符"&#xff09;&#xff0c;可以用来描…...

Wireshark TS | 网络路径不一致传输丢包问题

问题背景 网络路径不一致&#xff0c;或者说是网络路径来回不一致&#xff0c;再专业点可以说是网络路径不对称&#xff0c;以上种种说法&#xff0c;做网络方向的工程师肯定会更清楚些&#xff0c;用简单的描述就是&#xff1a; A 与 B 通讯场景&#xff0c;C 和 D 代表中间…...

CMake高级用法实例分析(学习paddle官方的CMakeLists)

cmake基础学习教程 https://juejin.cn/post/6844903557183832078 官方完整CMakeLists cmake_minimum_required(VERSION 3.0) project(PaddleObjectDetector CXX C)option(WITH_MKL "Compile demo with MKL/OpenBlas support,defaultuseMKL." ON) o…...

做设计外包的网站/自己的网站怎么建立

本次将原本控制台工程迁移到了web工程上&#xff0c;依旧保留原本控制台的版本。 需求&#xff1a; 1.把程序迁移到web平台&#xff0c;通过用户上传TXT的方式接收文件&#xff1b; 2.在页面上给出链接 (如果有封皮、作者、字数、页数等信息更佳)或表格&#xff0c;展示经典英文…...

江苏手机网站建设/优秀的品牌策划案例

原型与原型链图 栈&#xff08;stack&#xff09;&#xff1a;由编译器自动分配释放&#xff0c;存放函数参数值&#xff0c;局部变量&#xff0c;先进后出的一个队列 堆&#xff08;heap&#xff09;&#xff1a;一般由程序员分配释放&#xff0c;集合&#xff0c;无序 原型…...

b2b平台如何赚钱/整站优化

##c ###算法一&#xff1a;vector做法 #include <bits/stdc.h> using namespace std;int main() {vector<int> arr;arr.reserve(10010); //将arr的容量&#xff08;capacity&#xff09;扩充至10010(放大到最大数据量)int num;cin >> num;for (int i 0; i …...

网站建设中 网页代码/国外外链平台

参加项目已经有一段时间了,笔者在web标准设计方面的学习有了不少进步.之前学习和实践都是边Google边看书进行的,只输入没输出,也很少和大家进行交流.项目已经接近尾声,有必要进行总结,把自己学到的悟到的在博客园与大家分享交流,同时温故知新,希望在此过程中学到更多的东西.于是…...

一个网站要怎么做/谷歌浏览器官网下载

原标题&#xff1a;一个冬天没下雪的北京终于要下雪了&#xff1f;超级计算机&#xff1a;还不能完全确定1月30日&#xff0c;寒潮南下我国中东部&#xff0c;在我国黄淮江淮一线与冷空气交战掀起大范围雨雪天气&#xff0c;局地还可能有暴雪&#xff0c;这是今年新年以来出现的…...

政府网站网页设计/16888精品货源入口

基本环境&#xff1a;安装好pyCharm社区版使用 pip install Django安装好Django步骤1&#xff1a;使用pyCharm新建项目1. pyCharm新建项目示意图步骤2&#xff1a;新建Django项目命令&#xff1a;django-admin startproject project_name2-1. 使用命令行新建Django项目2-2. Dja…...