多个DataV遍历生成

DataV是数据可视化工具 与Echart类似
相对Echart图标边框 装饰可选

官网DataV

在这里插入图片描述

安装

npm install @kjgl77/datav-vue3

main.ts

import DataVVue3 from '@kjgl77/datav-vue3'
app.use(DataVVue3)

多个DataV遍历生成

Vue3+vite+DataV为例:

在这里插入图片描述

<template><div w50rem h25rem flex="~ col" justify-center items-center bg-dark><!-- 使用 v-for 遍历 chartsData 数组 --><componentv-for="(chart, index) in chartsData":key="index":is="resolveComponent(chart.type)" :config="chart.config":style="chart.style"/><div pt5><button @click="addData">增加数据</button></div></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue';// 定义默认样式
const defaultChartStyle = {width: '25rem',height: '15rem',
};// 动态解析组件类型
const resolveComponent = (type: string) => {switch (type) {case 'bar':return 'dv-active-ring-chart'; // 假设这是 DataV 提供的组件名case 'line':return 'dv-capsule-chart';// 可以添加更多类型的组件解析default:console.warn(`未知的组件类型: ${type}`);return null;}
};// 数据源,包含各个图表组件的配置
const chartsData = reactive([{type: 'line', // 这里定义了组件类型config: {data: [{ name: '南阳', value: 167 },{ name: '周口', value: 123 },{ name: '漯河', value: 3 },{ name: '郑州', value: 75 },{ name: '西峡', value: 66 },],axisColor: '#ffffff'},style: defaultChartStyle,},{type: 'bar',config: {data: [{ name: '南阳', value: 167 },{ name: '周口', value: 123 },{ name: '漯河', value: 98 },{ name: '郑州', value: 75 },{ name: '西峡', value: 66 },],colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],unit: '万元',},style: defaultChartStyle,},// 可以添加更多图表配置对象
]);// 添加新数据到当前图表(可以根据需要调整)
const addData = () => {const chartIndex = 0; // 假设我们只向第一个图表添加数据if (chartsData[chartIndex]) {const newDataPoint = {name: '测试' + Math.floor(Math.random() * 100),value: Math.floor(Math.random() * 100)};if (chartsData[chartIndex].type === 'line') {newDataPoint.value = [newDataPoint.value, chartsData[chartIndex].config.data.length + 1];}chartsData[chartIndex].config.data.push(newDataPoint);}
};
</script><style scoped>
.chart-container {margin-bottom: 1rem;}
</style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小程序租赁系统的优势与应用探索

内容概要 小程序租赁系统&#xff0c;听起来很高大上&#xff0c;但实际上它比你想象的要实用得多&#xff01;设想一下&#xff0c;几乎所有的租赁需求都能通过手机轻松解决。这种系统的便捷性体现在让用户随时随地都能发起租赁请求&#xff0c;而不再受制于传统繁琐的手续。…

40.3 prometheus预聚合源码解读

本节重点介绍 : 预聚合原理总结源码解读 预聚合原理总结 prometheus把record记录当做和alert一样处理进行instant_query查询当前点&#xff0c;如果是alert则走报警的流程如果是record&#xff0c;那么将查询到的结果写入tsdb&#xff0c;新的metric_name使用配置中设置的re…

driftingblues2

修改网卡配置信息 首先kali终端运行以下命令查看靶机ip 这里我们发现并没有查到靶机的ip&#xff0c;这时我们重启靶机 打开靶机&#xff0c;按下e键&#xff0c;进入到如下界面 将ro替换为rw signie init/bin/bash 替换完毕后&#xff0c;按下Ctrl键X键&#xff0c;进入如下…

Redis 使用redisTemplate获取某个规则下的key的全量数据(示例Set结构)

如下是redis中存储的数据结构 我想取key以favorites:结尾的所有数据 Redis 的 SCAN 命令用于迭代数据库中的键&#xff0c;支持通过模式过滤结果。模式规则基于 Redis 的通配符匹配语法&#xff0c;类似于文件名匹配规则&#xff1a; *&#xff1a;匹配零个或多个字符。?&…

1月2日作业

工人管理系统 #include<myhead.h> #include<sqlite3.h> sqlite3 * creat_sqlite()//创建数据库并返回数据库句柄 {const char *p"./my.db";sqlite3 *ppDb;if(sqlite3_open(p,&ppDb)!SQLITE_OK)//调用数据库提供的第三方库函数{printf("打开数据…

职场常用Excel基础03-自定义排序

大家好&#xff0c;今天和大家一起分享一下excel中的自定义排序~ 通过排序&#xff0c;用户可以快速地对表格中的数据进行整理&#xff0c;以便更直观地观察趋势、查找特定信息或为后续的数据分析做准备。除了标准的升序和降序排序外&#xff0c;Excel还提供了强大的自定义排序…

批量读取pdf发票中二维码的信息

如下代码Java类&#xff1a; import com.alibaba.excel.EasyExcel; import com.alibaba.excel.ExcelWriter; import com.alibaba.excel.annotation.ExcelProperty; import com.alibaba.excel.write.builder.ExcelWriterBuilder; import com.alibaba.excel.write.metadata.Writ…

计算机网络-L2TP Over IPSec基础实验

一、概述 上次我们进行了标准L2TP的配置&#xff0c;但是在最后我们在进行业务流量访问时看到流量是没有进行加密的&#xff0c;这就导致可能得安全风险&#xff0c;所以这里其实可以退像GRE那样调用IPSec框架来进行加密保护。 拓扑 数据不加密 现在需要配置IPSec&#xff0c;然…

STLG_01_03_程序设计C语言 - 语法基础

C语言的语法基础是理解和使用C语言的关键。C语言的语法相对简洁&#xff0c;但功能强大。以下是C语言语法基础的主要内容&#xff1a; 一. 基本结构 1. 预处理指令&#xff1a;预处理指令以#开头&#xff0c;用于包含头文件、定义宏、条件编译等。 #include <stdio.h> …

C#控件开发4—仪表盘

目录 思路&#xff08;GDI绘图&#xff09;1.定义属性2.绘制图形3.最后生成&#xff08;自定义各种监控值显示&#xff09;End 如何让温度、湿度、压力等有量程的监控值如仪表盘&#xff08;DashBoard&#xff09;一样显示&#xff1f; 思路&#xff08;GDI绘图&#xff09; 定…

【内含代码】Spring Boot整合深度学习框架DJL

“ Deep Java Library是一个用于处理大规模数据处理和分析的强大工具包&#xff0c;它提供了丰富的数据结构和算法实现&#xff0c;支持高效的并行计算和分布式处理。Deep Java Library的设计目标是简化大规模数据处理任务的复杂性&#xff0c;提供高性能的计算能力&#xff0c…

ThinkPHP 8高效构建Web应用-第一个简单的MVC应用示例

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 我们先实现一…

数字化供应链创新解决方案在零售行业的应用研究——以开源AI智能名片S2B2C商城小程序为例

摘要&#xff1a; 在数字化转型的浪潮中&#xff0c;零售行业正经历着前所未有的变革。特别是在供应链管理方面&#xff0c;线上线下融合、数据孤岛、消费者需求多样化等问题日益凸显&#xff0c;对零售企业的运营效率与市场竞争力构成了严峻挑战。本文深入探讨了零售行业供应…

React基础知识学习

学习React前端框架是一个系统而深入的过程&#xff0c;以下是一份详细的学习指南&#xff1a; 一、React基础知识 React简介 React是一个用于构建用户界面的JavaScript库&#xff0c;由Facebook开发和维护。它强调组件化和声明式编程&#xff0c;使得构建复杂的用户界面变得更…

RabbitMQ - 4 ( 22000 字 RabbitMQ 入门级教程 )

一&#xff1a; RabbitMQ 高级特性 前面主要讲解了 RabbitMQ 的概念和应用。RabbitMQ 实现了 AMQP 0-9-1 规范&#xff0c;并在此基础上进行了多项扩展。在 RabbitMQ 官方网站中详细介绍了其特性&#xff0c;我们将其中一些重要且常用的特性挑选出来进行讲解。 1.1 消息确认 …

mac m2 安装 docker

文章目录 安装1.下载安装包2.在downloads中打开3.在启动台打开打开终端验证 修改国内镜像地址小结 安装 1.下载安装包 到官网下载适配的安装包&#xff1a;https://www.docker.com/products/docker-desktop/ 2.在downloads中打开 拖过去 3.在启动台打开 选择推荐设置 …

开发小技巧分享 01:JSON解析工具

1.百度词条 JSON&#xff08;JavaScript Object Notation&#xff0c;JavaScript对象表示法&#xff09;是基于ECMAScript的一个子集设计的&#xff0c;是一种开放标准的文件格式和数据交换格式&#xff0c;它易于人阅读和编写&#xff0c;同时也易于机器解析和生成。JSON独立于…

QT--------网络

实现思路 主机信息查询&#xff1a; 使用 QHostInfo 类可以查询主机名和 IP 地址信息。QNetworkInterface 类可以获取本地网络接口的信息&#xff0c;包括 IP 地址、子网掩码、广播地址等。 TCP 通信&#xff1a; 使用 QTcpServer 类实现 TCP 服务器端程序设计。使用 QTcpSock…

智能边缘计算×软硬件一体化:开启全场景效能革命新征程(企业开发者作品)

边缘智能技术快速迭代&#xff0c;并与行业深度融合。它正重塑产业格局&#xff0c;催生新产品、新体验&#xff0c;带动终端需求增长。为促进边缘智能技术的进步与发展&#xff0c;拓展开发者的思路与能力&#xff0c;挖掘边缘智能应用的创新与潜能&#xff0c;高通技术公司联…

C++ 设计模式:模板方法(Template Method)

链接&#xff1a;C 设计模式 链接&#xff1a;C 设计模式 - 策略模式 链接&#xff1a;C 设计模式 - 观察者模式 模板方法&#xff08;Template Method&#xff09;是一种行为设计模式&#xff0c;它定义了一个操作中的算法的骨架&#xff0c;而将一些步骤延迟到子类中。通过这…