echarts学习: 绘制双y轴折线图

前言

我们公司项目中的折线图大都是双y轴的,因为这些图表往往需要同时展示水位和流量这两种不同单位的数据,因此如何绘制双y轴折线图就是就是我所面临的首要问题。

1.如何绘制双y轴

yAxis属性的值设置为一个数组,并在数组中添加两个axis对象,就能实现双y轴。

{{type: 'value',name: '水位(m)',axisLine: {show: true,symbol: ['none', 'arrow'],},},{type: 'value',name: '流量(m³/s)',axisLine: {show: true,symbol: ['none', 'arrow'],},},],
}

2.如何让serie选择对应的y轴

从上面的图中可以看到,虽然我们现在已经添加了两条y轴,但两个系列 “xxx水位”和“xxx流量”都还使用的是第一条y轴(水位)。我希望呈现的效果是“xxx水位”使用第一条y轴(水位),xxx流量”使用第二条y轴(流量)。

可以借助series的yAxisIndex属性来实现我想要的效果。

yAxisIndex属性值设置为0,则serie就使用第一条y轴;将yAxisIndex属性值设置为1,则serie就使用第二条y轴。

{series: [{name: 'xxx水位',type: 'line',yAxisIndex: 0,data: [120, 132, 101, 134, 90, 230, 210],},{name: 'xxx流量',type: 'line',yAxisIndex: 1,data: [220, 182, 191, 234, 290, 330, 310],},]
}

3.多y轴的可能性

当写到这里的时候,我突然萌生出了一个想法,如果给图表添加两个以上的y轴会怎么样呢?

不过这就就是另一篇文章中要讲的故事了。

想要了解给图表添加两个以上y轴的方法,可以浏览我文章在图表中添加多条y轴会怎么样?

参考资料

series-line.yAxisIndex - Apache ECharts

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

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

相关文章

【LC刷题】DAY02:977 209 59

#【LC刷题】DAY02:977 209 59 文章目录 977. 有序数组的平方 [link](https://leetcode.cn/problems/squares-of-a-sorted-array/description/)第一思路:直接排序优化:双指针 209. 长度最小的子数组 [link](https://leetcode.cn/problems/min…

Apache Spark MLlib详解

Apache Spark MLlib 是 Spark 的一个核心组件,提供了大量的机器学习算法和工具,用于在大数据集上进行数据分析和预测建模。MLlib 提供了广泛的算法集,包括分类、回归、聚类、协同过滤、降维、特征提取、频繁模式挖掘和统计测试等。 主要特点…

记录一次Linux启动kafka后并配置了本地服务连接远程kafka的地址后依旧连接localhost的问题

问题的原因 我是使用docker来安装并启动kafka 的,所以在启动过程中并没有太多需要配置的地方,基本都是从网上照搬照抄,没动什么脑子,所以看着启动起来了觉得就没事了,但是运行项目的时候发现,我明明已经配…

第五届上海市青少年算法竞赛网络同步赛(小学组)

第五届上海市青少年算法竞赛网络同步赛(小学组)T1. 符号译码_网络同步赛 内存限制: 256 Mb 时间限制: 1000 ms 题目描述 小爱为标点符号设计了一套编码系统,编码规则如下: [ 的编码为 010 ] 的编码为 101 < 的编码为 00 > 编码为 11 + 的编码为 011 - 编码为 100 根…

AI辅助论文:探索AI查重与AI降重技术

在科研领域&#xff0c;AI写作工具如同新一代的科研利器&#xff0c;它们能够极大提高文献查阅、思路整理和表达优化的效率&#xff0c;本质上促进了科研工作的进步。AI写作工具不仅快速获取并整理海量信息&#xff0c;还帮助我们精确提炼中心思想&#xff0c;显著提升论文写作…

生成式人工智能的风险与治理——以ChatGPT为例

文 | 西南政法大学经济法学院 马羽男 以ChatGPT为代表的生成式人工智能在创造社会福利的同时&#xff0c;也带来了诸多风险。因此&#xff0c;当务之急是结合我国生成式人工智能发展状况&#xff0c;厘清其应用价值与潜在风险之间的关系&#xff0c;以便在不影响应用发展的前提…

0606 作业

#include <stdio.h> #include <string.h>typedef struct usr{char unm[21];char pwd[21]; }user;int main(int argc, const char *argv[]) {FILE* userfilefopen("./user_tible.txt","r");printf("输入username:");user u;scanf(&qu…

人工智能在肿瘤预后预测中的最新研究进展|顶刊精析·24-06-07

小罗碎碎念 今天要分享的文献主题&#xff0c;大家一定非常熟悉&#xff0c;因为绝大多数AI4cancer的文章都会提到它——预后预测&#xff0c;所以今天的文献主题是——人工智能肿瘤预后预测。 在正式开始分享之前&#xff0c;我想先带着大家梳理两个问题。解决了以下两个问…

Chrome 自动执行 JS 脚本 | Tampermonkey 插件

文章目录 第 1 步:安装插件 Tampermonkey第 2 步:固定到工具栏第 3 步:在网站上启用 Tampermonkey第 4 步:查看效果第 5 步:调试 JS 代码😂 背景:有个网站,每次进去都要点 3 次才能把相关页面展开。而且,页面经常会自己刷新,导致展开的页面又收回去了。【这一天天的…

【Python】实现极致:克服PyInstaller打包挑战,解决libpython3.10.so.1.0库丢失难题

【Python】实现极致&#xff1a;克服PyInstaller打包挑战&#xff0c;解决libpython3.10.so.1.0库丢失难题 大家好 我是寸铁&#x1f44a; 总结了一篇【Python】实现极致&#xff1a;克服PyInstaller打包挑战&#xff0c;解决libpython3.10.so.1.0库丢失难题✨ 喜欢的小伙伴可以…

MFC设置窗口在Z轴上的位置

函数原型&#xff1a; BOOL CWnd::SetWindowPos(const CWnd* pWndInsertAfter, int x, int y, int cx, int cy, UINT nFlags);返回值&#xff1a; 如果函数成功&#xff0c;则返回非零值&#xff1b;否则返回0。 参数&#xff1a; pWndInsertAfter&#xff1a;标识了在Z轴次…

ai智能全自动批量剪辑软件神器,让视频创作变得简单!

随着科技的飞速发展&#xff0c;人工智能技术在各个领域都取得了突破。在视频制作领域&#xff0c;AI智能全自动批量剪辑软件神器的出现&#xff0c;为视频创作者带来了前所未有的便利。接下来咱们详细介绍这款软件的特点和优势&#xff0c;以及它如何让视频创作变得更加简单。…

【网络安全的神秘世界】Kali安装中文输入法

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 今天就手把手教你如何在kali中安装和配置输入法 首先&#xff0c;打开终端&#xff0c;输入下面这行代码&#xff1a; # sudo apt install ibus ibus-pi…

【机器学习】Python与深度学习的完美结合——深度学习在医学影像诊断中的惊人表现

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、引言二、深度学习在医学影像诊断中的突破1. 技术原理2. 实际应用3. 性能表现 三、深度学习在医学影像诊断中的惊人表现1. 提高疾病诊断准确率2. 辅助制定治疗方案 四、深度学习对医疗行业的影响和推动作用 一、引言 随着…

网络安全领域六大顶级会议介绍:含会议介绍、会议地址及会议时间和截稿日期

**引言&#xff1a;**从事网络安全工作&#xff0c;以下六个顶会必须要知道&#xff0c;很多安全的前沿技术都会在如下会议中产生与公开&#xff0c;如下会议发表论文大部分可以公开下载。这些会议不仅是学术研究人员展示最新研究成果的平台&#xff0c;也是行业专家进行面对面…

Flutter_Android上架GooglePlay_问题

上架GooglePlay权限问题 问题描述 REQUEST_INSTALL_PACKAGES 权限问题解决方式 方式1 找到所有使用该权限的库修改删除该权限引用 方式2 打开项目 ~/andoird/app/src/main/AndroidMainfest.xml 添加文本<uses-permission android:name"android.permission.REQUES…

2024.6.06总结1103

今天去导员那领了三方&#xff0c;当导员问我是哪个地区时&#xff0c;我回答是武汉&#xff0c;当她问我是哪个公司时&#xff0c;我回答是华为。导员一定&#xff0c;愣了一下&#xff0c;随即给我竖起了一个大拇指。 可能&#xff0c;她是很震惊吧&#xff0c;毕竟&#xff…

基于springboot的中小企业人事管理系统源码数据库

随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;中小企业人事管理系统当然也不能排除在外。中小企业人事管理系统是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方…

[洛谷] 刷题栈 队列

目录 1.后缀表达式 2.表达式括号匹配 3.表达式求值 4.表达式的转换 5.机器翻译 1.后缀表达式 后缀表达式 - 洛谷 #include<iostream> #include<cstdio> using namespace std;int stk[100]; // 用于存储操作数的栈 int index 0; // 栈顶索引int main() {c…

C++开发基础之初探CUDA计算环境搭建

一、前言 项目中有使用到CUDA计算的相关内容。但是在早期CUDA计算环境搭建的过程中&#xff0c;并不是非常顺利&#xff0c;编写此篇文章记录下。对于刚刚开始研究的你可能会有一定的帮助。 二、环境搭建 搭建 CUDA 计算环境涉及到几个关键步骤&#xff0c;包括安装适当的 C…