uniapp使用ucharts组件
1.ucharts准备
有两种使用方式：一种是在uni的插件市场下载（组件化开发）。一种是手动引入ucharts包。官方都封装好组件了，我们不用岂不是浪费。
直接去dcloud插件市场（DCloud 插件市场）找，第一个是ucharts，第二个是echarts。
不考虑小程序的话，echarts更好，功能丰富，文档工具免费。
ucharts体积要小非常多，但是工具要会员，差点意思，而且网传bug会多一点，但我没遇到。
ucharts文档：uCharts官网 - 秋云uCharts跨平台图表库
2.体积问题
ucharts的里static下放了echarts的文件，导致体积比较大，可以删了。忘了要不要改qiun-data-charts里的引入地址，如果要改的话项目会有报错提示。
以下酌情优化：
因为我的uni_modules里包比较多，导致主包体积有点大，所以我又将ucharts给提取到分包里，并且删除了不需要的文件。同时把qiun-data-charts里的引入地址改一下，注意有两处引入要改。
如果开发中不需要改u-charts源码的话，可以用u-charts.min.js，同样改一下上述引入地址，再把u-charts.js删了，体积会更小。
3.使用
完整代码在下面，根据自己的理解写了点注释。
跟平常使用组件一样，如果没有像我一样把ucharts的提到分包，就不需要引入和定义，直接用。
ucharts把图表配置和渲染数据分开了，chartData里放渲染数据，opts里放图表配置。
type就是定义这是什么图标，柱状图，条形图之类的。
import qiunDataCharts from './components/qiun-data-charts/qiun-data-charts.vue';
components:{qiunDataCharts},
//==========================================
<view style="width:100%; height:280rpx;"><qiun-data-charts :chartData="chartData" background="none" type="bar" :opts="opts"/>
</view> 
<template><view><view class="chart"><view class="chart-item"><view class="form-title">车间在制品</view><!-- 车间在制品 --><view class="board"><view style="width:100%; height:280rpx;"><qiun-data-charts :chartData="chartData" background="none" type="bar" :opts="opts"/></view></view></view><view class="chart-item"><view class="form-title">各工步在制品</view><!-- 各工步在制品 --><view class="board"><view style="width:100%; height:520rpx;"><qiun-data-charts :chartData="workData"background="none" type="column" :opts="workopt"/></view></view></view></view></view>
</template><script>import qiunDataCharts from './components/qiun-data-charts/qiun-data-charts.vue';export default {data() {return {chartData: {},opts: {},workData: {},workopt: {}};},components:{qiunDataCharts},onShow() {this.initWork()this.initCar()},methods: {// 工步initWork(){this.workData = {categories: ["自动焊接","系统返修","层压","层压测试","层压外观检","包装","装机"],series: [{name: "1车间",data: [35,36,31,33,13,34,14]},{name: "2车间",data: [18,27,21,24,6,28,37]},{name: "3车间",data: [18,27,21,24,6,28,23]},{name: "4车间",data: [18,27,21,24,6,28,19]}]},this.workopt = {color: ["#105fa3","#62bf8f","#c56d15","#c62d32","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],padding: [15,15,0,5],enableScroll: false,legend: {show: true,//显示说明文本块fontColor: "#ffffff",//说明文本块颜色},dataLabel: false,//柱状体上方不显示数字xAxis: {rotateLabel: true,rotateAngle: 50,lineHeight: 50,axisLineColor: '#ffffff',//轴线颜色fontColor: "#ffffff",//x轴刻字颜色disableGrid: true,// format: 'xAxisDemo3'},yAxis: {gridColor: "#ffffff",//横向网格线颜色data: [{axisLineColor: "#ffffff",//轴线颜色fontColor: "#ffffff",//y轴刻字颜色min: 0}]},extra: {column: {type: "group",width: 6,seriesGap: 2,//一个刻度中多个柱的间距activeBgColor: "#000000",activeBgOpacity: 0.08,}}}},// 车间initCar(){this.chartData = {categories: ["1车间","2车间","3车间","4车间"],series: [{name: "完成量",data: [38,47,51,24]}]},this.opts = {color: ["#1890FF","#91CB74"],padding: [15,30,0,5],enableScroll: false,legend: {fontColor: "#ffffff",//说明文本块颜色},dataLabel: false,//柱状体上方不显示数字xAxis: {axisLineColor: "#ffffff",//轴线颜色gridColor: "#ffffff",//纵坐标颜色fontColor: "#ffffff",//x轴刻字颜色boundaryGap: "justify",disableGrid: false,min: 0,axisLine: false,max: 80},yAxis: {data: [{type: 'categories',axisLineColor: "#ffffff",//轴线颜色fontColor: "#ffffff",//y轴刻字颜色}]},extra: {bar: {type: "group",width: 9,meterBorde: 1,meterFillColor: "#FFFFFF",activeBgColor: "#000000",activeBgOpacity: 0.08,linearType: "custom",barBorderCircle: true,seriesGap: 2,categoryGap: 2}}}},},}
</script><style lang="scss">
.chart{padding: 0 10rpx;background: #3a3d5c;.chart-item{margin: 8rpx 0;padding: 20rpx;background: #202437;}.form-title{margin: 10rpx 0 26rpx;font-size: 30rpx;color: #fff;text-align: center;}}
</style>相关文章：
uniapp使用ucharts组件
1.ucharts准备 有两种使用方式：一种是在uni的插件市场下载（组件化开发）。一种是手动引入ucharts包。官方都封装好组件了，我们不用岂不是浪费。 直接去dcloud插件市场（DCloud 插件市场）找，第一…...
【RabbitMQ高级篇】消息可靠性问题（1）
目录 1.消息可靠性 1.1.生产者消息确认 1.1.1.修改配置 1.1.2.定义Return回调 1.1.3.定义ConfirmCallback 1.2.消息持久化 1.2.1.交换机持久化 1.2.2.队列持久化 1.2.3.消息持久化 1.3.消费者消息确认 1.3.1.演示none模式 1.3.2.演示auto模式 1.4.消费失败重试机制…...
PR视频剪辑的属性
调整运动效果 选中视频或图品素材在效果控件面板可以看到运动效果的各个参数。 在运动效果中可以调整视频素材的位置、缩放、旋转等属性。 位置属性 PR中素材的位置根据图像锚点的位置决定，由x、y轴的参数控制图像位置。一个1920px1080px的视频素材默认位置是960…...
[数据集][图像分类]常见鱼类分类数据集2w张8类别
数据集类型：图像分类用，不可用于目标检测无标注文件 数据集格式：仅仅包含jpg图片，每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)：7554（剩余1w多为测试集） 分类类别数：…...
Boost之log日志使用
不讲理论，直接上在程序中可用代码： 一、引入Boost模块 开发环境：Visual Studio 2017 Boost库版本：1.68.0 安装方式：Nuget 安装命令： #只安装下面几个即可 Install-package boost -version 1.68.0 Install…...
Spring Cloud LoadBalancer （负载均衡）
目录 什么是负载均衡 服务端负载均衡 客户端负载均衡 Spring Cloud LoadBalancer快速上手 启动多个product-service实例 测试负载均衡 负载均衡策略 自定义负载均衡策略 什么是负载均衡 负载均衡(Load Balance，简称 LB) , 是高并发, 高可用系统必不可少的关…...
ASP.NET Web应用程序出现Maximum request length exceeded报错
一、问题描述 在ASP.NET的web应用中，导出数据时出现500 - Internal server error.Maximum request length exceeded。 二、原因分析 这个错误通常出现在Web应用程序中，表示客户端发送的HTTP请求的长度超过了服务器配置的最大请求长度限制。这可能是因为…...
Modbus
【欢迎关注编码小哥，学习更多实用的编程方法和技巧】 Modbus 是一种广泛使用的通信协议，主要用于工业自动化和控制系统中。它最初由 Modicon（现为施耐德电气的一部分）在1979年开发，旨在实现不同设备之间的通信。Modbu…...
【AI资讯汇总】2024年12月第四周
目录 OpenAI发布o3：AI 推理能力的重大突破，得分高达 87.5% 阿里通义千问Qwen开源视觉推理模型QVQ-72B-Preview OpenAI推出ChatGPT新记忆功能:能跨对话回忆用户交流 OpenAI发布ChatGPT宕机故障详细报告：只因一个小更改导致 OpenAI发布o3&a…...
Pytorch使用手册-DCGAN 指南（专题十四）
1. Introduction 本教程将通过一个示例介绍 DCGANs（深度卷积生成对抗网络）。我们将训练一个生成对抗网络（GAN），在给它展示大量真实名人照片后，它能够生成新的“名人”图片。这里的大部分代码来源于 PyTorch 官方示例中的 DCGAN 实现，而本文档将对该实现进行详细解释，并…...
c++---------------------------string
从今天开始我们就开始学c的容器了就不需要我们造轮子了 1.为什么学习string类 1.1c语言中的字符串 C 语言中，字符串是以 \0 结尾的一些字符的集合，为了操作方便， C 标准库中提供了一些 str 系列 的库函数，但是这些库函数与字符…...
PTPVT 插值说明
文章目录 PTPVT 插值说明 PTPVT 插值说明PVT Hermite插值PVT 三次多项式插值PT 插值Sin轨迹测试结果PVT Hermite插值结果PVT 三次多项式插值结果PT 插值结果 用户轨迹测试结果PVT Hermite插值结果PT 插值结果 PTPVT 插值说明 PT模式： 位置-时间路径插值算法。 PVT模…...
日志门面_SLF4J集成Log4j1.x 及 原理分析)
Java - 日志体系_Simple Logging Facade for Java (SLF4J)日志门面_SLF4J集成Log4j1.x 及 原理分析
文章目录 Pre官网集成Log4j1.x步骤POM依赖使用第一步：编写 Log4j 配置文件第二步：代码 原理分析1. 获取对应的 ILoggerFactory2. 根据 ILoggerFactory 获取 Logger 实例3. 日志记录过程 小结 Pre Java - 日志体系_Apache Commons Logging（JC…...
集成RabbitMQ+MQ常用操作
文章目录 1.环境搭建1.Docker安装RabbitMQ1.拉取镜像2.安装命令3.开启5672和15672端口4.登录控制台 2.整合Spring AMQP1.sun-common模块下创建新模块2.引入amqp依赖和fastjson 3.新建一个mq-demo的模块1.在sun-frame下创建mq-demo2.然后在mq-demo下创建生产者和消费者子模块3.查…...
)
Gitlab17.7+Jenkins2.4.91实现Fastapi/Django项目持续发布版本详细操作(亲测可用)
一、gitlab设置： 1、进入gitlab选择主页在左侧菜单的下面点击管理员按钮。 2、选择左侧菜单的设置，选择网络，在右侧选择出站请求后选择允许来自webhooks和集成对本地网络的请求 3、webhook设置 进入你自己的项目选择左侧菜单的设置ÿ…...
Kubernetes 的资源管理方式（二）
Kubernetes 的资源管理方式 命令式对象配置 命令式对象配置就是通过命令配置和配置文件去操作 Kubernetes 的资源。 命令式对象配置的方式操作资源，可以简单的认为：命令 yaml 配置文件（里面是命令需要的各种参数）。 ① 创建一…...
一种基于动态部分重构的FPGA自修复控制器
1.FPGA动态部分重构技术 动态部分重构技术指在FPGA运行时，通过加载部分位流文件来修改FPGA可重构区域中的逻辑设计，修改过程中其余逻辑功能不受影响整个系统也能够持续运行。 下图为FPGA动态部分重构的基本原理图。通过下载A1.bit、A2.bit、A3.bit 或A4.…...
MarkItDown的使用（将Word、Excel、PDF等转换为Markdown格式）
MarkItDown的使用（将Word、Excel、PDF等转换为Markdown格式） 本文目录： 零、时光宝盒🌻 一、简介 二、安装 三、使用方法 3.1、使用命令行形式 3.2、用 Python 调用 四、总结 五、参考资料 零、时光宝盒🌻 &a…...
【Vim Masterclass 笔记01】Section 1：Course Overview + Section 2：Vim Quickstart
文章目录 Section 1：Course Introduction 课程概述S01L01 Course Overview 课程简介课程概要 S01L02 Course Download 课程资源下载S01L03 What Vim Is and Why You Should Learn It 何为 Vim？学来干啥？1 何为 Vim2 为何学 Vim Section 2&…...
BLE core 内容整理解释
本文内容比较杂散，只是做记录使用，后续会整理的有条理些 link layer 基本介绍 **Link Layer Control（链路层控制）**是蓝牙低功耗（BLE）协议栈的核心部分，负责实现设备间可靠、安全、低功耗的数…...
import org.springframework.data.jpa.repository.JpaRepository＜T, ID＞；
org.springframework.data.jpa.repository.JpaRepository<T, ID> 接口中的 ID 类型参数。 理解 JpaRepository<T, ID> 中的 T 和 ID： T (Type): T 代表的是你想要操作的 实体类 的类型。例如，如果你有一个名为 User 的实体类，那…...
抽象工厂设计模式的理解和实践
在软件开发中，设计模式是前人通过大量实践总结出的、可复用的、解决特定问题的设计方案。它们为我们提供了一种标准化的解决方案，使得代码更加简洁、灵活和易于维护。在众多设计模式中，抽象工厂模式（Abstract Factory Pattern&…...
RuntimeError: CUDA error: initialization
RuntimeError: CUDA error: initialization cuda初始化出问题了，这是因为在python多线程跑gpu代码程序时先对cuda进行操作，然后在跑gpu代码时就没有cuda可用了。 在main的主程序代码加一行代码就可以了，用来获取cuda，在代码中只能…...
可信数据空间建设及应用参考指南（V1.0）
为贯彻国家数据局《可信数据空间发展行动计划（2024-2028 年）》，促进可信数据空间持续、快速和健康发展，相关行业专家组织编写《可信数据空间建设及应用参考指南（V1.0）》（以下简称《参考指南》&a…...
)
目标检测文献阅读-YOLO：统一的实时目标检测(12.23-12.29)
目录 摘要 Abstract 1 引言 2 统一的检测 3 网络设计 4 训练 5 YOLOv5训练猫狗识别模型 5.1 项目代码整体结构介绍 5.2 数据集和预训练权重的准备 5.3 训练猫狗识别模型 5.3.1 修改数据配置文件 5.3.2 修改模型配置文件 5.3.3 训练模型 5.3.4 启用tensorbord查看…...
埃斯顿机器人程序案例多个点位使用变量
多个点位使用变量取放...
JVM实战—4.JVM垃圾回收器的原理和调优
大纲 1.JVM的新生代垃圾回收器ParNew如何工作 2.JVM老年代垃圾回收器CMS是如何工作的 3.线上部署系统时如何设置垃圾回收相关参数 4.新生代垃圾回收参数如何优化 5.老年代的垃圾回收参数如何优化 6.问题汇总 1.JVM的新生代垃圾回收器ParNew如何工作 (1)JVM的核心运行原理…...
】第三层:页缓存的具体实现(下))
【项目日记(8)】第三层:页缓存的具体实现(下)
目录 前言1. 地址空间上的内存使用情况2. 页缓存合并内存的代码实现3. 总结以及对代码的拓展 前言 请先看完上一篇文章页缓存的具体实现(上) 1. 地址空间上的内存使用情况 在地址空间中,一共是4GB大小的空间，地址从0000 0000到FFFF FFFF。 第0页的起始地址是0 第…...
算法题（19）：多数元素
审题： 数组不为空且一定存在众数。需要返回众数的数值 思路： 方法一：哈希映射 先用哈希映射去存储对应数据出现的次数，然后遍历找到众数并输出 当然也可以在第一次映射的过程中就维护一个出现次数最多的数据，这样子就可…...
==、equals、hashcode
和equals区别 用于基本数据类型，比较的是值，用于引用类型，比较的是对象的内存地址。java中只有值传递，因此对于引用类型，实际比较的引用的内存地址的值。equals不能用来判断基本数据类型，只能判断引用数据…...
《优势谈判》——阅读笔记
投入 思想准备：一个谈判是要双赢的，至少需要让对手这么认为；进行一场谈判，需要看到对面是否真的愿意和你谈判 谈判技巧 永远不要接受首次报份；如果对方临时变更了要求，则可以通过立刻要求对方做补偿等方…...
mybatis-plus 用法总结
MyBatis-Plus（简称 MP）是 MyBatis 的增强工具，旨在简化开发者的 CRUD 操作。它在 MyBatis 的基础上提供了更多的功能和便利性，如代码生成器、分页插件、性能分析插件等，使开发者能够更高效地进行数据库操作。MyBatis-P…...
华为开源自研AI框架昇思MindSpore应用案例：ICNet用于实时的语义分割
ICNet用于实时的语义分割 ICNet 被广泛应用于实时的语义分割领域。它在处理图像数据时，能够以较高的效率进行语义分割操作，为相关领域的研究和实际应用提供了有力的支持。ICNet 的实时性使其在众多场景中都具有很大的优势，例如在视频处理、自…...
CAN201 Introduction to Networking（计算机网络）Pt.2 传输层
文章目录 3. Transport Layer（传输层）3.1 Multiplexing and demultiplexing（多路复用和多路分解）3.2 Connectionless transport：UDP3.3 Principles of reliable data transfer3.4 Pipelined communication3.5 TCP: con…...
HashMap
一、什么是 基于哈希表的数据结构允许以O(1)的时间复杂度进行元素的插入，查询和删除 二、底层结构 1.数据结构 在1.8以后，数组链表红黑树 数组：HashMap底层是一个数组，每个数组元素存放一个链表或红黑树（在JDK 1.…...
JavaScript甘特图 dhtmlx-gantt
背景 需求是在后台中，需要用甘特图去展示管理任务相关视图，并且不用依赖vue，兼容JavaScript原生开发。最终使用dhtmlx-gantt，一个半开源的库，基础功能免费，更多功能付费。 甘特图需求如图： 调…...
基于无线传感器网络的无线光照强度采集系统（附详细使用教程+完整代码+原理图+完整课设报告）
🎊项目专栏：【Zigbee课程设计系列文章】（附详细使用教程完整代码原理图完整课设报告） 前言 👑由于无线传感器网络（也即是Zigbee）作为🌐物联网工程的一门必修专业课，具有…...
单元测试中创建多个线程测试 ThreadLocal
单元测试中创建多个线程测试 ThreadLocal 在单元测试中，可以通过以下方式创建多个线程来测试 ThreadLocal 的行为。 目标 验证 ThreadLocal 在多线程环境下是否能正确隔离每个线程的数据。 实现步骤 定义需要测试的类 包含 ThreadLocal 对象的类，提供…...
【 Sonarqube】可视化Java项目单元测试覆盖率统计框架搭建
一、项目背景： 一个小公司的朋友反应他们那边Java项目单元测试有，但还没有可视化统计覆盖率数据，没法统计就不能直观的看到单测的覆盖率，Java的覆盖率统计框架还是比较成熟，部署起来也不是很难，下面我们逐…...
安装CentOS（新手教程超详细）
安装CentOS 1. 安装虚拟机 1.1下载虚拟机软件 VMware(VMware by Broadcom - Cloud Computing for the Enterprise) 我们使用的是VMware Workstation VirtualBox(Downloads – Oracle VirtualBox) 如果使用的是Windows系统，下载带for Windows hosts的版本 1.2…...
一起来看--红黑树
【欢迎关注编码小哥，学习更多实用的编程方法和技巧】 红黑树是一种自平衡的二叉搜索树，广泛应用于计算机科学中，尤其是在实现关联数组和集合时。它的设计旨在确保在最坏情况下，基本动态集合操作（如插入、删除和查找&am…...
【Hackthebox 中英 Write-Up】通过 POST 请求绕过前端限制：基于 Cookie 的认证与数据提取实操指南
Bypassing Frontend Restrictions with POST Requests: A Practical Guide to Cookie-Based Authentication and Data Extraction 通过 POST 请求绕过前端限制 Objective | 目标 The purpose of this exercise is to understand how POST requests work and how to authentica…...
comctl32.dll没有被指定在window运行怎么解决？
一、文件丢失问题：comctl32.dll没有被指定在Windows上运行怎么解决？ comctl32.dll是Windows操作系统中的一个重要组件，它负责提供用户界面元素，如按钮、对话框和列表视图等。当系统提示“comctl32.dll没有被指定在Windows上运行”…...
EC-Final 2024游记
长篇流水账预警 Day -？ 某天上乒乓课时看到懋神群里了我们队问有时间打ec吗，才知道我们最终还是进ec了，也成为了我们学校唯一一支没有金牌的ec队伍，然而此时整个队伍板子都扔了，一个多月没做过题，我脑子就…...
我的Opencv
1.安装Opencv pip install opencv-python 2.读取图像 3.写图像 4. 显示图像 5.waitKey() 6.读视频并播放视频 7.写视频 8. 获取摄像头视频 9.色彩转换 # BGR to GRAY imgGRAY cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # BGR to RGB imgRGB cv2.cvtColor(img, cv2.COLOR_…...
Pandas-缺失数据处理
文章目录 一. 简介1. 缺失数据简介2. NaN简介① 查看NaN，NAN，nan② 两个NaN也不相等③ isnull/isna方法④ notnull/notna 二. 加载缺失值1. 来源2. 加载数据，不包含默认缺失值3.加载数据，手动指定缺失值 三.处理缺失值1. 加载数据…...
windows编译llama.cpp GPU版本
Build 指南 https://github.com/ggerganov/llama.cpp/blob/master/docs/build.md 一、Prerequire 具体步骤（以及遇到的坑）： 如果你要使用CUDA，请确保已安装。 1.安装 最新的 cmake, git, anaconda， pip 配置pyt…...
绝美的数据处理图-三坐标轴-散点图-堆叠图-数据可视化图
clc clear close all %% 读取数据 load(MyColor.mat) %读取颜色包for iloop 1:25 %提取工作表数据data0(iloop) {readtable(data.xlsx,sheet,iloop)}; end%% 解析数据 countzeros(23,14); for iloop 1:25index(iloop) { cell2mat(table2array(data0{1,iloop}(1,1)))};data(i…...
计算机网络500题2024-2025学年度第一学期复习题库（选择、判断、填空）
一、单选题 1、（ ）是实现两个同种网络互连的设备 A. 网桥 B. 网关 C. 集线器 D. 路由器 2、10M以太网有三种接口标准，其中10BASE-T采用（ ） A. 双绞线 B. 粗同轴电缆 C. 细同轴电缆 D. 光纤 3、HDLC是哪…...
绘制多边形)
python学opencv|读取图像（二十二）使用cv2.polylines()绘制多边形
【1】引言 前序学习进程中，已经掌握了使用pythonopencv绘制线段、矩形和圆形的基本操作，相关链接包括且不限于： python学opencv|读取图像（十八）使用cv2.line创造线段-CSDN博客 python学opencv|读取图像（…...