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

Vue中优雅的使用Echarts的三种方式

一、原始方法直接使用

1、安装ECharts:

npm install echarts --save

2、创建一个Vue公共组件 EChart.vue:

<template><div :style="{width: '100%', height: '300px'}" ref="chart"></div>
</template><script>
import echarts from 'echarts'export default {name: 'EChart',props: {option: {type: Object,required: true}},data() {return {chartInstance: null}},watch: {option: {handler(newOption) {if (this.chartInstance) {this.chartInstance.setOption(newOption);}},deep: true}},mounted() {this.chartInstance = echarts.init(this.$refs.chart);this.chartInstance.setOption(this.option);},beforeDestroy() {if (this.chartInstance) {this.chartInstance.dispose();}}
}
</script>

3、使用EChart.vue组件

<template><div><e-chart :option="chartOption"></e-chart></div>
</template><script>
import EChart from './EChart.vue'export default {components: {EChart},data() {return {chartOption: {// ECharts 配置项}}}
}
</script>

这个例子中,EChart.vue组件通过props接收ECharts的配置项option,并在组件的mounted生命周期钩子中初始化ECharts实例,在watch中监控option的变化,并更新图表。在父组件中,你可以通过传递不同的chartOption来更新图表。

这样做的好处是,你可以在多个地方复用这个图表组件,并通过传递不同的配置来定制图表的显示。同时,组件内部处理了ECharts实例的创建和销毁,使得使用更加简洁和高效。

二、使用vue-echarts

vue-echarts (https://github.com/ecomfe/vue-echarts)是ECharts 的 Vue.js 组件,基于 ECharts v4.1.0+ 开发,依赖 Vue.js v2.2.6+,意思就是可以直接把echarts实例当中vue中的组件来使用,不用每次都获取dom、挂在dom,轻松使用echarts的所用功能。

npm install echarts vue-echart

main.js中引入

import ECharts from 'vue-echarts'
// 注册全局的组件
Vue.component('vChart', ECharts)

vue中使用,直接添加options 数据即可。

<template><div class="page"><el-card><!-- 柱状图+折线图 --><vChart class="chart3" :options="barOptions" /></el-card></div>
</template><script>
export default {data() {return {barOptions: {color: ["#5094FF", "#64DAAC", "#FAC84A"],grid: {top: "15%",bottom: "20%",right: "5%",left: "5%"},tooltip: {},legend: {data: ["合格数", "超标数", "合格率", "超标率"],top: "0"},xAxis: {type: "category",data: ["04-13", "04-14", "04-15", "04-16", "04-17", "04-18", "04-19"]},yAxis: {// name: '合格率(%)',// nameLocation: 'middle',type: "value"// nameTextStyle: {//   fontSize: '0.072917rem',//   color: '#999999'// }},series: [{name: "合格数",type: "bar",barWidth: "15%",barGap: "5%",data: [20, 232, 441, 654, 770, 530, 410]},{name: "超标数",type: "bar",barWidth: "15%",data: [120, 482, 791, 834, 590, 930, 710]},{name: "合格率",type: "line",data: [420, 332, 291, 654, 590, 330, 810]},{name: "超标率",type: "line",data: [120, 232, 391, 854, 590, 730, 410]}]}};}
};
</script>

三、使用v-charts

v-charts(https://v-charts.js.org/#/) 是基于vue2二次封装的图表组件库,功能没有echarts多 但也够用了,官网很详细,这里用一个官网例子说明问题

<template><ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>
</template><script>export default {data () {this.chartSettings = {showLine: ['下单用户']}return {chartData: {columns: ['日期', '访问用户', '下单用户', '下单率'],rows: [{ '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },{ '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },{ '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },{ '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },{ '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },{ '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }]}}}}
</script>

相关文章:

Vue中优雅的使用Echarts的三种方式

一、原始方法直接使用 1、安装ECharts&#xff1a; npm install echarts --save 2、创建一个Vue公共组件 EChart.vue&#xff1a; <template><div :style"{width: 100%, height: 300px}" ref"chart"></div> </template><scri…...

SpringBoot配置文件/日志

目录 一,SpringBoot配置文件 1,配置文件的格式: 2,properties 3,yml 1,properties与yml的转换 2,读取配置选哪个中的内容 3,单双引号的差异: 4,配置对象: 5,配置集合/配置map 6,yml的优缺点: 二,验证码: 学习目的: 实现样例: 接口定义: 代码总结: 三,日志: 1,概…...

微服务架构面试内容整理-SpringCloud Netflix‌与Spring Cloud Alibaba比较

Spring Cloud Netflix 和 Spring Cloud Alibaba 都是用于构建微服务架构的解决方案,但它们在设计理念、组件和使用场景上存在一些差异。以下是它们的比较: 1. 服务注册与发现 ● Spring Cloud Netflix:使用 Eureka 作为服务注册和发现的组件。Eureka 是基于 REST 的,适合服…...

JDBC魔法:连接MySQL数据库与数据操作的秘籍

文章目录 一. JDBC介绍二. 数据库驱动1.DriverManager2.Connection3.PreparedStatement4.ResultSet 三. JDBC连接MySQL1. 加载驱动2. 获得连接3. 关闭连接 四. JDBC实现数据新增五. JDBC实现数据删除 一. JDBC介绍 JDBC&#xff08;Java Database Connectivity&#xff09;是Ja…...

深入了解Scratch:引导初学者开启编程之旅

引言 在当今数字化时代&#xff0c;编程已不再是成年人的专利&#xff0c;而是一项逐渐向低年龄段普及的技能。Scratch作为一款面向儿童和青少年的图形化编程语言&#xff0c;以其简单易用且充满趣味性的特点&#xff0c;成为了许多初学者学习编程的首选工具。本文将深入探讨S…...

js复制内容到剪切板

复制内容到剪切板 最近预报一个需求需要点击按钮复制当前到行的内容到剪切板&#xff0c; 所以写了这个工具 export function copyText(text: string, prompt: string | null 已成功复制到剪切板!) {if (navigator.clipboard) {return navigator.clipboard.writeText(text).th…...

代码 RNN原理及手写复现

29、PyTorch RNN的原理及其手写复现_哔哩哔哩_bilibili 笔记连接: https://pan.baidu.com/s/1_Sm7ptEiJtTTq3vQWgOTNg?pwd2rei 提取码: 2rei import torch import torch.nn as nn bs,T2,3 # 批大小&#xff0c;输入序列长度 input_size,hidden_size 2,3 # 输入特征大小&a…...

企业官网的在线客服,如何提高效果?

企业官网的在线客服&#xff0c;如何提高效果&#xff1f; 作者&#xff1a;开源呼叫中心系统 FreeIPCC&#xff0c;github地址&#xff1a;https://github.com/lihaiya/freeipcc 提高企业官网在线客服的效果&#xff0c;是提升客户体验、增强客户满意度和忠诚度的关键。一个…...

「实战应用」如何可视化 DHTMLX Scheduler 中的资源工作量?

DHTMLX Scheduler是一个全面的 UI 组件&#xff0c;用于处理面向业务的 Web 应用程序中复杂的调度和任务管理需求。但是&#xff0c;某些场景可能需要自定义解决方案。例如&#xff0c;如果项目的资源&#xff08;即劳动力&#xff09;有限&#xff0c;则需要确保以更高的精度分…...

论文阅读《BEVFormer》

BEVFormer: Learning Bird’s-Eye-View Representation from Multi-Camera Images via Spatiotemporal Transformers 目录 摘要1 介绍2 相关工作2.1 基于Transformer的2D感知 摘要 3D视觉感知任务对于自动驾驶系统至关重要&#xff0c;包括基于多相机图像的3D检测和地图分割。…...

sql专题 之 sql的执行顺序

文章目录 sql的执行顺序sql语句的格式实际的执行顺序&#xff1a;虚拟表 vs 数据集虚拟表 结果集总结嵌套查询在sql查询中的执行顺序 前文我们了解了sql常用的语句&#xff0c;这次我们对于这些语句来个小思索 戳这里→ sql专题 之 常用命令 sql的执行顺序 SQL语句的执行顺序是…...

Vue3 -- 基于Vue3+TS+Vite项目【项目搭建及初始化】

兼容性注意: Vite 需要 Node.js 版本 18+ 或 20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。【摘抄自vite官网】 这里我用的node版本是 v18.20.2 创建项目: 创建项目我们可以使用npm、yarn、pnpm、bun …...

CTF-RE: TEA系列解密脚本

// // Created by A5rZ on 2024/10/26. //#ifndef WORK_TEA_H #define WORK_TEA_H#endif //WORK_TEA_H#include <cstdint> #include <cstdio>// 定义TEA加密算法的轮次&#xff0c;一般建议为32轮 #define TEA_ROUNDS 32 #define DELTA 0x9e3779b9// TEA加密函数 v…...

信号量和线程池

1.信号量 POSIX信号量&#xff0c;用与同步操作&#xff0c;达到无冲突的访问共享资源目的&#xff0c;POSIX信号量可以用于线程间同步 初始化信号量 #include <semaphore.h> int sem_init(sem_t *sem, int pshared, unsigned int value); sem&#xff1a;指向sem_t类…...

【人工智能】10分钟解读-深入浅出大语言模型(LLM)——从ChatGPT到未来AI的演进

文章目录 一、前言二、GPT模型的发展历程2.1 自然语言处理的局限2.2 机器学习的崛起2.3 深度学习的兴起2.3.1 神经网络的训练2.3.2 神经网络面临的挑战 2.4 Transformer的革命性突破2.4.1 Transformer的核心组成2.4.2 Transformer的优势 2.5 GPT模型的诞生与发展2.5.1 GPT的核心…...

「QT」几何数据类 之 QPointF 浮点型点类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…...

可能是全网第一个MySQL Workbench插件编写技巧

引言 应公司要求&#xff0c;数据库的敏感数据在写入到数据库中要进行加密&#xff0c;但是在测试环境查询数据的时候要手动解密&#xff0c;很不方便&#xff0c;有的时候数据比较多&#xff0c;解密比较麻烦。遂研究了一下如何通过 MySQL Workbench 的插件来实现查询数据一键…...

D62【python 接口自动化学习】- python基础之数据库

day62 SQL 基础 学习日期&#xff1a;20241108 学习目标&#xff1a;MySQL数据库-- 131 SQL基础和DDL 学习笔记&#xff1a; SQL的概述 SQL语言的分类 SQL的语法特征 DDL - 库管理 DDL - 表管理 总结 SQL是结构化查询语言&#xff0c;用于操作数据库&#xff0c;通用于绝大…...

探索美赛:从准备到挑战的详细指南

前言 美国大学生数学建模竞赛&#xff08;MCM/ICM&#xff09;&#xff0c;简称“美赛”&#xff0c;是全球规模最大的数学建模竞赛之一。它鼓励参赛者通过数学建模来解决现实世界中的复杂问题&#xff0c;广受世界各地大学生的欢迎。本文将详细介绍美赛的全过程&#xff0c;从…...

IP地址查询——IP归属地离线库

自从网络监管部门将现实IP地址列入监管条例&#xff0c;IP地址的离线库变成网络企业发展业务的不可或缺的一部分&#xff0c;那么IP地址离线库是什么&#xff0c;又能够给我们带来什么呢&#xff1f; 什么是IP地址离线库&#xff1f; IP地址离线库是IP地址服务商将通过各种合…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...