当前位置: 首页 > 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 的封装,比如:心跳机制,重连和一…...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...