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

Vue2/Vue3使用DataV

Vue2

注意vue2与3安装DataV命令命令是不同的

Vue3

DataV - Vue3

官网地址

注意vue2与3安装DataV命令命令是不同的
vue3+vite 与 Vue3+webpack 对应安装也不同

vue3+vite

npm install @kjgl77/datav-vue3

全局引入

// main.ts中全局引入
import { createApp } from 'vue'
import DataVVue3 from '@kjgl77/datav-vue3'const app = createApp(App)app.use(DataVVue3)
app.mount('#app')

引入后在.vue文件中可以直接使用

<dv-decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />

局部引入


<template><!-- 引入之后就可以在vue的template中直接使用 --><decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" /><decoration-2 :reverse="true" style="width:5px;height:150px;" />
</template>
<!--.vue文件的script中import部分组件 -->
<script lang="ts" setup>
import { Decoration1, Decoration2 } from '@kjgl77/datav-vue3'
</script>
如下案列所示:

胶囊柱图

在这里插入图片描述

<template><div w50rem h25rem flex="~ col" justify-center items-center bg-dark><div><dv-capsule-chart :config="config" style="width:25rem;height:15rem; color: black" /></div><div pt5><button btn @click="addData">增加数据</button></div></div>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs, onUnmounted, onMounted } from "vue";
const addData = ()=>{config.data.push({name: '测试'+Math.floor(Math.random() * 100),value: Math.floor(Math.random() * 100)})
}
const config = reactive({data: [{name: '南阳',value: 167},{name: '周口',value: 123},{name: '漯河',value: 98},{name: '郑州',value: 75},{name: '西峡',value: 66},],colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],unit: '万元',labelNum: 8,
})
</script>
<style scoped>
</style>

相关文章:

Vue2/Vue3使用DataV

Vue2 注意vue2与3安装DataV命令命令是不同的Vue3 DataV - Vue3 官网地址 注意vue2与3安装DataV命令命令是不同的 vue3vite 与 Vue3webpack 对应安装也不同vue3vite npm install kjgl77/datav-vue3全局引入 // main.ts中全局引入 import { createApp } from vue import Da…...

汇编环境搭建

学习视频 将MASM所在目录 指定为C盘...

Android 系统 `android.app.Fragment` 类的深度定制与常见问题解析

Android 系统 android.app.Fragment 类的深度定制与常见问题解析 目录 引言Fragment 概述Fragment 的生命周期Fragment 的系统层深度定制 4.1 Fragment 的创建与初始化4.2 Fragment 的布局与视图4.3 Fragment 的通信机制4.4 Fragment 的动画与过渡4.5 Fragment 的状态保存与恢…...

linux ueditor nginx https 后台配置项返回格式出错,上传功能将不能正常使用

jsp的版本 如果出现了这个错误&#xff0c;上传的图标都亮起的情况&#xff0c;还是提示这个&#xff0c; 可以试试修改 uedtior.all.js 8082行 isJsonp utils.isCrossDomainUrl(configUrl); 改为 // isJsonp utils.isCrossDomainUrl(configUrl); isJsonp true; 如果还不…...

【机器学习 | 数据挖掘】时间序列算法

时间序列是按时间顺序排列的、随时间变化且相互关联的数据序列。分析时间序列的方法构成数据分析的一个重要领域&#xff0c;即时间序列分析。以下是对时间序列算法的详细介绍&#xff1a; 一、时间序列的分类 时间序列根据所研究的依据不同&#xff0c;可有不同的分类&#…...

uniapp H5 对接 声网,截图

文章目录 安装依赖创建容器容器样式 javascript代码ImageDataToBlob 方法 控制控制台LOG输出 安装依赖 版本"agora-rtc-sdk-ng": "^4.22.0", 创建容器 <template><view class"videoValue " id"videoValue"><u-toast…...

家谱管理系统|Java|SSM|VUE| 前后端分离

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、VUE、jquery,html 5⃣️数据库…...

【LeetCode】200、岛屿数量

【LeetCode】200、岛屿数量 文章目录 一、并查集1.1 并查集1.2 多语言解法 二、洪水填充 DFS2.1 洪水填充 DFS 一、并查集 1.1 并查集 // go var sets int var father [90000]intfunc numIslands(grid [][]byte) int {n, m : len(grid), len(grid[0])build(grid, n, m)for i …...

idea报错:There is not enough memory to perform the requested operation.

文章目录 一、问题描述二、先解决三、后原因&#xff08;了解&#xff09; 一、问题描述 就是在使用 IDEA 写代码时&#xff0c;IDEA 可能会弹一个窗&#xff0c;大概提示你目前使用的 IDEA 内存不足&#xff0c;其实就是提醒你 JVM 的内存不够了&#xff0c;需要重新分配。弹…...

python ai ReAct 代理(ReAct Agent)

ReAct 代理&#xff08;ReAct Agent&#xff09;是一种结合了推理&#xff08;Reasoning&#xff09;和行动&#xff08;Action&#xff09;的智能代理框架&#xff0c;旨在通过交互式的方式解决复杂任务。ReAct 的核心思想是让代理在完成任务时&#xff0c;能够动态地推理下一…...

HTML入门教程|| HTML 基本标签(2)

HTML 列表 HTML列表 HTML 无序列表 ul 元素表示无序列表。 ul 元素中的项目使用 li 元素表示。 元素没有在HTML5中定义任何属性&#xff0c;并且您使用CSS控制列表的显示。 HTML5中的 type 和 compact 属性已过时。 您可以在以下代码中查看正在使用的 ul 元素。 <!D…...

MySQL root用户密码忘记怎么办(Reset root account password)

在使用MySQL数据库的的过程中&#xff0c;不可避免的会出现忘记密码的现象。普通用户的密码如果忘记&#xff0c;可以用更高权限的用户&#xff08;例如root&#xff09;进行重置。但是如果root用户的密码忘记了&#xff0c;由于root用户本身就是最高权限&#xff0c;那这个方法…...

groovy:多线程 简单示例

在Groovy中&#xff0c;多线程编程与Java非常相似&#xff0c;因为Groovy运行在Java虚拟机&#xff08;JVM&#xff09;上&#xff0c;并且可以利用Java的所有并发工具。以下是一些在Groovy中实现多线程编程的方法&#xff1a; class MyThread extends Thread {Overridevoid…...

SOME/IP 协议详解——序列化

文章目录 0. 概述1.基本数据序列化2.字符串序列化2.1 字符串通用规则2.2 固定长度字符串规则2.3 动态长度字符串规则 3.结构体序列化4. 带有标识符和可选成员的结构化数据类型5. 数组5.1 固定长度数组5.2 动态长度数组5.3 Enumeration&#xff08;枚举&#xff09;5.4 Bitfield…...

三、GIT与Github推送(上传)和克隆(下载)

GIT与Github推送&#xff08;上传&#xff09;和克隆&#xff08;下载&#xff09; 一、配置好SSH二、在Github创建仓库三、git克隆&#xff08;下载&#xff09;文件四、git推送&#xff08;上传&#xff09;文件到远程仓库 一、配置好SSH Git与Github上传和下载时需要使用到…...

18.2、网络安全评测技术与攻击

目录 网络安全测评技术与工具网络安全测评质量管理和标准 网络安全测评技术与工具 漏洞扫描技术可以用于测评&#xff0c;测评你安不安全&#xff0c;也可以用来风险评估安不安全&#xff0c;风险大不大 漏洞扫描包含网络安全漏洞扫描、主机安全漏洞扫描&#xff0c;还有数据…...

在 ArcGIS Pro/GeoScene Pro 中设计专题地图的符号系统

原始 按颜色对面进行符号化 打开符号系统 选择主符号系统 选择字段及其计算方式 更改临界值</...

CSS2笔记

一、CSS基础 1.CSS简介 2.CSS的编写位置 2.1 行内样式 2.2 内部样式 2.3 外部样式 3.样式表的优先级 4.CSS语法规范 5.CSS代码风格 二、CSS选择器 1.CSS基本选择器 通配选择器元素选择器类选择器id选择器 1.1 通配选择器 1.2 元素选择器 1.3 类选择器 1.4 ID选择器 1.5 基…...

移动端如何实现上拉加载

一、理解上拉加载的原理 上拉加载是一种在移动端很常见的交互方式&#xff0c;其原理是当用户在页面上向上滑动&#xff08;即滚动条接近底部&#xff09;时&#xff0c;触发一个加载更多数据的操作。这通常涉及到对滚动事件的监听以及判断滚动位置是否达到了触发加载的阈值。…...

【mysql】linux安装mysql客户端

参考文章&#xff1a; MySQL系列之如何在Linux只安装客户端 linux下安装mysql客户端client MySQL Community Downloads 查看linux版本方法&#xff1a; lsb_release -a cat /proc/version下载文件&#xff1a; rpm -ivh mysql-community-*可以删除错误的包&#xff1a; RP…...

向量化计算落地难?揭秘阿里/腾讯内部正在用的7个Java Vector API高危避坑场景

第一章&#xff1a;Java Vector API向量化计算落地的现实困境Java Vector API&#xff08;JEP 338、414、426、448&#xff09;虽在JDK 16起逐步成熟&#xff0c;但实际工程化部署仍面临多重结构性约束。其核心矛盾在于&#xff1a;API设计高度抽象&#xff0c;而底层硬件适配、…...

如何用MicroSIP实现远程办公通话?2024最新SIP协议设置指南

2024远程办公通话实战&#xff1a;MicroSIP高级配置与网络优化全攻略 远程办公已成为现代企业运营的标配&#xff0c;而稳定高效的语音通信系统则是团队协作的基石。作为一款轻量级开源SIP客户端&#xff0c;MicroSIP凭借其低延迟、高兼容性和零成本优势&#xff0c;正在成为中…...

Polars 2.0插件生态爆发(2024唯一官方认证清洗套件清单)

第一章&#xff1a;Polars 2.0插件生态爆发&#xff08;2024唯一官方认证清洗套件清单&#xff09; 随着 Polars 2.0 的正式发布&#xff0c;其插件系统完成重大重构&#xff0c;首次开放官方插件注册与签名认证机制。截至 2024 年第三季度&#xff0c;Polars 核心团队已通过 …...

Windows平台用CMake+VS2019编译NLopt的完整流程(附环境变量配置)

Windows平台用CMakeVS2019编译NLopt的完整流程&#xff08;附环境变量配置&#xff09; 在科学计算和优化算法开发领域&#xff0c;NLopt作为一个功能强大的开源库&#xff0c;提供了多种非线性优化算法的实现。对于Windows平台的C开发者而言&#xff0c;掌握从源码构建NLopt的…...

新手零基础入门:通过快马生成burpsuite超详细安装图解教程

作为一名网络安全新手&#xff0c;第一次接触BurpSuite时确实容易被各种专业术语和复杂的安装步骤吓到。今天我就用最直白的方式&#xff0c;手把手带你完成BurpSuite的安装&#xff0c;让你轻松迈出Web安全测试的第一步。 什么是BurpSuite&#xff1f;为什么需要它&#xff1…...

Python智能内存回收实战:3种GC策略对比+4个生产级调优参数配置(附压测数据)

第一章&#xff1a;Python智能体内存管理策略生产环境部署在高并发、长生命周期的Python智能体服务中&#xff0c;内存管理直接影响系统稳定性与响应延迟。默认的CPython引用计数循环垃圾回收&#xff08;GC&#xff09;机制在动态对象频繁创建销毁的场景下易引发内存抖动和不可…...

Win11Debloat开源工具:焕新Windows系统体验的极简优化指南

Win11Debloat开源工具&#xff1a;焕新Windows系统体验的极简优化指南 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter an…...

Conda环境回滚实战:当安装新包搞崩base环境时如何一键恢复

Conda环境回滚实战&#xff1a;当安装新包搞崩base环境时如何一键恢复 在Python开发中&#xff0c;conda作为包管理和环境管理的利器&#xff0c;几乎成为数据科学家的标配工具。但越是频繁使用conda&#xff0c;越容易遇到一个令人头疼的问题——在base环境中安装新包后&#…...

嵌入式开发者的效率利器:在VS Code里实时看到MISRA-C违规提示(含头文件路径配置避坑)

嵌入式开发实战&#xff1a;用VS Code打造MISRA-C实时检查工作流 每次保存代码后才发现MISRA-C违规有多痛苦&#xff1f;想象一下这样的场景&#xff1a;你正在编写一段关键的车载控制逻辑&#xff0c;反复调试后终于通过了编译&#xff0c;却在提交前的静态检查中被揪出二十多…...

ftools架构深度解析:Stata大数据处理的技术革命

ftools架构深度解析&#xff1a;Stata大数据处理的技术革命 【免费下载链接】ftools Fast Stata commands for large datasets 项目地址: https://gitcode.com/gh_mirrors/ft/ftools 在数据科学和经济学研究的实践中&#xff0c;Stata用户经常面临一个共同的挑战&#x…...