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

Vue Echarts 多折线图只有一条X轴(合并X轴数据并去重排序) - 附完整示例

 echarts:一个基于 JavaScript 的开源可视化图表库。

目录

效果

一、介绍

 1、官方文档:Apache ECharts

2、官方示例

二、准备工作

1、安装依赖包

 2、示例版本 

三、使用步骤

1、在单页面引入 ' echarts '

2、指定容器并设置容器宽高

3、数据处理(关键点)

四、完整示例

tips


效果

一、介绍

 1、官方文档:Apache ECharts

Apache EChartsApache ECharts,一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

2、官方示例

二、准备工作

1、安装依赖包

npm install echarts --save

 2、示例版本 

"echarts": "^5.4.2",

三、使用步骤

1、在单页面引入 ' echarts '

import * as echarts from "echarts";

注:上面的代码会引入 ECharts 中所有的图表和组件,如果你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。详见官方文档:在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts

2、指定容器并设置容器宽高

<template><div id="main"></div>
</template><script>import * as echarts from "echarts";export default {name: "mutiYAxis",data() {return {};},methods: {initChart() {let data = this.datalet chartDom = document.getElementById("main");let myChart = echarts.init(chartDom);let option;...详见完整示例   },},};
</script><style scoped>#main {width: 1000px;height: 500px;}
</style>

3、数据处理(关键点)

      let xAxisData = [];let series = [];let index = 1;let seriesNames = [];let seriesUnit = [];let yAxis = [];let timeData = [];data.sort(this.sortByLength);data.forEach((_series, i) => {let _yAxis = [];let arrEle = [];let nameUnit = '';_series.unit ? (nameUnit = '(' + _series.unit + ')') : (nameUnit = '');_series.dataList.forEach((item) => {let { value, time } = item;timeData.push(time);arrEle = [time, value];_yAxis.push(arrEle);});seriesNames.push(_series.seriesName);seriesUnit.push(_series.unit);if (yAxis.length < 2) {yAxis.push({name: _series.seriesName + nameUnit,nameTextStyle: {fontSize: 14,fontcolor: '#fff',fontWeight: 'bolder',},splitLine: {show: false},axisLabel: {formatter: '{value} ',},});}let _item = {name: _series.seriesName,type: 'line',smooth: true,showAllSymbol: false,symbol: 'emptyCircle',data: _yAxis,connectNulls: true,};if (index == 2) {_item.yAxisIndex = 1;}series.push(_item);index++;});xAxisData = this.sortByTime(timeData);

注:部分方法的完整版在完整示例展示

四、完整示例

<template><div class="multipleDiscounting"><div id="main"></div></div>
</template>
<script>
import * as echarts from "echarts";
export default {name: "multipleDiscounting",data() {return {dataArr: [{seriesName: "折现一",unit: '',dataList: [{value: 0,time: "2023-12-05 01:32:00"},{value: 0,time: "2023-12-05 02:06:50"},{value: 0,time: "2023-12-05 07:13:56"},{value: 11.5,time: "2023-12-05 07:56:06"},{value: 36.3,time: "2023-12-05 10:18:12"},{value: 51.8,time: "2023-12-05 12:34:49"},{value: 21.9,time: "2023-12-05 14:36:05"},{value: 24.2,time: "2023-12-05 15:40:00"},{value: 13.7,time: "2023-12-05 16:36:22"},{value: 0,time: "2023-12-05 17:14:31"},],},{seriesName: "折现二",unit: '',dataList: [{value: 0,time: "2023-12-05 00:28:16"},{value: 0,time: "2023-12-05 00:31:56"},{value: 0,time: "2023-12-05 02:10:56"},{value: 0,time: "2023-12-05 02:21:56"},{value: 0,time: "2023-12-05 06:50:22"},{value: 36.6,time: "2023-12-05 10:39:55"},{value: 34.1,time: "2023-12-05 10:50:55"},{value: 50.2,time: "2023-12-05 12:00:36"},{value: 25.9,time: "2023-12-05 14:36:05"},{value: 22.1,time: "2023-12-05 14:37:33"},{value: 24.9,time: "2023-12-05 15:50:10"},{value: 12.1,time: "2023-12-05 16:56:11"},{value: 9.3,time: "2023-12-05 17:15:59"}],},]};},mounted() {this.$nextTick(() => {this.initChart(this.dataArr);});},methods: {initChart(data) {let chartDom = document.getElementById("main");let myChart = echarts.init(chartDom);let option;let xAxisData = [];let series = [];let index = 1;let seriesNames = [];let seriesUnit = [];let yAxis = [];let timeData = [];data.sort(this.sortByLength);data.forEach((_series, i) => {let _yAxis = [];let arrEle = [];let nameUnit = '';_series.unit ? (nameUnit = '(' + _series.unit + ')') : (nameUnit = '');_series.dataList.forEach((item) => {let { value, time } = item;timeData.push(time);arrEle = [time, value];_yAxis.push(arrEle);});seriesNames.push(_series.seriesName);seriesUnit.push(_series.unit);if (yAxis.length < 2) {yAxis.push({name: _series.seriesName + nameUnit,nameTextStyle: {fontSize: 14,fontcolor: '#fff',fontWeight: 'bolder',},splitLine: {show: false},axisLabel: {formatter: '{value} ',},});}let _item = {name: _series.seriesName,type: 'line',smooth: true,showAllSymbol: false,symbol: 'emptyCircle',data: _yAxis,connectNulls: true,};if (index == 2) {_item.yAxisIndex = 1;}series.push(_item);index++;});xAxisData = this.sortByTime(timeData);option = {grid: {containLabel: true,},tooltip: {trigger: 'axis',borderRadius: 4,formatter: function (params) {let result = params[0].axisValueLabel;let unit = '';for (let i = 0; i < params.length; i++) {seriesUnit[i] ? (unit = seriesUnit[i]) : (unit = '');let param = params[i];result += '<br/>' + param.marker + param.seriesName + '  ' + param.value + unit;}return result;},},legend: {type: 'scroll',width: '90%',data: seriesNames,},calculable: true,xAxis: [{type: 'category',boundaryGap: false,data: xAxisData,},],yAxis,dataZoom: [{type: 'inside',},],series,};option && myChart.setOption(option);},// 根据 dataList.length 从大到小排序sortByLength(a, b) {return b.dataList.length - a.dataList.length;},// 根据 日期时间 去重 从小到大排序sortByTime(arr) {return [...new Set(arr)].map((item) => new Date(item)).sort((a, b) => a.getTime() - b.getTime()).map((time) => this.timeFormatConversion(time));},// 时间格式转换timeFormatConversion(chinaStandard) {let date = new Date(chinaStandard);let Y = date.getFullYear();let M = (date.getMonth() + 1).toString().padStart(2, '0');let D = date.getDate().toString().padStart(2, '0');let h = date.getHours().toString().padStart(2, '0');let m = date.getMinutes().toString().padStart(2, '0');let s = date.getSeconds().toString().padStart(2, '0');return `${Y}-${M}-${D} ${h}:${m}:${s}`;},},
};
</script><style lang="less" scoped>
#main {width: 1000px;height: 500px;
}
</style>

tips

1、X轴的数据一定要合并去重并排序

2、series的数据格式一定是数组嵌套数组

相关文章:

Vue Echarts 多折线图只有一条X轴(合并X轴数据并去重排序) - 附完整示例

echarts&#xff1a;一个基于 JavaScript 的开源可视化图表库。 目录 效果 一、介绍 1、官方文档&#xff1a;Apache ECharts 2、官方示例 二、准备工作 1、安装依赖包 2、示例版本 三、使用步骤 1、在单页面引入 echarts 2、指定容器并设置容器宽高 3、数据处理&am…...

WPF+Halcon 培训项目实战(6):目标匹配助手

文章目录 前言相关链接项目专栏模板匹配助手简单使用金字塔级别参数自动选择应用插入代码 总结 前言 为了更好地去学习WPFHalcon&#xff0c;我决定去报个班学一下。原因无非是想换个工作。相关的教学视频来源于下方的Up主的提供的教程。这里只做笔记分享&#xff0c;想要源码…...

Linux管理LVM逻辑卷

目录 一、LVM逻辑卷介绍 1. 概述 2. LVM基本术语 2.1 PV&#xff08;Physical Volume&#xff0c;物理卷&#xff09; 2.2 VG (Volume Group&#xff0c;卷组&#xff09; 2.3 LV (Logical Volume&#xff0c;逻辑卷&#xff09; 3. 常用的磁盘命令 4. 查看系统信息的命…...

vue如何实现局部刷新?

应用场景&#xff1a; 比如你要切换tap栏实现刷新下面form表单等&#xff0c;相当于刷新页面。 如何使用如下&#xff1a; <div v-if"isReloadData"> 比如你想刷新那个位置就把 v-if"isReloadData"写到那个标签上 </div> 在data中定义刷新标…...

C语言,指针链表详解解说及代码示例

C语言&#xff0c;指针链表详解解说及代码示例 指针链表是一种常用的数据结构&#xff0c;用于存储和组织数据。它由一系列节点组成&#xff0c;每个节点包含数据和一个指向下一个节点的指针。通过这种方式&#xff0c;可以动态地添加、删除和访问节点&#xff0c;实现灵活的数…...

6、LLaVA

简介 LLaVA官网 LLaVA使用Vicuna(LLaMA-2)作为LLM f ϕ ( ⋅ ) f_\phi() fϕ​(⋅)&#xff0c;使用预训练的CLIP图像编码器 ViT-L/14 g ( X v ) g(X_v) g(Xv​)。 输入图像 X v X_v Xv​&#xff0c;首先获取feature Z v g ( X v ) Z_vg(X_v) Zv​g(Xv​)。考虑到最后一…...

SpringMVC核心处理流程梳理

1、处理流程图展示 当我拿出这张图&#xff0c;阁下又该如何应对呢&#xff1f;执行流程是不是一目了然了。【记住一句话&#xff1a;所有的注解都只是一个标签或者标记&#xff0c;最终都是反射找到具体方法上面的注解标记&#xff0c;然后找到类、属性、方法扩展自己想要的功…...

go 语言程序设计第2章--程序结构

2.1 名称 如果一个实体在函数中声明&#xff0c;它只在函数局部有效。如果声明在函数外&#xff0c;它将对包里面所有源文件可见。 实体第一个字母的大小写决定其可见性是否跨包。如果名称以大写字母开头&#xff0c;它是导出的&#xff0c;意味着它对包外是可见和可访问的。包…...

JavaScript基础知识点总结:从零开始学习JavaScript(五)

如果大家感感兴趣也可以去看&#xff1a; &#x1f389;博客主页&#xff1a;阿猫的故乡 &#x1f389;系列专栏&#xff1a;JavaScript专题栏 &#x1f389;ajax专栏&#xff1a;ajax知识点 &#x1f389;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 学习…...

Intel FPGA 技术开放日

概要 时间&#xff1a;2023.11.14 全天 &#xff08; 9:00 - 16: 20&#xff09; 地点&#xff1a;北京望京. 凯悦酒店 主题内容&#xff1a;分享交流了Intel FPGA 产品技术优势和落地实践方案。 会议的议程 开场致词&#xff1a; FPGA业务&#xff0c;是几年前intel收购而…...

分享72个Python爬虫源码总有一个是你想要的

分享72个Python爬虫源码总有一个是你想要的 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1v2P4l5R6KT2Ul-oe2SF8cw?pwd6666 提取码&#xff1a;6666 项目名称 10 photo websites…...

Mybatis 动态 SQL - foreach

动态SQL的另一个常见需求是需要迭代一个集合&#xff0c;通常用于构建IN条件。例如&#xff1a; <select id"selectPostIn" resultType"domain.blog.Post">SELECT *FROM POST P<where><foreach item"item" index"index&quo…...

编程笔记 GOLANG基础 001 为什么要学习Go语言

编程笔记 GOLANG基础 001 为什么要学Go语言 一、推荐学习的计算机程序设计语言&#xff08;一&#xff09;、前端设计与编程&#xff1a;htmlcssjavascripttypescript&#xff08;二&#xff09;、C/C语言&#xff08;三&#xff09;、Go语言&#xff08;四&#xff09;、Pytho…...

OrientDB使用教程:全面了解图数据库

图数据库在当今数据处理领域中扮演着越来越重要的角色&#xff0c;而OrientDB作为一种多模型的数据库&#xff0c;具有图数据库、文档数据库和对象数据库的特性&#xff0c;为应对不同场景提供了灵活的解决方案。本教程将简要介绍OrientDB的使用&#xff0c;包括基本概念、安装…...

VMware安装笔记

1、首先准备安装文件 没有的小伙伴可以网上自行下载&#xff0c;或者给我留言&#xff0c;我发给你。 2、开始安装 2.1、双击运行exe安装文件&#xff0c;下一步 2.2、接受许可&#xff0c;下一步 2.3、选择安装路径 2.4、选择好安装路径后&#xff0c;继续下一步 2.5、取消勾…...

MIT线性代数笔记-第27讲-复数矩阵,快速傅里叶变换

目录 27.复数矩阵&#xff0c;快速傅里叶变换打赏 27.复数矩阵&#xff0c;快速傅里叶变换 对于实矩阵而言&#xff0c;特征值为复数时&#xff0c;特征向量一定为复向量&#xff0c;由此引入对复向量的学习 求模长及内积 假定一个复向量 z ⃗ [ z 1 z 2 ⋮ z n ] \vec{z} \…...

三维点通用排序

前言 NWAFU 2021阶段二 C 一、题目描述 题目描述 在三维笛卡尔坐标系中&#xff0c;可以用X,Y,Z三个坐标分量表示三维空间中的一个点。现有一系列用X,Y,Z表示的三维点&#xff0c;需要对其按指定的X、Y或Z分量进行升序或降序排序。请用C语言实现这一排序过程&#xff0c;程序…...

[架构之路-265]:目标系统 - 设计方法 - 软件工程 - 软件设计 - 如何做好详细设计

目录 一、详细设计概述 1.1 什么是详细设计 1.2 软件概要设计、软件架构、软件详细设计比较 二、软件详细设计说明书 2.1 概述 2.2 撰写步骤 2.3 主要内容 三、详细设计详解 3.1 引言 3.2 系统架构设计 3.3 模块设计 3.3.1 模块描述 3.3.2 模块间接口设计与UML图 …...

java设计模式学习之【模板方法模式】

文章目录 引言模板方法模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用游戏设计示例代码地址 引言 设想你正在准备一顿晚餐&#xff0c;无论你想做意大利面、披萨还是沙拉&#xff0c;制作过程中都有一些共同的步骤&#xff1a;准备原料、加工食物、摆盘。…...

篇章二 | Python 入门指南:深入理解基础数据类型

Python 是一门强大而易学的编程语言&#xff0c;而深刻理解其基础数据类型是掌握 Python 编程的重要一步。本入门指南将详细介绍 Python 中的基础数据类型&#xff0c;包括整数、浮点数、字符串、布尔值、列表、元组、字典和集合等&#xff0c;同时提供注意事项和与 C 语言的区…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

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

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

安卓基础(Java 和 Gradle 版本)

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...