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

news2025/4/16 13:17:32

 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.data
        let 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.coloradmin.cn/o/1339187.html

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

相关文章

Word中插入mathtype的行内公式显示不全,设置行距,最小值

Word中插入mathtype的行内公式显示不全 如下图&#xff1a;公式上下被遮住 解决方式&#xff1a; 设置所在段落的行距&#xff1a;最小值--xx磅。同时取消勾选 “如果定义了文档网格&#xff0c;则对齐到网格” 处理后效果&#xff1a;

电子科大软件架构设计——期末复习题集

文章目录 系统分析与设计概述面向对象建模语言系统规划系统需求分析系统架构设计软件建模详细设计与设计模式用户界面设计 系统分析与设计概述 1&#xff0e;下面哪个不是信息系统利益相关者?&#xff08;D) A&#xff0e;客户B&#xff0e;用户 C.开发人员D&#xff0e;监理…

免费SSL证书申请入口

免费SSL证书的优势 a. 低成本 免费SSL证书相对于其他类型的SSL证书来说&#xff0c;无需支付昂贵的费用。对于个人网站、小型企业或预算有限的组织而言&#xff0c;免费SSL证书是一种经济实惠的选择。 b. 提高搜索引擎排名 搜索引擎算法中&#xff0c;对于使用HTTPS协议的网…

Solana 生态铭文跨链桥 Sobit 是何神圣?其场外白名单已达到1200U

在短暂的沉寂&#xff0c;在与 Solana 手机 Saga 联合生态 Meme 币 Bonk 掀起一波 meme 浪潮&#xff0c;以及GPU 计算网路Render network 宣布将从公链Polygon迁往Solana 后&#xff0c;Solana 生态再次迎来爆发。随着 SOL 代币在 12 月暴涨&#xff0c;SOL 也在市值上超越了 …

性能测试-jemeter:安装 / 基础使用

一、理解jemeter 官网-Apache JMeter-Apache JMeter™ JMeter是一款开源的性能测试工具&#xff0c;主要用于模拟大量用户并发访问目标服务器&#xff0c;以评估服务器的性能和稳定性。 JMeter可以执行以下任务序号用途描述1性能测试通过模拟多个用户在同一时间对服务器进行…

python风格规范之missing whitespace after

python风格规范之missing whitespace after 规范错误/警告描述规范错误描述(示例)规范错误认知正确示例 规范错误/警告描述 PEP 8: E231 missing whitespace after [mark]规范错误描述(示例) 规范错误认知 上述规范错误表示"[mark]"后面没有添加空格 。错误示例如下…

第一届能源电子产业创新大赛太阳能光伏赛道在京顺利完成初赛评审

近日&#xff0c;第一届能源电子产业创新大赛太阳能光伏赛道初赛在北京顺利举行。本次太阳能光伏赛道赛事由工业和信息化部产业发展促进中心、宜宾市人民政府主办&#xff0c;宜宾市经济和信息化局、宜宾高新技术产业园区承办&#xff0c;中国国检测试控股集团股份有限公司协办…

C语言之字符串处理

目录 字符串长度 显示字符串 数字字符的出现次数 大小写字符转换 字符串数组的参数传递 非字符串的字符数组 目前我们所学习到的是围绕字符串的处理&#xff0c;仅仅是生成字符串、读取并显示字符串&#xff0c;下面我学习更加灵活处理字符串的方式。 字符串长度 我们来看…

MR实战:统计总分与平均分

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建成绩映射器类5、创建成绩驱动器类6、启…

单词搜索 II[困难]

一、题目 给定一个m x n二维字符网格board和一个单词&#xff08;字符串&#xff09;列表words&#xff0c; 返回所有二维网格上的单词。单词必须按照字母顺序&#xff0c;通过 相邻的单元格 内的字母构成&#xff0c;其中“相邻”单元格是那些水平相邻或垂直相邻的单元格。同…

面试官:并发和并行的区别

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一波电子书籍资料&#xff0c;包含《Effective Java中文版 第2版》《深入JAVA虚拟机》&#xff0c;《重构改善既有代码设计》&#xff0c;《MySQL高性能-第3版》&…

UDP协议工作原理及实战(二)UDP客户端代码实现

这个是一个测试我们写的函数是否正确。 启动服务&#xff1a;这里边的udpsocket->bind(port)就是对端口号进行连接。

Sectigo和Certum的IP证书区别

IP证书是比较特别的一款数字证书。大多数SSL数字证书都是针对域名站点的数字证书&#xff0c;比如单域名SSL证书、多域名SSL证书和通配符SSL证书&#xff0c;而IP证书针对的是只拥有公网IP地址的站点。签发IP证书的CA认证机构并不多&#xff0c;Sectigo和Certum旗下都有IP证书&…

【网络安全】深入理解web安全攻防策略

前言 互联网时代&#xff0c;数据安全与个人隐私信息等受到极大的威胁和挑战&#xff0c;本文将以几种常见的攻击以及防御方法展开分析。 1. XSS (跨站脚本攻击) 定义&#xff1a;通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或JavaScript进行的一种攻击…

前端简单动态圣诞树动画(HTML、js、css)

效果展示&#xff1a; 注释&#xff1a; 整体圣诞树分为3个部分&#xff0c;书的主干、粒子特效、树上的卡片树上的卡片(重点)&#xff1a;每一张卡片上都有一个名字&#xff0c;代表圣诞树的叶子&#xff0c;后面可以根据自己需求更改&#xff0c;比如全部改成喜欢人的名字&am…

最大公约和最小公倍数 C语言xdoj183

问题描述&#xff1a; 输入两个正整数 m 和 n&#xff0c;求其最大公约数和最小公倍数。 输入说明&#xff1a; 输入两个正整数 m 和 n。 输出说明&#xff1a; 输出 m 和 n 的最大公约数和最小公倍数。 输入样例&#xff1a; 8 12 输出样例&#xff1a; 4 24 #include <std…

【自然语言处理】第3部分:识别文本中的个人身份信息

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

linux系统 CentOS Tomcat 部署论坛

jdk安装命令&#xff1a;yum -y install java-1.8.0-openjdk-devel.x86_64 结尾上显示下图为成功 检查jdk环境是否配置成功命令&#xff1a;java -version或javac 显示版本 显示信息 mysql安装&#xff1a; 检查是否存mariadb数据库&#xff1a;rpm -qa | grep mariad 卸载ma…

基于JetCache整合实现一级、二级缓存方案(方案实现)

目录 一、整体方案说明 1.1 需求说明 1.2 整体方案实现组件结构图 二、Caffeine缓存实现 2.1 组件说明 2.2 组件结构图 2.3 组件Maven依赖 2.4 组件功能实现源码 2.4.1 CaffeineCacheManager扩展实现 2.4.2 CaffeineConfiguration配置类实现 2.4.3 涉及其他组件的类 …