当前位置: 首页 > 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…...

终极指南:如何用res-downloader一键下载全网无水印资源

终极指南&#xff1a;如何用res-downloader一键下载全网无水印资源 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 你是否经常…...

ai赋能开发:让快马智能助手帮你诊断和优化openclaw ubuntu部署难题

最近在Ubuntu上部署OpenClaw项目时&#xff0c;遇到了不少头疼的问题。从依赖冲突到参数调优&#xff0c;每一步都可能踩坑。不过我发现&#xff0c;借助AI辅助开发工具&#xff0c;这些问题可以变得更可控。今天就来分享下如何构建一个AI工具箱来优化OpenClaw的部署和开发体验…...

Python高效开发技巧汇总

这是一篇关于Python开发的技术文章示例内容&#xff0c;可以替换为真实文章内容。...

CSS 滚动驱动动画:让页面动起来的新维度

CSS 滚动驱动动画&#xff1a;让页面动起来的新维度代码如诗&#xff0c;滚动如歌。让我们用滚动驱动动画的魔法&#xff0c;为用户带来沉浸式的浏览体验。什么是滚动驱动动画&#xff1f; 滚动驱动动画&#xff08;Scroll-driven Animations&#xff09;是 CSS 中一项革命性的…...

忍者像素绘卷多场景应用:微信小程序插图、游戏素材、社交配图一站式生成

忍者像素绘卷多场景应用&#xff1a;微信小程序插图、游戏素材、社交配图一站式生成 1. 像素艺术的新纪元 忍者像素绘卷是一款基于Z-Image-Turbo深度优化的图像生成工作站&#xff0c;它将传统像素艺术与现代AI技术完美结合。这款工具特别适合需要快速生成高质量像素风格图像…...

暗黑破坏神2重制版智能辅助:自动化流程与效率提升完全指南

暗黑破坏神2重制版智能辅助&#xff1a;自动化流程与效率提升完全指南 【免费下载链接】botty D2R Pixel Bot 项目地址: https://gitcode.com/gh_mirrors/bo/botty 在《暗黑破坏神2&#xff1a;重制版》的冒险旅程中&#xff0c;你是否曾因重复刷怪、繁琐的装备拾取而感…...

高效安全的网页资源提取方案:猫抓开源工具的技术实现与专业应用

高效安全的网页资源提取方案&#xff1a;猫抓开源工具的技术实现与专业应用 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 在数字化时代&#xff…...

投资分析太复杂?用TradingAgents-CN实现零代码智能分析的3个方案

投资分析太复杂&#xff1f;用TradingAgents-CN实现零代码智能分析的3个方案 【免费下载链接】TradingAgents-CN 基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版 项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN TradingAgents-CN作…...

别再为PyTorch GPU环境发愁了!手把手教你用Miniconda管理多版本CUDA(GTX1060实测)

深度学习环境配置实战&#xff1a;GTX1060显卡下的PyTorch GPU环境搭建指南 在深度学习领域&#xff0c;环境配置往往是新手面临的第一个挑战。特别是当您手头有一块GTX1060这样的经典显卡时&#xff0c;如何充分发挥其计算潜力&#xff0c;同时避免陷入版本兼容性问题的泥潭&…...

TP-Link Linux驱动开发面试全记录与实战技巧

1. TP-Link软件工程师面试全记录&#xff1a;Linux驱动开发方向作为一名在嵌入式Linux领域摸爬滚打多年的工程师&#xff0c;最近参加了TP-Link的软件工程师面试&#xff0c;岗位方向是Linux驱动开发。说实话&#xff0c;去之前我对TP-Link的认知还停留在"路由器方案商&qu…...