Echarts中的折线图,多个Y轴集中在左侧(在Vue中使用多个Y轴的折线图)

简述:在 ECharts 中,创建一个带有多个 Y 轴的折线图,并且将这些 Y 轴都集中显示在图表的左侧,可以通过合理配置 yAxisseries 的属性来实现。简单记录



一. 函数代码

drawCarNumEcs() {
  // 初始化echarts图表,并绑定到id为"cfog_four"的DOM元素上
  var myChart = this.$echarts.init(document.getElementById("cfog_four"));
  
  // 定义颜色数组,用于设置图表中不同数据系列的颜色
  const colors = ["#e1c951", "#44cbb1", "#307ee2"];
  
  // 定义图表的配置选项
  var option = {
    // 设置图表的整体颜色方案
    color: colors,
    
    // 设置图表的标题,包含多个标题对象
    title: [
      {
        // text: "车辆存量数",             // 主标题文本(当前被注释掉)
        padding: [15, 0, 0, 40],          // 标题内边距:[上, 右, 下, 左]
        left: "left",                     // 标题水平对齐方式:靠左对齐
        itemGap: 20,                      // 主副标题之间的间距
        textStyle: {
          // 主标题文本样式
          color: "white",                 // 文字颜色:白色
          fontStyle: "normal",            // 字体风格:正常
          fontWeight: "bold",             // 字体粗细:粗体
          fontFamily: "宋体",             // 字体系列:宋体
          fontSize: 18,                   // 字体大小:18像素
        },
      },
      {
        // text: "辆",                     // 副标题文本(当前被注释掉)
        padding: [40, 0, 0, 90],           // 副标题内边距
        left: "left",                      // 副标题水平对齐方式:靠左对齐
        itemGap: 20,                       // 主副标题之间的间距
        textStyle: {
          // 副标题文本样式
          color: "silver",                 // 文字颜色:银色
          fontStyle: "normal",             // 字体风格:正常
          fontWeight: "bold",              // 字体粗细:粗体
          fontFamily: "宋体",              // 字体系列:宋体
          fontSize: 12,                    // 字体大小:12像素
        },
      },
      {
        // text: "4小时预测",              // 第二个标题文本(当前被注释掉)
        padding: [50, 60, 0, 0],          // 第二个标题内边距
        right: "right",                   // 第二个标题水平对齐方式:靠右对齐
        textStyle: {
          // 第二个标题文本样式
          color: "silver",                // 文字颜色:银色
          fontStyle: "normal",            // 字体风格:正常
          fontWeight: "normal",           // 字体粗细:正常
          fontFamily: "宋体",             // 字体系列:宋体
          fontSize: 14,                   // 字体大小:14像素
        },
      },
    ],
    
    // 设置图表的网格布局
    grid: {
      //表示acharts填充占比
      left: "20%",             // 网格左边缘距离容器左边缘的距离:20%
      // right: "3%",          // 网格右边缘距离容器右边缘的距离(当前被注释掉)
      // bottom: "3%",         // 网格下边缘距离容器下边缘的距离(当前被注释掉)
      top: "35%",              // 网格上边缘距离容器上边缘的距离:35%
      // containLabel: true,   // 防止标签溢出容器(当前被注释掉)
    },
    
    // 设置提示框配置
    tooltip: {
      trigger: "axis",            // 触发类型:坐标轴触发
    },
    
    // 设置图例
    legend: {
      right: "10%",                       // 图例右对齐,距离右边缘10%
      top: "10%",                         // 图例顶部对齐,距离顶部10%
      data: ["湿度", "气压", "风力"],      // 图例项
      textStyle: {
        color: "white",                   // 图例文字颜色:白色
      },
    },

    // 设置X轴
    xAxis: {
      type: "category",                    // 坐标轴类型:类目轴
      // 原始数据(当前被注释)
      // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], 
      data:
        this.hyData1.length > 1
          ? this.hyData1
          : [
              "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00",
              "22:00", "00:00", "02:00", "04:00", "06:00", "08:00",
            ],
      // 如果this.hyData1长度大于1,则使用this.hyData1作为数据,否则使用默认时间数据
    },
    
    // 设置Y轴(有三个Y轴)
    yAxis: [
      {
        type: "value",          // 坐标轴类型:数值轴
        name: "湿度",           // 坐标轴名称
        position: "left",       // 坐标轴位置:左侧
        // max: 1000,           // 坐标轴最大值(当前被注释掉)
        // min: 59,             // 坐标轴最小值(当前被注释掉)
        // interval: 8.2,      // 坐标轴刻度间隔(当前被注释掉)
        offset: 0,             // 坐标轴相对于默认位置的偏移:无偏移
        axisLine: {
          show: true,          // 是否显示坐标轴线
          lineStyle: {
            color: colors[0],  // 坐标轴线颜色:使用颜色数组的第一个颜色
          },
        },
        splitLine: {
          show: true,             // 是否显示分隔线
          lineStyle: {
            // color: "red",      // 分隔线颜色(当前被注释掉)
            // width: 4,          // 分隔线宽度(当前被注释掉)
            type: "dotted",       // 分隔线类型:点线
          },
        },
      },
      {
        type: "value",            // 坐标轴类型:数值轴
        name: "气压",             // 坐标轴名称
        // max: 1000,             // 坐标轴最大值(当前被注释掉)
        // min: 59,               // 坐标轴最小值(当前被注释掉)
        // interval: 8.2,         // 坐标轴刻度间隔(当前被注释掉)
        position: "left",         // 坐标轴位置:左侧
        offset: 60,               // 坐标轴相对于默认位置的偏移:60像素
        axisLine: {
          show: true,             // 是否显示坐标轴线
          lineStyle: {
            color: colors[1],     // 坐标轴线颜色:使用颜色数组的第二个颜色
          },
        },
        splitLine: {
          show: false,           // 是否显示分隔线:不显示
          lineStyle: {
            // color: "red",     // 分隔线颜色(当前被注释掉)
            // width: 4,         // 分隔线宽度(当前被注释掉)
            type: "dotted",      // 分隔线类型:点线
          },
        },
      },
      {
        type: "value",          // 坐标轴类型:数值轴
        name: "风力",           // 坐标轴名称
        // max: 1000,           // 坐标轴最大值(当前被注释掉)
        // min: 59,             // 坐标轴最小值(当前被注释掉)
        // interval: 8.2,       // 坐标轴刻度间隔(当前被注释掉)
        position: "left",       // 坐标轴位置:左侧
        offset: 120,            // 坐标轴相对于默认位置的偏移:120像素
        axisLine: {
          show: true,           // 是否显示坐标轴线
          lineStyle: {
            color: colors[2],   // 坐标轴线颜色:使用颜色数组的第三个颜色
          },
        },
        splitLine: {
          show: true,         // 是否显示网格线:不显示
          lineStyle: {
            // color: "red",   // 分隔线颜色(当前被注释掉)
            // width: 4,       // 分隔线宽度(当前被注释掉)
            type: "dotted",    // 分隔线类型:点线
          },
        },
      },
    ],
    
    // 设置数据系列
    series: [
      {
        name: "湿度",         // 系列名称
        type: "line",         // 图表类型:折线图
        data:
          this.hyData2.length > 1
            ? this.hyData2
            : [
                18, 18, 24, 28, 25, 19, 16, 28, 22, 17, 27, 17, 28, 14, 18,
                25, 19, 16, 26, 23, 27, 27,
              ],
        // 如果this.hyData2长度大于1,则使用this.hyData2作为数据,否则使用默认数据
        yAxisIndex: 0,         // 使用的Y轴索引:第一个Y轴
      },    
      {
        name: "气压",         // 系列名称
        type: "line",         // 图表类型:折线图
        data:
          this.peData2.length > 1
            ? this.peData2
            : [
                18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18,
                18, 18, 18, 18, 18, 18,
              ],
        // 如果this.peData2长度大于1,则使用this.peData2作为数据,否则使用默认数据
        yAxisIndex: 1,         // 使用的Y轴索引:第二个Y轴
      },
      {
        name: "风力",         // 系列名称
        type: "line",         // 图表类型:折线图
        data:
          this.wdData2.length > 1
            ? this.wdData2
            : [
                18, 25, 19, 16, 26, 23, 27, 27, 18, 28, 22, 17, 27, 17, 28,
                14, 8, 24, 28, 25, 19, 16,
              ],
        // 如果this.wdData2长度大于1,则使用this.wdData2作为数据,否则使用默认数据
        yAxisIndex: 2,        // 使用的Y轴索引:第三个Y轴
      },
    ],
  };
  
  // 使用配置项设置图表
  option && myChart.setOption(option);
  
  // 添加窗口大小改变事件监听器,在窗口大小变化时调整图表大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });

},},

二. 初始化渲染Echarts

// 组件挂载之后,才可以获取到元素
mounted() {

  // 在组件挂载后调用绘制函数
  this.drawCarNumEcs()();

  // 这里再添加窗口大小改变时的重绘监听器,防止报错
  window.addEventListener("resize", () => {
    if (document.querySelector(".acdt_Ecs")) {
      this.drawCarNumEcs()();
    }
  });

},},

三. 同样,使用的是全局注册,注意甄别

四. Echarts,更多操作

Echarts官网icon-default.png?t=N7T8https://echarts.apache.org/examples/zh/index.html#chart-type-line

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Selenium 中的 JUnit 注解

JUnit 是一个基于 Java 的开源框架,可帮助测试人员执行单元测试。JUnit 主要用于测试应用程序的每个单元或组件,例如类和方法。它有助于编写和运行可重复的自动化测试,以确保项目代码按预期运行。还可以使用 JUnit 执行 Selenium 自动化测试用…

Python 利用pandas处理CSV文件(DataFrame的基础用法)

前面介绍过通过Python标准库中的CSV模块处理CSV文件: Python 利用CSV模块处理数据 相比CSV模块,pandas的功能更加强大,本文将简单介绍如何通过pandas来处理CSV文件。 文章目录 一、pandas简介二、用法示例2.1 读取CSV文件2.1.1 read_csv参数…

Databricks 收购 Tabular 的意义:数据开放框架的胜利

Databricks 宣布收购 Tabular,这是一个由 Apache Iceberg 的原始创建者开发的数据平台,在数据分析行业引发了涟漪。此次收购凸显了开放框架在数据领域日益增长的重要性,预示着数据管理、分析和 AI/ML 计划领域的创新、协作和可访问性的新时代…

Prometheus+Grafana主机运行数据

目录 介绍 安装Node Exporter 配置Prometheus 验证配置 导入仪表盘 介绍 Prometheus是一款开源的监控和警报工具,而Node Exporter是Prometheus的一个官方插件,用于采集主机上的各种系统和硬件指标。 安装Node Exporter 下载最新版本的Node Export…

盲盒抽卡机小程序:抽卡机的多样化发展

近几年,盲盒卡牌出现在了大众的生活中,深受学生和年轻消费者的喜爱。卡牌是一种新的盲盒模式,玩家购买后随机获得卡牌,为了收集一整套卡牌,玩家会进行各种复购行为,卡牌逐渐成为了年轻人追捧的休闲方式&…

雨量监测站的重要性有哪些

在全球气候变化和极端天气事件频发的背景下,雨量监测站成为了我们理解降水模式、预测天气变化以及制定应对措施的重要工具。 雨量监测站是一种专门用于测量和记录降水量的设施。它们通过配备高精度的雨量传感器,能够实时监测降雨情况,并提供关…

​​​​​​​生物素化药物分子的特性

生物素化药物分子是指将生物素(维生素H,也称维生素B7或维生素B8)共价连接到药物分子上的过程。这种处理方式为药物分子带来了多种特性和优势,以下是对生物素化药物分子的详细解析: 一、生物素的基本特性 生物素是一种水…

碾压SOTA!最新视觉SLAM:渲染速度提升176倍,内存占用减少150%

视觉SLAM,一种结合了CV与机器人技术的先进方法。与激光SLAM相比,它成本低廉且信息量大,易于安装,拥有更优秀的场景识别能力,因此在自动驾驶等许多场景上都非常适用,是学术界与工业界共同关注的热门研究方向…

【运维】docker批量删除临时镜像(两种方式)

docker批量删除Tag<none>的临时镜像 在开发的时候&#xff0c;需要经常发布开发包&#xff0c;在使用docker build构建镜像的时候&#xff0c;同一个版本经常会使用相同tag&#xff0c;频繁打包一段时间后&#xff0c;本地会出现很多Tag<none>的临时镜像&#xff…

首届UTON区块链开发者计划大会在马来西亚圆满落幕

7月9日&#xff0c;首届UTON区块链开发者计划大会在马来西亚吉隆坡成功举办&#xff01; 来自全球顶尖的行业领袖、技术精英和众多区块链爱好者参与了此次盛会&#xff0c;也标志着UTON区块链生态进入了一个全新的发展阶段。 会上&#xff0c;UTON区块链创始人之一唐毅先生以“…

四道经典算法JAVA

1.爬楼地 爬20个台阶的爬法:f(19)f(18) 经典斐波拉契数列问题 public class demo4 {//爬楼梯问题public static void main(String[] args) {System.out.println(getSum(20));}public static int getSum(int n) {if (n 1)return 1;if (n 2)return 2;return getSum(n - 1) …

从零开始学习嵌入式----Linux系统命令集合与shell脚本

Shell是一门编程语言&#xff0c;作为学习shell的开始&#xff0c;需要事先搞明白&#xff1a;编程的目的是什么&#xff1f;什么是编程语言&#xff1f;什么是编程&#xff1f; shell本身就是一门解释型、弱类型、动态语言&#xff0c;与python相对应&#xff0c;Python属于解…

mysql查询语句执行流程

流程图 连接器&#xff1a;建立连接&#xff0c;管理连接、校验用户身份&#xff1b;查询缓存&#xff1a;查询语句如果命中查询缓存则直接返回&#xff0c;否则继续往下执行。MySQL 8.0 已删除该模块&#xff1b;解析 SQL&#xff0c;通过解析器对 SQL 查询语句进行词法分析、…

服务器提交记录有Merge branch消除

背景&#xff1a;在共同开发分支release上&#xff0c;你提交了commit&#xff0c;push到服务器上时&#xff0c;发现有人先比你push了&#xff0c;所以你得先pull&#xff0c; 后再push&#xff0c;然而pull后自动产生了一个Merge branch的一个commit&#xff0c;这个commit本…

linux watchdog 子系统

目录 一、watchdog 子系统二、关键数据结构2.1 watchdog_device2.2 watchdog_ops2.3 watchdog_info 三、重要流程3.1 watchdog 初始化3.2 watchdog 设备注册3.3 watchdog 设备文件操作函数3.4 watchdog 喂狗用户空间 watchdog&#xff08;busybox&#xff09;内核空间喂狗疑问 …

防火墙综合实验一

目录 实验要求 防火墙准备 IP地址分配 需求一 需求二 需求三 需求四 需求五 需求六 实验要求 1、DMZ区内的服务器&#xff0c;办公区仅能在办公时间内(9:00-18:00)可以访问&#xff0c;生产区的设备全天可以访问。 2、生产区不允许访问互联网&#xff0c;办公区和游客…

单向链表队列

实现单向链表队列的&#xff0c;创建&#xff0c;入队&#xff0c;出队&#xff0c;遍历&#xff0c;长度&#xff0c;销毁。 queue.h #ifndef __QUEUE_H__ #define __QUEUE_H__#include <stdio.h> #include <stdlib.h> #include <string.h> #define max 30…

图论---无向图中国邮路的实现

开始编程前分析设计思路和程序的整体的框架&#xff0c;以及作为数学问题的性质&#xff1a; 程序流程图&#xff1a; 数学原理&#xff1a; 本质上是找到一条欧拉回路&#xff0c;考虑图中的边权重、顶点的度数以及如何通过添加最少的额外边来构造欧拉回路&#xff0c;涉及到欧…

PLC数采网关在实际应用中有哪些效能?天拓四方

在工业自动化领域中&#xff0c;PLC扮演着至关重要的角色&#xff0c;它负责控制和监测生产线的各个环节。然而&#xff0c;随着工业4.0的推进和智能制造的快速发展&#xff0c;单纯依靠PLC进行现场控制已无法满足企业对数据集中管理、远程监控和智能分析的需求。因此&#xff…

筑牢代码安全之盾 —— 沙箱在源代码防泄密中四大特性

在这个数字化飞速发展的时代&#xff0c;源代码作为企业的核心资产&#xff0c;其安全性显得尤为重要。一旦泄露&#xff0c;不仅可能导致知识产权的损失&#xff0c;还可能引发一系列连锁反应&#xff0c;威胁企业的生存和发展。在这样的背景下&#xff0c;SDC沙盒以其独特的产…