uniApp项目使用uCharts

1) cmd:安装 npm i @qiun/ucharts  (文件默认在node_modules, 这里我放到了components)

2) 引入import uCharts from '@/components/@qiun/ucharts/u-charts'

3) 

<template>
    <view>
        <canvas canvas-id="contractChart" id="contractChart" class="charts" @tap="tap" />
    </view>
</template>

<script>
import uCharts from '@/components/@qiun/ucharts/u-charts'

var uChartsInstance = {}
export default {
    data() {
        return {
            cWidth: 650,
            cHeight: 500
        }
    },
    mounted() {
        this.cWidth = uni.upx2px(650)
        this.cHeight = uni.upx2px(500)
    },
    methods: {
        getServerData(datax, datay) {
            let res = {
                categories: datax || ['1月','2月','3月'],
                series: [{ name: '合同金额', data: datay || [100,200,300] }]
            }
            this.drawCharts('contractChart', res)
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this)
            uChartsInstance[id] = new uCharts({
                type: 'line',
                context: ctx,
                color: ['#4983ef'],
                width: this.cWidth,
                height: this.cHeight,
                dataLabel: false,
                categories: data.categories,
                series: data.series,
                xAxis: { disableGrid: true },
                yAxis: {
                    data: [{ min: 0 }]
                },
                extra: {
                    line: {
                        type: "curve",
                        width: 2,
                        activeType: "hollow",
                        linearType: "custom"
                    }
                }
            })
        },
        tap(e) {
            uChartsInstance[e.target.id].touchLegend(e)
            uChartsInstance[e.target.id].showToolTip(e)
        }
    }
}
</script>

<style scoped>
.charts {
    margin-top: 10px;
    width: 100%;
    height: 500rpx;
}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java 全栈知识体系

包含: Java 基础, Java 部分源码, JVM, Spring, Spring Boot, Spring Cloud, 数据库原理, MySQL, ElasticSearch, MongoDB, Docker, k8s, CI&CD, Linux, DevOps, 分布式, 中间件, 开发工具, Git, IDE, 源码阅读&#xff0c;读书笔记, 开源项目...

【Docker系列】如何在 Docker 环境中部署和运行 One API

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

录的视频怎么消除杂音?从录制到后期的杂音消除攻略

在录制视频时&#xff0c;杂音往往是一个令人头疼的问题。无论是环境噪音、设备噪音还是电磁干扰&#xff0c;杂音的存在都会极大地影响视频的听觉体验。录的视频怎么消除杂音&#xff1f;通过一些前期准备和后期处理技巧&#xff0c;我们可以有效地消除这些杂音&#xff0c;提…

微信小程序:vant组件库安装步骤

前言&#xff1a;在微信小程序中引用vant组件报错&#xff0c;提示路径不存在&#xff0c;这很有可能是因为没有安装构建vant组件库导致。下面是我整理的安装vant组件库的步骤: 第一步&#xff1a;安装node.js(执行完第一步请重启小程序) 具体步骤请看链接&#xff1a;node.js…

蓝桥杯-洛谷刷题-day3(C++)

目录 1.忽略回车的字符串输入 i.getline() ii.逐个字符的识别再输入 2.获取绝对值abs() 3.做题时的误区 4.多个变量的某一个到达判断条件 i.max() 5.[NOIP2016 提高组] 玩具谜题 i.代码 6.逻辑上的圆圈 i.有限个数n的数组 7.数组的定义 i.动态数组 1.忽略回车的字符串输…

Elasticsearch 查询时 term、match、match_phrase、match_phrase_prefix 的区别

Elasticsearch 查询时 term、match、match_phrase、match_phrase_prefix 的区别 keyword 与 text 区别term 查询match 查询match_phrase 查询match_phrase_prefix 查询写在最后 在讲述 es 查询时 term、match、match_phrase、match_phrase_prefix 的区别之前&#xff0c;先来了…

Restful API接⼝简介及为什么要进⾏接⼝压测

一、RESTful API简介 在现代Web开发中&#xff0c;RESTful API已经成为一种标准的设计模式&#xff0c;用于构建和交互网络应用程序。本文将详细介绍RESTful API的基本概念、特点以及如何使用它来设计高效的API接口。 1. 基于协议 HTTP 或 HTTPS RESTful API通常使用HTTP&am…

Android Studio 控制台输出的中文显示乱码

1. Android Studio 控制台输出的中文显示乱码 1.1. 问题 安卓在调试阶段&#xff0c;需要查看app运行时的输出信息、出错提示信息。乱码&#xff0c;会极大的阻碍开发者前进的信心&#xff0c;不能及时的根据提示信息定位问题&#xff0c;因此我们需要查看没有乱码的打印信息。…

前端无感刷新token

摘要&#xff1a; Axios 无感知刷新令牌是一种在前端应用中实现自动刷新访问令牌&#xff08;access token&#xff09;的技术&#xff0c;确保用户在进行 API 请求时不会因为令牌过期而中断操作 目录概览 XMLHttpRequestAxiosFetch APIJQuni.request注意事项&#xff1a; 访问…

ubuntu固定ip

根据自己的VMware中的网关信息和ip信息设置。 然后进入到ubuntu虚拟机的网络设置目录 cd /etc/netplan nano 01-network-manager-all.yaml根据自己的ip来设置!](https://i-blog.csdnimg.cn/direct/f0be245ced5143618c059d6f0734ed81.jpeg#pic_center) 应用你的设置 sudo ne…

阮一峰科技爱好者周刊(第 325 期)推荐工具:一个基于 Next.js 的博客和 CMS 系统

近期&#xff0c;阮一峰在科技爱好者周刊第 325 期中推荐了一款开源工具——ReactPress&#xff0c;ReactPress一个基于 Next.js 的博客和 CMS 系统&#xff0c;可查看 demo站点。&#xff08;fecommunity 投稿&#xff09; ReactPress&#xff1a;一款值得推荐的开源发布平台 …

DevOps工程技术价值流:打造卓越项目协作的优化宝典

一、引言 解锁项目协作的无限潜力&#xff0c;覆盖全链路实现流畅高效。 在当今瞬息万变的商业环境中&#xff0c;项目协作的效率和效果直接关系到企业的竞争力和市场响应速度。DevOps工程技术价值流中的项目协作优化&#xff0c;不仅是技术层面的革新&#xff0c;更是团队协…

如何从头开始构建神经网络?(附教程)

随着流行的深度学习框架的出现&#xff0c;如 TensorFlow、Keras、PyTorch 以及其他类似库&#xff0c;学习神经网络对于新手来说变得更加便捷。虽然这些框架可以让你在几分钟内解决最复杂的计算任务&#xff0c;但它们并不要求你理解背后所有需求的核心概念和直觉。如果你知道…

[flask][html]如何取消marker伪元素

【背景】 flask做项目时,导航栏默认出现小圆点,很难看,希望能够去除。 【分析】 前端查看后,发现是自动生成的伪元素::marker。 【方法】 找到相应的标签,我的情况是li,追加style。 style="list-style: none;"完整li部分: <li class="</

02-分布式对象存储设计原理

02-分布式对象存储设计原理 保存图片、音视频等大文件就是对象存储&#xff1a; 很好的大文件读写性能 还可通过水平扩展实现近乎无限容量 并兼顾服务高可用、数据高可靠 对象存储“全能”&#xff0c;主要因为&#xff0c;对象存储是原生分布式存储系统&#xff0c;相比MySQL、…

【论文复现】STM32设计的物联网智能鱼缸

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀STM32设计的物联网智能鱼缸 【1】项目功能介绍【2】设计需求总结【3】项目硬件模块组成 1.2 设计思路【1】整体设计思路【2】ESP8266工作模式…

『OpenCV-Python』视频的读取和保存

点赞 + 关注 + 收藏 = 学会了 推荐关注 《OpenCV-Python专栏》 上一讲介绍了 OpenCV 的读取图片的方法,这一讲简单聊聊 OpenCV 读取和保存视频。 视频的来源主要有2种,一种是本地视频文件,另一种是实时视频流,比如手机和电脑的摄像头。 要读取这两种视频的方法都是一样的…

2024智能机器人与自动控制国际学术会议 (IRAC 2024)

主办&#xff0c;承办&#xff0c;支持单位 会议官网 www.icirac.org 大会时间&#xff1a;2024年11月29-12月1日 大会简介 2024智能机器人与自动控制国际学术会议 &#xff08;IRAC 2024&#xff09;由华南理工大学主办&#xff0c;会议将于2024年11月29日-12月1日在中国广…

table详细用法

注意&#xff1a;table元素上的很多属性都已经被废弃了&#xff0c;建议使用css方式替代。 表格的box-sizing默认值为border-box 例如&#xff1a; border-collapse属性 border-collapse CSS 属性是用来决定表格的边框是分开&#xff08;separate&#xff09;默认值的还是合并…

【STM32】基于SPI协议读写SD,详解!

文章目录 0 前言1 SD卡的种类和简介1.1 SD卡的种类1.2 SD卡的整体结构1.3 SD卡运行机制——指令和响应2 SD卡的通信总线2.1 SDIO2.2 SPI3 硬件连接4 代码实践【重点】4.1 HAL库移植4.2 标准库移植4.3 遇到的问题和解决方案5 扩展阅读0 前言 因为项目需要,使用stm32读写sd卡,这…