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的数据格式一定是数组嵌套数组

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

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

相关文章

经验分享:构建知识库管理系统只需要这几步

导语&#xff1a; 在当今信息爆炸的时代&#xff0c;构建一个高效的知识库管理系统对于企业来说至关重要。一个好的知识库管理系统可以帮助企业集中管理和共享知识和信息&#xff0c;提高团队的协作效率和创新能力。本文将分享构建知识库管理系统的几个关键步骤&#xff0c;帮…

[Linux] MySQL数据库的备份与恢复

一、数据库备份的分类和备份策略 1.1 数据库备份的分类 1&#xff09;物理备份 物理备份&#xff1a;对数据库操作系统的物理文件&#xff08;如数据文件、日志文件等&#xff09;的备份。 物理备份方法&#xff1a; 冷备份(脱机备份) &#xff1a;是在关闭数据库的时候进…

3D视觉方案的优势

随着机器视觉在工业领域的应用逐渐深入&#xff0c;传统的 2D 视觉方案已经趋向成熟&#xff0c;应用局限性也已经显现出来。 2D 视觉方案易受照明条件影响&#xff0c;一致性和稳定性难以保证&#xff0c;且无法实现三维高精度测量和定位&#xff0c; 3D 视觉方案应运而生&…

第二百三十二回

文章目录 1. 概念介绍2. 实现方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了"自定义TimePicker组件"相关的内容&#xff0c;本章回中将继续介绍该组件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在上一章回…

奇富科技跻身国际AI学术顶级会议ICASSP 2024,AI智能感知能力迈入新纪元

近日&#xff0c;2024年IEEE声学、语音与信号处理国际会议ICASSP 2024&#xff08;2024 IEEE International Conference on Acoustics, Speech, and Signal Processing&#xff09;宣布录用奇富科技关于语音情感计算的最新研究成果论文“MS-SENet: Enhancing Speech Emotion Re…

vue中的路由

目录 一、路由基础 路由机制 1.声明路由对象数组 2.创建路由器实例对象 3.将路由器实例注册vue根实例 4.通过router-link标签访问组件 5.路由导航守卫 二、动态路由匹配 响应路由参数的变化/监听路由url地址栏参数变化&#xff1f; 一、路由基础 路由机制 通过路由加载组件…

11.map 容器

11、map 容器 简介&#xff1a; map 中所有元素都是 pairpair 中第一个元素为 key&#xff08;键值&#xff09;&#xff0c;起到索引作用&#xff0c;第二个元素为 value&#xff08;实值&#xff09;所有元素都会根据元素的键值自动排序 本质&#xff1a; map/multimap 属…

如何发送大型文件 ---- 分卷压缩

不知道各位小伙伴有没有这样的烦恼&#xff0c;发送很大很大的压缩包会受到限制&#xff0c;比如QQ邮箱需要付费来进行中转的扩容&#xff0c;下面我将会介绍一种分卷压缩的方法来传送较大的压缩包给对方 使用7-zip软件进行分卷压缩 如果有7-zip压缩软件直接跳过这一步 7-zi…

利用Milvus Cloud和LangChain构建机器人:一种引人入胜且通俗易懂的方法

一、引言 机器人已经深入我们的日常生活&#xff0c;从家庭服务到工业生产&#xff0c;再到医疗和运输等领域。然而&#xff0c;这些机器人往往需要复杂的算法和数据处理技术才能有效地执行任务。在这个过程中&#xff0c;人工智能&#xff08;AI&#xff09;和机器学习&#…

Spring Boot快速搭建一个简易商城项目【一展示商城首页篇】

前言&#xff1a;今天我来使用Spring Boot快速搭建一个简易商城项目以下是相关的思路流程&#xff0c;如果有更好的思路&#xff0c;欢迎大佬评论留言&#xff01;&#xff01;&#xff01; 一&#xff0c;实现思路&#xff1a; 创建 Spring Boot 项目&#xff1a; 使用 Spring…

一种用于解决子图同构问题的子图特定因子

判断两个图是否同构可以从两个方面考虑 当两个图的节点的个数不等时&#xff1a;显然&#xff0c;这两个图是不可能同构。当两个图的节点的个数相等时&#xff1a;此时&#xff0c;需根据邻接矩阵的特征值来进行区分。例&#xff1a;两个图的邻接矩阵分别为 A , A ′ ∈ R n …

Hikvision SPON IP网络对讲广播系统存在命令执行漏洞CVE-2023-6895 附POC软件

免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该文章仅供学习用途使用。 1. Hikvision SPON IP网络对讲广播系统简介 微信公众…

理解文件系统

一 什么是文件系统 文件系统是计算机操作系统中的一个核心组件&#xff0c;用于管理计算机中的文件和文件夹。它提供了一种组织和访问计算机存储设备上数据的方式。文件系统使用户能够创建、修改、删除和查找文件&#xff0c;以及组织文件和文件夹的层次结构。 ps: linux一共有…

全局代理的詳細使用指南(Windows、Mac、Android、iOS)

全局代理IP又稱全局IP代理&#xff0c;允許用戶通過一個代理伺服器來發送和接收互聯網上的資訊。這個代理伺服器會隱藏用戶的真實IP地址&#xff0c;並將其替換為代理伺服器的IP地址。 除了常見的提高網路安全保護和突破地理限制的功能外&#xff0c;全局代理IP還可以做到以下…

C语言例题6

1.以下程序运行后的输出结果是&#xff1a;17。 main() {int x15; while(x>10&&x<50) {x; if (x/3) {x ; break;} else continue;} printf("%d\n",x); } 首先&#xff0c;我们分析程序中的逻辑和操作。 初始化 x 为 15。进入 while 循环&…

【FPGA】高云FPGA之科学的FPGA开发流程

FPGA开发流程 开发流程1、设计定义2、设计输入3、分析和综合4、功能仿真5、布局布线6、时序仿真7、IO分配以及配置文件&#xff08;bit流文件&#xff09;的生成8、配置&#xff08;烧录&#xff09;FPGA9、在线调试 例子1、设计定义1.1 需求1.2 原理图1.3 真值表 2、设计输入2…

HTML 实操试题(一)

创建一个包含标题、段落和链接的基本HTML文档&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><ti…

Docker - 镜像 | 容器 | 数据卷 日常开发常用指令 + 演示(一文通关)

目录 Docker 开发常用指令汇总 辅助命令 docker version docker info docker --help 镜像命令 查看镜像信息 下载镜像 搜索镜像 删除镜像 容器命令 查看运行中的容器 运行容器 停止、启动、重启、暂停、恢复容器 杀死容器 删除容器 查看容器日志 进入容器内部…

软件测试/测试开发丨Pytest学习笔记

Pytest 格式要求 文件: 以 test_ 开头或以 _test 结尾类: 以 Test 开头方法/函数: 以 _test 开头测试类中不可以添加构造函数, 若添加构造函数将导致Pytest无法识别类下的测试方法 断言 与Unittest不同, 在Pytest中我们需要使用python自带的 assert 关键字进行断言 assert…