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

vue使用v-chart的实践心得

开发Vue2和Vue3时,我们常常需要将数据以图表的形式展示给用户,而 V-Chart 作为一个轻量级且易于集成的图表库,是 Vue 开发的首选。这篇文章,我将写一下关于我在使用这方面的心得。

echarts官网:https://echarts.apache.org/examples/zh/index.html
v-chart:https://github.com/ecomfe/vue-echarts

-------------------------------------------------------- 后续,我会持续补充内容进来

安装与配置(vue3举例)

npm install vue-echarts echarts --save

安装完成后,在需要使用图表的组件中引入并注册 V-Chart 组件:效果实例

<script lang="ts" setup name="lineCharts">
const chartsLineOptionQPS = ref({title: {text: '折线图'},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct']},toolbox: {feature: {saveAsImage: {}}},grid: {left: '35px',right: '35px',bottom: '3%',containLabel: true},xAxis: [{type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}],yAxis: [{type: 'value'}],series: [{name: 'Email',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210],},{name: 'Union Ads',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',areaStyle: {},emphasis: {focus: 'series'},data: [320, 332, 301, 334, 390, 330, 320]}]
})
</script>

在模板中使用 v-chart 组件来渲染图表:

<template><v-chart :options="chartData"></v-chart>
</template>

使用技巧与实践

使用v-chart很方便使用,具体的图表配置如折线、饼图等,直接copy官网charts的配置数据就可以。但是也有些特殊的情况需要处理,如下:(后续,我会持续补充内容进来)

1、v-chart随屏幕自动调整图表大小:autoresize

echarts图表设置自适应,使用这个参数,我们就不需要自己监听屏幕resize变化了。

<v-chart :option="option" autoresize />
2、v-chart动态数据及时响应:notMerge:true

vue如何使用v-chart组件,没有及时更新数据。

<v-chart :option="option" autoresize :update-options="{notMerge:true}"/>

其他详见:https://github.com/ecomfe/vue-echarts

相关文章:

vue使用v-chart的实践心得

开发Vue2和Vue3时&#xff0c;我们常常需要将数据以图表的形式展示给用户&#xff0c;而 V-Chart 作为一个轻量级且易于集成的图表库&#xff0c;是 Vue 开发的首选。这篇文章&#xff0c;我将写一下关于我在使用这方面的心得。 echarts官网&#xff1a;https://echarts.apach…...

Endnote使用笔记——持续更新

&#xff08;1&#xff09;如果样式库里没有想要的期刊格式&#xff0c;可以到这个网址进行下载&#xff0c;并放在本地安装Endnote的文件下边的styles文件里&#xff1a; https://endnote.com/downloads/styles/ &#xff08;2&#xff09;EndNote导入参考文献时&#xff0c;关…...

Tetragon:一款基于eBPF的运行时环境安全监控工具

关于Tetragon Tetragon是一款基于eBPF的运行时环境安全监控工具&#xff0c;该工具可以帮助广大研究人员检测并应对安全重大事件&#xff0c;例如流程执行事件、系统调用活动、I/O活动&#xff08;包括网络和文件访问等&#xff09;。 在 Kubernetes 环境中使用时&#xff0c;…...

CAS单点登录(第7版)23.Webflow 管理

如有疑问&#xff0c;请看视频&#xff1a;CAS单点登录&#xff08;第7版&#xff09; Webflow 管理 概述 Webflow定制 CAS 使用 Spring Webflow 对登录和注销协议进行脚本处理。Spring Web Flow 构建在 Spring MVC 之上&#xff0c;并允许实现 Web 应用程序的“流”。流封装…...

word文档中标题的自动编号问题

最近研究了下标题自动编号&#xff0c;记录下来&#xff0c;以备后用。 &#xff08;1&#xff09;从编号1开始&#xff0c;如&#xff1a; 1 ------------------------ 标题1 1.1 ------------------- 标题2 1.1.1 ------------------- 标题3 1.1.1.1 ------------------- 标题…...

kkFileView二开之pdf转图片接口

kkFileView二开之Pdf转图片接口 kkFileView二开系列文章&#xff1a;1 kkFileView源码下载及编译2 Pdf转图片接口2.1 背景2.2 分析2.2 接口开发2.2.1 编写Pdf转图片方法2.2.2 编写转换接口 2.3 接口测试2.3.1 Pdf文件准备2.3.2 pdf2Image 3 部署 kkFileView二开系列文章&#x…...

利用亚马逊云科技RDS for SQL Server配置向量数据存储

生成式人工智能&#xff08;AI&#xff09;正迎来又一个快速发展期&#xff0c;引起了开发者们的广泛关注。将生成式能力集成到商业服务和解决方案中变得非常重要。当前的生成式AI解决方案是机器学习和深度学习模型逐步进化迭代的结果。从深度学习到生成式AI的质变飞跃主要是由…...

vLLM 部署 DeepSeek 大模型避坑指南

本文基于实战经验&#xff0c;提供从环境准备到性能调优的全流程避坑指南。 一、环境准备&#xff1a;驱动与硬件兼容性 1. NVIDIA 驱动与 CUDA 版本对齐 确保NVIDIA驱动和CUDA版本相互匹配是关键。例如&#xff0c;CUDA 12.x需要至少525.60的驱动版本。 # 使用 nvidia-smi…...

本地部署MindSearch(开源 AI 搜索引擎框架),然后上传到 hugging face的Spaces——L2G6

部署MindSearch到 hugging face Spaces上——L2G6 任务1 在 官方的MindSearch页面 复制Spaces应用到自己的Spaces下&#xff0c;Space 名称中需要包含 MindSearch 关键词&#xff0c;请在必要的步骤以及成功的对话测试结果当中 实现过程如下&#xff1a; 2.1 MindSearch 简…...

【大模型系列】Windows系统上运行大语言模型方式

在Windows系统上运行大语言模型&#xff08;LLMs&#xff09;有多种方式&#xff0c;以下是一些具体的方法&#xff1a; GPT4All 简介&#xff1a;GPT4All是一个适用于所有操作系统的LLM框架和聊天机器人应用程序&#xff0c;可以本地运行LLMs&#xff0c;并通过API将其与任何…...

Linux Mem -- Where the mte store and check in the real hardware platform

目录 1 前言 2 MTE tag分类 3 Address tag 4 Memory tag 5 Tag Check 6 Cortex-A710 和 CI-700 系统示例&#xff1a; 1 前言 ARM的MTE允许分配、设置、比较一个 4bit的allocation tag 为16字节粒度的物理地址。当对MTE有一定了解后&#xff0c;应该会产生如下疑问&#…...

连锁企业管理系统的五大核心功能

连锁管理系统对于连锁企业的运营和发展至关重要&#xff0c;以下以核货宝连锁管理系统为例&#xff0c;介绍其五大核心功能&#xff1a; 门店管理功能 门店信息管理&#xff1a;核货宝连锁管理系统可集中管理所有门店的详细信息&#xff0c;包括门店地址、联系方式、营业时间、…...

Docker配置镜像加速-解决黑马商城部署Mysql失败问题

随着 Docker 在容器化应用中的广泛应用&#xff0c;越来越多的开发者选择通过 Docker 来简化开发和部署过程。然而&#xff0c;在使用 Docker 部署应用时&#xff0c;有时会遇到因为镜像下载速度慢或者 MySQL 部署失败等问题&#xff0c;特别是在中国地区&#xff0c;由于网络环…...

Cherno C++ P54 内存:栈与堆

这篇文章我们来谈论一下计算机的内存。在这里&#xff0c;我们着重讨论内存的两个部分&#xff1a;栈与堆。我们需要注意的一点是&#xff0c;这两个概念不是虚拟的&#xff0c;而是在计算机内部真实存在的。它们是我们的CPU当中RAM部分物理上存在的两个区域。我们之所以要重点…...

对项目交接的一些思考

天下大势&#xff0c;分久必合合久必分。这些年交接了很多项目&#xff0c;也从别人那里接手了很多项目。最近又接收了一些项目&#xff0c;但团队接收的效果不是很好&#xff0c;或者说掌握的不全面&#xff0c;所以就在想怎么能够做的更好一些&#xff1f; 团队关系 其实我…...

【PYTORCH】官方的turoria实现中英文翻译

参考 https://pytorch.org/tutorials/intermediate/seq2seq_translation_tutorial.html 背景 pytorch官方的是seq2seq是法语到英文&#xff0c;做了一个中文到英文的。 数据集 下载后解压&#xff0c;使用的data\testsets\devset\UNv1.0.devset.zh和UNv1.0.devset.en&#x…...

【算法与数据结构】并查集详解+题目

目录 一&#xff0c;什么是并查集 二&#xff0c;并查集的结构 三&#xff0c;并查集的代码实现 1&#xff0c;并查集的大致结构和初始化 2&#xff0c;find操作 3&#xff0c;Union操作 4&#xff0c;优化 小结&#xff1a; 四&#xff0c;并查集的应用场景 省份…...

【动态路由】系统web url整合系列【springcloud-gateway实现】【不改hosts文件版】组件一:多个Eureka路由过滤器

需求 实现URL web资源整合&#xff0c;实现使用一个web地址访问多个web资源 方案 本方案使用SpringCloud Gateway实现&#xff0c;不需要在hosts文件加添加域名映射&#xff08;也不需要定义一系列域名&#xff09;&#xff0c;通过url路径来将请求转发到不同的Web资源 如&…...

Mybatis-扩展功能

逻辑删除乐观锁 MyBatisPlus从入门到精通-3&#xff08;含mp代码生成器&#xff09; Db静态工具类 Spring依赖循环问题 代码生成器 MybatisPlus代码生成器 枚举处理器 我们这里用int来存储状态 需要注解&#xff0c;很不灵活 希望用枚举类来代替这个Integer 这样的话我…...

基于SpringBoot实现的大学社团平台系统实现功能六

一、前言介绍&#xff1a; 1.1 项目摘要 随着高校社团活动的日益丰富和多样化&#xff0c;学生对于社团管理和参与的需求也在不断增加。传统的社团管理方式往往存在效率低下、信息不透明等问题&#xff0c;无法满足现代学生对于便捷、高效社团管理的需求。因此&#xff0c;利…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...