使用 ECharts 与 Vue 构建数据可视化组件

在前端开发中,数据可视化是非常重要的一部分。ECharts 作为一个功能强大且易于使用的开源数据可视化库,被广泛应用于各种图表展示需求中。而 Vue.js 是当下流行的前端框架之一,它的数据驱动和组件化开发模式让我们能轻松地将 ECharts 集成到 Vue 组件中。本篇博客将通过一个实际的代码示例,逐步解析如何将 ECharts 与 Vue 结合使用,构建可复用的数据可视化组件。

1. Vue 模板部分
<template><div ref="chart" id="chart-container" style="width: 100%; height: 400px;"></div>
</template>

在 Vue 组件的模板部分,我们定义了一个 div,它将作为 ECharts 的容器。ref="chart" 是 Vue 中的一个引用,用于在 JavaScript 中获取这个 DOM 元素,style 用于设置图表的宽高。

2. 脚本部分 - Props 定义
props: {source: {type: [Array, Object],required: true},tooltip: {type: Array,default: () => []},xName: {type: String,default: ''},yName: {type: String,default: ''},singleSelect: {type: Boolean,default: false},type: {type: String,required: true},RequestParameters: {type: Object,default: () => ({})}
},

props 是 Vue 组件用于接收父组件传递数据的属性。在这里我们定义了多个属性:

  • source: 必填,表示图表的数据源,可以是数组或对象。
  • tooltip: 用于显示自定义的提示信息,默认为空数组。
  • xNameyName: 分别为 X 轴和 Y 轴的名称。
  • singleSelect: 布尔值,控制图例是否为单选。
  • type: 图表的类型,如线图、柱状图等。
  • RequestParameters: 请求参数,用于一些特定的业务需求,默认为空对象。
3. datamounted 钩子
data() {return {chartInstance: null,};
},
mounted() {this.initChart(); // 初始化图表window.addEventListener('resize', this.handleResize); // 监听窗口大小变化
},
beforeDestroy() {window.removeEventListener('resize', this.handleResize);if (this.chartInstance) {this.chartInstance.dispose(); // 销毁图表实例}
}
  • data: Vue 组件的局部数据。在这里,我们定义了 chartInstance,用于存储 ECharts 实例。
  • mounted: Vue 的生命周期钩子函数,当组件挂载到 DOM 后会触发。我们在这里初始化图表并监听窗口大小变化,以便图表在窗口尺寸变化时能够自适应。
  • beforeDestroy: 在组件销毁前,我们移除窗口的 resize 事件监听器,并销毁 ECharts 实例,避免内存泄漏。
4. 图表的初始化和更新
methods: {handleResize() {if (this.chartInstance) {this.chartInstance.resize(); // 调用图表实例的 resize 方法}},initChart() {const chartDom = this.$refs.chart; // 通过 ref 获取 DOMif (chartDom) {this.chartInstance = echarts.init(chartDom); // 初始化 ECharts 实例this.updateChart(); // 更新图表} else {console.error("图表容器未找到");}},updateChart() {let option = {};switch (this.type) {case 'timeLine':option = this.getTimeLineDataTicks();break;// 省略其他 casedefault:console.warn(`不支持的图表类型: ${this.type}`);}if (option && this.chartInstance) {this.chartInstance.setOption(option); // 设置图表配置项}},
}
  • handleResize: 当窗口大小变化时,调用图表实例的 resize 方法让图表自适应。
  • initChart: 使用 this.$refs.chart 获取 DOM 元素,调用 echarts.init 方法来初始化 ECharts 实例。
  • updateChart: 根据 type 判断要渲染的图表类型,并调用对应的生成图表配置的方法,如 getTimeLineDataTicks。然后将生成的配置传入 chartInstance.setOption 方法,完成图表的渲染。
5. 图表配置的生成

接下来,我们来看一个具体的图表配置生成函数:

getTimeLineDataTicks() {const { source, xName, yName, singleSelect } = this;const xAxis = [];const legend = [];const series = [];this.source.forEach(item => {const date = new Date(item.name);item.name = date.toLocaleString(); if (!xAxis.includes(item.name)) xAxis.push(item.name);if (!legend.includes(item.group)) legend.push(item.group);});legend.forEach(group => {const seriesData = source.filter(item => item.group === group).map(item => item.value);series.push({name: group,type: 'line',data: seriesData,connectNulls: true,showSymbol: true,label: {show: true,position: 'top',formatter: '{c}',},});});return {tooltip: {trigger: 'axis',formatter(params) {let tooltip = `${xName} : ${params[0].name}<br/>`;params.forEach(param => {tooltip += `<span style="background-color:${param.color};"></span>`;tooltip += `${param.seriesName} : ${param.value}<br/>`;});return tooltip;}},legend: {data: legend,selectedMode: singleSelect ? 'single' : 'multiple',},xAxis: {type: 'category',name: xName,data: xAxis,boundaryGap: false,},yAxis: {type: 'value',name: yName,},series: series,};
}
  • getTimeLineDataTicks: 这个方法生成时间轴折线图的配置项。

    • 首先从 source 中提取 X 轴数据(xAxis)、图例数据(legend)和每个系列(series)的数据点。
    • 使用 ECharts 的配置格式,定义图表的 tooltiplegendxAxisyAxis,最后返回整个图表的配置对象。
  • tooltip: 鼠标悬停时显示的提示框,通过 formatter 方法自定义提示信息。

  • legend: 图例部分,用户可以根据图例显示或隐藏某些系列的数据。

  • xAxisyAxis: 定义 X 轴和 Y 轴的样式与数据。

  • series: 定义图表中的每个系列数据,这里是折线图。

6. 样式部分
<style scoped>
.chart {width: 100%;height: 400px;
}
</style>
  • 样式部分很简单,我们为 chart 容器设置了宽度和高度。
7. 完整的工作流程
  1. 组件被挂载到 DOM 上后,mounted 钩子被触发,调用 initChart 方法。
  2. initChart 方法中,通过 this.$refs.chart 获取图表的 DOM 容器,并使用 echarts.init 初始化 ECharts 实例。
  3. 根据传入的 type,在 updateChart 方法中调用不同的图表配置生成方法(如 getTimeLineDataTicks)。
  4. 生成的配置通过 chartInstance.setOption 方法应用到图表上,最终完成图表的渲染。
  5. 当窗口大小发生变化时,handleResize 会自动调整图表的尺寸。

总结

通过 Vue 和 ECharts 的结合,我们可以轻松实现一个高度可复用的图表组件。组件化的设计让我们可以将不同类型的图表封装在一起,并且根据传入的 type 动态渲染出不同的图表。无论是折线图、柱状图还是复杂的树状图,都能通过 ECharts 强大的图表配置系统轻松实现。

希望这篇博客能够帮助你更好地理解如何在 Vue 项目中集成 ECharts,并且为你今后的数据可视化项目提供一些思路和参考。

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

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

相关文章

python读写文件的三种做法

对于文件操作&#xff0c;python提供了3种做法&#xff1a;open(), os.open() 和with open()语句。 1. open()函数&#xff1a;一般用于更高级的文件读写操作&#xff0c;即人能读懂的用法&#xff0c;如果是写入数据&#xff0c;可用传入字符串。 用法&#xff1a;open(path…

RocketMQ(二)RocketMQ实战

文章目录 一、RocketMQ实战1.1 批量消息发送1.2 消息发送队列自选择1.3 事务消息1.4 SpringCloud集成RocketMQ 二、最佳实践2.1 生产者2.1.1 发送消息注意事项2.1.2 消息发送失败处理方式 2.2 消费者2.2.1 消费过程幂等2.2.2 消费打印日志 2.3 Broker 三、相关问题3.1 为什么要…

产品原型设计

&#x1f923;&#x1f923;目录&#x1f923;&#x1f923; 一、Axure原型设计&#xff08;Axure RP 9 &#xff09;1.1 软件下载安装1.2 产品原型展示1.3 产品原型下载1.4 视频课程推荐 二、磨刀原型设计2.1 软件下载安装2.2 产品原型展示2.3 产品原型下载2.4 视频课程推荐 什…

C++ 编译过程全解析:从源码到可执行文件的蜕变之旅

引言 C 作为一种广泛应用于系统开发、游戏编程、嵌入式系统等领域的高级编程语言&#xff0c;其代码需要经过编译才能转换为计算机可执行的机器语言。编译过程涵盖多个复杂阶段&#xff0c;每个阶段对最终生成的可执行文件的性能、稳定性及兼容性都有着深远影响。深入理解 C 编…

【漏洞复现】NetMizer 日志管理系统 hostdelay.php 前台RCE漏洞复现

免责声明 请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,作者不为此承担任何责任。工具来自网络,安全性自测,如有侵权请联系删除。本次测试仅供学习使用,如若非法他用,与平台和本文作…

hive-sql 连续登录五天的用户

with tmp as (select 梁牧泽 as uid, 2023-03-03 as dt union allselect 梁牧泽 as uid, 2023-03-04 as dt union allselect 梁牧泽 as uid, 2023-03-05 as dt union allselect 梁牧泽 as uid, 2023-03-07 as dt union allselect 梁牧泽 as uid, 2023-03-08 as dt union allsel…

【运维】部署MKDocs

部署MKDocs obsidian 记录笔记&#xff0c;通过 mkdocs 私有化部署。 1 使用MKDocs创建笔记 创建仓库&#xff0c;安装 Material for MkDocs 和 mkdocs-minify-plugin mkdir tmp cd tmp git initpip install mkdocs-material pip install mkdocs-minify-pluginmkdocs new .2 …

Linux的进程替换以及基础IO

进程替换 上一篇草率的讲完了进程地址空间的组成结构和之间的关系&#xff0c;那么我们接下来了解一下程序的替换。 首先&#xff0c;在进程部分我们提过了&#xff0c;其实文件可以在运行时变成进程&#xff0c;而我们使用的Linux软件其实也是一个进程&#xff0c;所以进一步…

C#编写的金鱼趣味小应用 - 开源研究系列文章

今天逛网&#xff0c;在GitHub中文网上发现一个源码&#xff0c;里面有这个金鱼小应用&#xff0c;于是就下载下来&#xff0c;根据自己的C#架构模板进行了更改&#xff0c;最终形成了这个例子。 1、 项目目录&#xff1b; 2、 源码介绍&#xff1b; 1) 初始化&#xff1b; 将样…

cloudns二级免费域名python更新ipv6 dns记录

没找到api&#xff0c;托管到cloudflare也不行。就只能写代码了&#xff08;只写了更新和添加单条ipv6记录&#xff09; 需要修改的地方 请求头的cookies填自己的 data里的zone填自己的 import requests from lxml import etree host#子域名 cookies填自己的 zone自己域名的 …

机器学习作业 | 泰坦尼克号生存的预测任务

泰坦尼克号生存的预测任务 学校作业&#xff0c;我来水一水 环境&#xff1a;pycharmanaconda虚拟环境 文章目录 泰坦尼克号生存的预测任务0.环境搭建参考&#xff1a;1 目的与要求2 任务背景3 任务简介4 模型介绍1.决策树&#xff08;Decision Tree&#xff09;2.朴素贝叶斯…

【pytorch】conda安装pytorch

Step 1 打开官网&#xff1a; https://pytorch.org/get-started/locally/ 进行选择对应版本&#xff1a; 复制图中命令执行。 Step 2 验证是否安装成功。 执行&#xff1a; import torch print(torch.cuda.is_available()) print(torch.cuda.device_count()) print(torch.…

项目开发实践——基于SpringBoot+Vue3实现的在线考试系统(四)

文章目录 一、管理员角色功能实现1、添加教师功能实现1.1 页面设计1.2 前端功能实现1.3 后端功能实现1.4 效果展示2、教师管理功能实现2.1 页面设计2.2 前端功能实现2.3 后端功能实现2.3.1 后端查询接口实现2.3.2 后端编辑接口实现2.3.3 后端删除接口实现2.4 效果展示二、代码下…

基于16QAM的载波同步和定时同步性能仿真,采用四倍采样,包括Costas环和gardner环

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下&#xff08;完整代码运行后无水印&#xff09;&#xff1a; 仿真操作步骤可参考程序配套的操作视频。 2.算法涉及理论知识概要 载波同步是…

新服务器ubuntu系统相关操作

1、查看驱动:驱动版本535.216.01能够支持cuda12.2,下面直接使用默认安装的cuda。 2、赋予用户管理员权限。 首先有超级用户(root)权限来编辑 /etc/sudoers 文件,visudo 是一个命令,用于安全地编辑 /etc/sudoers 文件。运行: sudo visudo 在 visudo 编辑器中,找到类似…

2、Bert论文笔记

Bert论文 1、解决的问题2、预训练微调2.1预训练微调概念2.2深度双向2.3基于特征和微调&#xff08;预训练下游策略&#xff09; 3、模型架构4、输入/输出1.输入&#xff1a;2.输出&#xff1a;3.Learned Embeddings(学习嵌入)1. **Token Embedding**2. **Position Embedding**3…

python 渗透开发工具之SQLMapApi Server不同IP服务启动方式处理 解决方案SqlMapApiServer外网不能访问的情况

目录 说在前面 什么是 SQLMapAPI 说明 sqlmapApi能干什么 sqlmapApi 服务安装相关 kali-sqlmap存放位置 正常启动sqlmap-api server SqlMapApi-Server 解决外网不能访问情况 说在前面 什么是sqlmap 这个在前面已经说过了&#xff0c;如果这个不知道&#xff0c;就可以…

操作系统论文导读(八):Schedulability analysis of sporadic tasks with multiple criticality specifications——具有多个

Schedulability analysis of sporadic tasks with multiple criticality specifications——具有多个关键性规范的零星任务的可调度性分析 目录 一、论文核心思想 二、基本定义 2.1 关键性指标 2.2 任务及相关参数定义 2.3 几个基础定义 三、可调度性分析 3.1 调度算法分…

技术速递|调用异步功能 - WinForms 在 .NET 9 中的未来发展

作者&#xff1a; Klaus Loeffelmann 排版&#xff1a;Alan Wang 随着 .NET 的不断发展&#xff0c;WinForms 开发者可用的工具也在不断进步&#xff0c;这使得开发更加高效且应用响应更迅速。在 .NET 9 中&#xff0c;我们很高兴引入了一系列新的异步 API&#xff0c;这些 API…

Docker-构建自己的Web-Linux系统-镜像webtop:ubuntu-kde

介绍 安装自己的linux-server,可以作为学习使用&#xff0c;web方式访问&#xff0c;基于ubuntu构建开源项目 https://github.com/linuxserver/docker-webtop安装 docker run -d -p 1336:3000 -e PASSWORD123456 --name webtop lscr.io/linuxserver/webtop:ubuntu-kde登录 …