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-进行图表展示(折线图带单位) 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/76521.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue 部署到本机IIS 部署 SPA 应用

安装 URL Rewrite Works With: IIS 7, IIS 7.5, IIS 8, IIS 8.5, IIS 10 URL Rewrite : The Official Microsoft IIS Site 目前电脑IIS是6版本的&#xff0c;以下的方法不太合适操作。目前用Nginx部署&#xff0c;够用了。 nginx配置参考&#xff1a; uni-app 前面项目&am…

Segment Anything Model(SAM)论文解读

一、引言 在这项工作中&#xff0c;作者的目标是建立一个图像分割的基础模型。也就是说&#xff0c;寻求开发一个提示模型&#xff0c;并使用一个能够实现强大泛化的任务在广泛的数据集上对其进行预训练。有了这个模型&#xff0c;使用即时工程解决新数据分布上的一系列下游分…

【rpc】Dubbo和Zookeeper结合使用,它们的作用与联系(通俗易懂,一文理解)

目录 Dubbo是什么&#xff1f; 把系统模块变成分布式&#xff0c;有哪些好处&#xff0c;本来能在一台机子上运行&#xff0c;为什么还要远程调用 Zookeeper是什么&#xff1f; 它们进行配合使用时&#xff0c;之间的关系 服务注册 服务发现 动态地址管理 Dubbo是…

Nacos docker实现nacos高可用集群项目

目录 Nacos是什么&#xff1f; Nacos在公司里的运用是什么&#xff1f; 使用docker构建nacos容器高可用集群 实验规划图&#xff1a;​编辑 1、拉取nacos镜像 2、创建docker网桥&#xff08;实现集群内的机器的互联互通&#xff08;所有的nacos和mysql&#xff09;&#x…

环境变量与Path环境变量

“环境变量”和“path环境变量”其实是两个东西&#xff0c;这一点大家一定要区分开&#xff0c;不要混为一谈。 “环境变量”是操作系统工作环境设置的一些选项或属性参数。每个环境变量由变量名和文件路径组成的&#xff0c;可以设置很多个环境变量。 我们一般使用环境变量…

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

冒泡排序 基本思想 代码实现 # 冒泡排序 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}趟的排序结果为&#…

人生中第一次向开源项目提交PR记录

git了解很久了&#xff0c;但是就是没有向大一点的项目提交过pr&#xff0c;都是自己瞎折腾&#xff0c;记录一下开源项目提交PR过程&#xff0c;省略的过程可以参考&#xff1a; https://www.runoob.com/git/git-tutorial.html&#xff0c;这个里面包括安装&#xff0c;使用&a…

正规好用的电脑端抽奖软件有哪些?

这几个软件都是本人反复用过、反复比较的&#xff0c;且都超过5年。 1. 518抽奖软件 518抽奖软件&#xff0c;518我要发&#xff0c;超好用的年会抽奖软件&#xff0c;简约设计风格。 包含文字号码抽奖、照片抽奖两种模式&#xff0c;支持姓名抽奖、号码抽奖、数字抽奖、照片抽…

如何进行错误处理和异常处理?

错误处理和异常处理是编程中非常重要的概念&#xff0c;它们允许我们在程序运行时处理各种问题和异常情况&#xff0c;以确保程序的稳定性和可靠性。在C语言中&#xff0c;错误处理和异常处理通常通过条件语句和函数来实现。本文将详细讨论C语言中的错误处理和异常处理的方法&a…

项目系列之登录管理

登录管理是现代计算机系统中关键的组成部分之一。那么本篇博客我们来简单了解一下登录的流程与前后端干了啥事。 一.登录流程&#xff1a; 用户打开登录页面&#xff1a; 用户访问应用程序或网站的登录页面。此页面通常包含用户名/邮箱输入字段和密码输入字段&#xff0c;以及…

测试平台部署三——Nginx

测试平台部署——Nginx 一、nginx部署1、nginx的作用:2、案例1二、django静态文件配置和部署1、nginx工作原理2、反向代理一、nginx部署 1、nginx的作用: 静态文件服务器和反向代理django服务 进入nginx容器中 sudo docker run --rm -it nginx:alpine /bin/sh

什么是动态组件以及使用场景

文章目录 一、vue中的动态组件是什么&#xff1f;有什么用&#xff1f;二、使用demo1.tab页签中的使用2.模拟新闻页demo 三、用keep-alive包裹&#xff0c;保持状态总结 一、vue中的动态组件是什么&#xff1f;有什么用&#xff1f; 动态组件指可以动态切换组件的显示和隐藏。…

岩土工程安全监测利器:振弦采集仪的发展

岩土工程安全监测利器&#xff1a;振弦采集仪的发展 岩土工程安全监测是保障建筑物、地下工程和地质环境安全稳定运行的重要手段。传统上&#xff0c;监测手段主要依靠人工巡视以及基础设施安装的传感器&#xff0c;但是这些方法都存在着缺陷。人工巡视存在的问题是数据采集精…

【Vue】详细介绍Vue项目的目录结构及各个核心文件的示例代码

Vue.js并没有严格的文件和目录结构要求&#xff0c;但一般情况下&#xff0c;我们的Vue项目目录结构如下&#xff1a; ├── node_modules/ # 项目依赖的 node 模块 ├── public/ # 公共资源目录 │ ├── favicon.ico # 网页图标 │ └──…

Linux驱动【day2】

mychrdev.c: #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include<linux/uaccess.h> #include<linux/io.h> #include"head.h" unsigned int major; // 保存主设备号 char kbuf[128]{0}; unsigned int…

第24节-PhotoShop基础课程-钢笔工具

文章目录 前言1.钢笔工具1.直线绘制2.曲线绘制 按住shift键 垂直/水平/453.添加&#xff0c;减少锚点&#xff08;在路径上点击锚点就可以增加和删除&#xff09;4.移动锚点 Ctrl 左键5.手柄控制 先按住Alt 点击 一个锚点有两个手柄控制点&#xff08;中间点&#xff09;6.加…

【linux基础(五)】Linux中的开发工具(上)---yum和vim

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到开通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux中的开发工具 1. 前言2.…

4、Nginx 配置实例-反向代理

文章目录 4、nginx 配置实例-反向代理4.1 反向代理实例一4.1.1 实验代码 4.3 反向代理实例二4.3.1 实验代码 【尚硅谷】尚硅谷Nginx教程由浅入深 志不强者智不达&#xff1b;言不信者行不果。 4、nginx 配置实例-反向代理 4.1 反向代理实例一 实现效果&#xff1a;使用 nginx…

窗口函数-分组排序:row_number()、rank() 、dense_rank()、ntile()

窗口函数语法结构&#xff1a; 分析函数() over(partition by 分组列名 order by 排序列名 rows between 开始位置 and 结束位置) 开窗函数和聚合函数区别&#xff1a; 聚合函数会对一组值进行计算并返回一个值&#xff0c;常见的比如sum()&#xff0c;count()&#xff0c;ma…

动态代理JDK与cglib的区别之:如何处理被代理方法中的This调用

关于JDK与cglib动态代理的使用不是本文关注的重点&#xff0c;如有不清楚的同学可以查询相关资料进行了解。本文主要是要讲一下在面对方法存在嵌套调用时JDK与cglib动态代理的区别以及原因。 先看下测试代码&#xff0c;注意下TestProxyJDKImpl的test1方法调用了test2方法即可…