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

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准备 有两种使用方式&#xff1a;一种是在uni的插件市场下载&#xff08;组件化开发&#xff09;。一种是手动引入ucharts包。官方都封装好组件了&#xff0c;我们不用岂不是浪费。 直接去dcloud插件市场&#xff08;DCloud 插件市场&#xff09;找&#xff0c;第一…...

LabVIEW工程师的未来发展

对于LabVIEW工程师以及更广义的编程从业者&#xff08;包括“高级民工”码农&#xff09;来说&#xff0c;随着AI技术和软件编程的逐步成熟&#xff0c;确实面临一些新的挑战和机遇。以下是对此问题的深入分析和未来方向的建议&#xff1a; 现状分析&#xff1a;技术过剩与竞争…...

java的bio、nio、aio 以及操作系统的select、poll、epoll

在 Java 和其他编程语言中&#xff0c;I/O 模型的选择对网络应用的性能和可扩展性有着重要影响。以下是 BIO&#xff08;Blocking I/O&#xff09;、NIO&#xff08;Non-blocking I/O&#xff09;、AIO&#xff08;Asynchronous I/O&#xff09;&#xff0c;以及操作系统级别的…...

2024 年发布的 Android AI 手机都有什么功能?

大家好&#xff0c;我是拭心。 2024 年是 AI 快速发展的一年&#xff0c;这一年 AI 再获诺贝尔奖&#xff0c;微软/苹果/谷歌等巨头纷纷拥抱 AI&#xff0c;多款强大的 AI 手机进入我们的生活。 今年全球 16% 的智能手机出货量为 AI 手机&#xff0c;到 2028 年&#xff0c;这…...

RLHF,LM模型

LLM(Large Language Model) RLHF(Reinforcement Learning from Human Feedback),即以强化学习方式依据人类反馈优化语言模型。 RLHF思想:使用强化学习的方式直接优化带有人类反馈的语言模型。RLHF使得在一般文本数据语料库上训练的语言模型能与复杂的人类价值观对齐。 R…...

【机器学习】工业 4.0 下机器学习如何驱动智能制造升级

我的个人主页 我的领域&#xff1a;人工智能篇&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;&#x1f44d;点赞 收藏❤ 随着科技的飞速发展&#xff0c;工业 4.0 浪潮正席卷全球制造业&#xff0c;而机器学习作为这一变革中的关键技术&#xff0c;正以前…...

REST与RPC的对比:从性能到扩展性的全面分析

在微服务架构中&#xff0c;服务间通信是核心问题之一。常见的两种通信方式是REST&#xff08;Representational State Transfer&#xff09;和RPC&#xff08;Remote Procedure Call&#xff09;。它们各有优缺点&#xff0c;适用于不同场景。本文将从性能、扩展性、兼容性和开…...

MATLAB中将MAT文件转换为Excel文件

MATLAB中将MAT文件转换为Excel文件 MATLAB提供了多种方法将MAT文件中的数据导出到Excel文件中。下面介绍几种常用的方法&#xff1a; 1. 使用 writetable 函数 优点&#xff1a; 功能强大&#xff0c;可以灵活控制输出格式。用法&#xff1a; data load(your_data.mat); …...

leetcode hot 100 跳跃游戏2

45. 跳跃游戏 II 已解答 中等 相关标签 相关企业 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j…...

【Cesium】八、Cesium 默认地图不显示,不加载默认Bing地图

文章目录 前言实现方法App.vue 前言 Cesium 默认加载的地图是bing地图&#xff0c;个人认为请求bing地图会收到网络限制&#xff0c;导致地图资源下载很慢&#xff0c;所以设置默认不加载bing地图&#xff08;后续我使用的是天地图&#xff09; 参考文章&#xff1a; cesium …...

【新方法】通过清华镜像源加速 PyTorch GPU 2.5安装及 CUDA 版本选择指南

下面详细介绍所提到的两条命令&#xff0c;它们的作用及如何在你的 Python 环境中加速 PyTorch 等库的安装。 1. 设置清华镜像源 pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple这条命令的作用是将 pip &#xff08;Python 的包管理工具&#xf…...

MySQL的sql操作有哪些

MySQL 的 SQL 操作可以分为几个主要类别&#xff0c;每个类别包含了一系列的语句&#xff0c;用于执行不同的数据库操作&#xff1a; 数据查询语言&#xff08;DQL&#xff09; SELECT&#xff1a;用于从一个或多个表中检索数据。可以使用 WHERE 子句进行条件筛选&#xff0c…...

ArcGIS计算矢量要素集中每一个面的遥感影像平均值、最大值等统计指标

本文介绍在ArcMap软件中&#xff0c;基于矢量面要素集&#xff0c;计算在其中每一个面区域内&#xff0c;遥感影像的像元个数、平均值、总和等统计值&#xff0c;并将统计信息附加到矢量图层的属性表中的方法。 首先&#xff0c;明确一下本文的需求。现在有一个矢量面要素集&am…...

EasyExcel(环境搭建以及常用写入操作)

文章目录 EasyExcel环境搭建1.创建模块 easyexcel-demo2.引入依赖3.启动类创建 EasyExcel写1.最简单的写入1.模板2.方法3.结果 Write01.xlsx 2.指定字段不写入Excel1.模板2.方法3.结果 Write02.xlsx 3.指定字段写入excel1.模板2.方法3.结果 Write03.xlsx 4.按照index顺序写入ex…...

探索Milvus数据库:新手入门指南(tencent云)

开启向量数据库的奇妙之旅 在数据科学和机器学习领域&#xff0c;Milvus是一个专为向量数据设计的开源数据库。它以其高性能和易于使用的特点&#xff0c;成为了处理大规模向量搜索任务的理想选择。如果你是Milvus的新手&#xff0c;这篇文章将带你一步步了解如何开始你的Milv…...

MySQL:一文弄懂时区time_zone

你还在被以下问题困扰吗&#xff1a; MySQL 的安装规范中应该设置什么时区&#xff1f; JAVA 应用读取到的时间和北京时间差了 14 个小时&#xff0c;为什么&#xff1f;怎么解决&#xff1f; 已经运行一段时间的业务&#xff0c;修改 MySQL 的时区会影响已经存储的时间类型数据…...

基于python的天气可视化系统

目 录 1绪论 1.1研究背景 1.2研究意义 1.3当前研究现状 1.4研究内容 第2章 相关基础理论 2.1 爬虫技术基础 2.2 Python 在爬虫中的应用 2.3 爬虫系统的设计要点 第3章 天气网数据可视化系统设计 3.1 系统概述及主要内容 3.1.1 系统架构 3.1.2 工具选择…...

STM32 高级 WIFi案例1:测试AT指令

需求描述 测试AT指令是否能够正常控制ESP32的wifi&#xff0c;比如重启、读取设备信息等。 思路&#xff1a; stm32通过串口usart2向ESP32发布命令。ESP32通过串口1返回信息。 配置&#xff1a; 第一步&#xff1a;对ESP32芯片烧录可以读取stm32命令的固件&#xff08;fac…...

SpringCloud微服务架构

文章目录 认识微服务&#xff1a;SpringCloud 服务拆分及远程调用实现夸远程服务调用使用RestTemplateEureka注册中心 搭建EruekaServer注册服务服务发现 Ribbon负载均衡 修改负载均衡规则解饿加载 Nacos注册中心&#xff08;nacos一部分功能&#xff09; 服务注册到nacosnacos…...

WebSocket封装

提示:记录工作中遇到的需求及解决办法 文章目录 前言二、背景三、WebSocket3.1 什么是 WebSocket ?为什么使用他?四、封装 WebSocket4.1 Javascript 版本4.2 Typescript 版本4.3 如何使用?五、我的痛点如何处理前言 本文将介绍 WebSocket 的封装,比如:心跳机制,重连和一…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

DBLP数据库是什么?

DBLP&#xff08;Digital Bibliography & Library Project&#xff09;Computer Science Bibliography是全球著名的计算机科学出版物的开放书目数据库。DBLP所收录的期刊和会议论文质量较高&#xff0c;数据库文献更新速度很快&#xff0c;很好地反映了国际计算机科学学术研…...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

上位机开发过程中的设计模式体会(1):工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...