echarts制作多个纵轴的折线图

news2024/11/29 23:47:11

 代码

<script type="text/javascript">
$(function (){
		var myChart = echarts.init(document.getElementById('main'));
		option = {
			color: ["#9bbb59","#0B438B","#4141F1","#F81945","#4bacc6","#F89E19","#000000"],
			title: {
				//text: '多个纵轴的折线图'
			},
			tooltip: { //框浮层内容格式器  提示框组件
				trigger: 'axis',
				formatter: '{b}'+'<br>'+'{a0}:{c0}' + '<br>' + '{a1}:{c1}' + '<br>' + '{a2}:{c2}' + '<br>'+'{a3}:{c3}'+ '<br>'+'{a4}:{c4}' + '<br>'+'{a5}:{c5}' + '<br>'+'{a6}:{c6}'
			},
			legend: {
				x: 'right',
				data: ['纵轴一', '纵轴二', '纵轴三', '纵轴四','纵轴五','纵轴六','纵轴七'],
				textStyle: {
					color: "#fff",
					fontsize: 25
				}
			},
			grid: {
				left: '10%',
				right: '14%',
				bottom: '3%',
				containLabel: true
			},
			dataZoom: [{  //于区域缩放
				type: 'inside',
				start: 0,
				end: 100
			}, {
				start: 0,
				end: 10,
				handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
				handleSize: '80%',
				handleStyle: {
					color: '#fff',
					shadowBlur: 3,
					shadowColor: 'rgba(0, 0, 0, 0.6)',
					shadowOffsetX: 2,
					shadowOffsetY: 2
				}
			}],

			xAxis: {
				type: 'category',
				boundaryGap: true,
				data: [1,2,3,4,5,6],
				axisLabel: {
				      interval: 0
				    }
			},
			yAxis: [{
					boundaryGap: [0, '50%'],
					axisLine: {
						lineStyle: {
							color: '#9bbb59'
						}
					},
					type: 'value',
					name: '纵轴一',
					position: 'left',//Y轴在图的坐边
					offset: 120,//坐标轴移动120
					axisLabel: {
						formatter: function(value, index) {
							return value;
						},

						textStyle: {
							color: '#9bbb59'//Y轴的文字颜色
						}
					},
					splitLine: {
						show: false,
					},
				},
				{
					boundaryGap: [0, '50%'],
					axisLine: {
						lineStyle: {
							color: '#0B438B'
						}
					},
					splitLine: {
						show: false,
					},
					type: 'value',
					name: '纵轴二',
					position: 'left',
					offset: 60,//
					axisLabel: {
						formatter: function(value, index) {

							return value;
						}
					}
				},
				{
					boundaryGap: [0, '50%'],
					axisLine: {
						lineStyle: {
							color: '#4141F1'
						}
					},
					splitLine: {
						show: false,
					},
					type: 'value',
					name: '纵轴三',
					position: 'left',
					axisLabel: {
						formatter: function(value, index) {
							return value;
						}
					},
					axisTick: {
						inside: 'false',
						length: 10,
					}
				}, {
					boundaryGap: [0, '50%'],
					axisLine: {
						lineStyle: {
							color: '#F81945'
						}
					},
					splitLine: {
						show: false,
					},
					type: 'value',
					name: '纵轴四',
					//offset: 50, //坐标轴移动50
					position: 'right',
					axisLabel: {
						formatter: function(value, index) {

							return value;
						}
					},
					axisTick: {
						inside: 'false',
						length: 10,
					}
				},
				{
					boundaryGap: [0, '50%'],
					axisLine: {
						lineStyle: {
							color: '#4bacc6'
						}
					},
					splitLine: {
						show: false,
					},
					type: 'value',
					name: '纵轴五',
					offset: 60, //坐标轴移动50mm
					position: 'right',
					axisLabel: {
						formatter: function(value, index) {
							return value;
						}
					},
					axisTick: {
						inside: 'false',
						length: 10,
					}
				},
				{
					boundaryGap: [0, '50%'],
					axisLine: {
						lineStyle: {
							color: '#F89E19'
						}
					},
					splitLine: {
						show: false,
					},
					type: 'value',
					name: '纵轴六',
					offset: 120, //坐标轴移动50mm
					position: 'right',
					axisLabel: {
						formatter: function(value, index) {
							return value;
						}
					},
					axisTick: {
						inside: 'false',
						length: 10,
					}
				},
				{
					boundaryGap: [0, '50%'],
					axisLine: {
						lineStyle: {
							color: '#000000'
						}
					},
					splitLine: {
						show: false,
					},
					type: 'value',
					name: '纵轴七',
					offset: 180, //坐标轴移动50mm
					position: 'right',
					axisLabel: {
						formatter: function(value, index) {
							return value;
						}
					},
					axisTick: {
						inside: 'false',
						length: 10,
					}
				},
			],
			series: [{
					name: '纵轴一',
					type: 'line',
					data: [2,1,2,1,2,1],
					lineStyle: {
						color: "rgba(155, 187, 89, 1)"//折线颜色
					},
					yAxisIndex: 0,
				},
				{
					name: '纵轴二',
					type: 'line',
					data: [7,8,4,2,1,2],
					lineStyle: {
						color: "rgba(11, 67, 139, 1)"
					},
					yAxisIndex: 1,
				},
				{
					name: '纵轴三',
					type: 'line',
					data: [9,5,6,9,7,1],
					lineStyle: {
						color: "rgba(65, 65, 241, 1)"
					},
					yAxisIndex: 2,
				},
				{
					name: '纵轴四',
					type: 'line',
					data: [6,8,4,2,3,7],
					lineStyle: {
						color: "rgba(248, 25, 69, 1)"
					},
					yAxisIndex: 3,
				},
				{
					name: '纵轴五',
					type: 'line',
					data: [9,5,4,1,2,7],
					lineStyle: {
						color: "rgba(75, 172, 198, 1)"
					},
					yAxisIndex: 4,
				},
				{
					name: '纵轴六',
					type: 'line',
					data: [4,7,8,4,5,1],
					lineStyle: {
						color: "rgba(248, 158, 25, 1)"
					},
					yAxisIndex: 5,
				},
				{
					name: '纵轴七',
					type: 'line',
					data: [7,5,4,8,1,2],
					lineStyle: {
						color: "rgba(0, 0, 0, 1)"
					},
					yAxisIndex: 6,
				}
			]
		};
		myChart.setOption(option);
		window.onresize = myChart.resize;
	});
</script>
</head>
<body>
<div id="main" style="width: 100%;height: 340px; "></div>
</body>

怎么放置Y轴?

 折线图的颜色和右上方示例以及Y轴颜色的统一

1.折线颜色

2.Y轴颜色 

3.右上角示例颜色

 

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

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

相关文章

怎么把知识问答做成二维码?分享简单的二维码制作工具

现在无论是工厂的职工还是学校的学生&#xff0c;都会有各种各样的知识问答。传统的纸质知识问答&#xff0c;不仅浪费人力物力&#xff0c;还需要占用上班或是上学的时间来完成。为了方便大家使用&#xff0c;我们可以把知识问答做成二维码图片&#xff0c;随时随地手机扫一扫…

【代码随想录day20】二叉搜索树中的搜索

题目 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和一个整数值 val。 你需要在 BST 中找到节点值等于 val 的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则返回 null 。 示例 1: 思路 因为这里是二叉排序树&#xff0c;所以不用爆搜所有节点…

RTOS 低功耗设计原理及实现

RTOS 低功耗设计原理及实现 文章目录 RTOS 低功耗设计原理及实现&#x1f468;‍&#x1f3eb;前言&#x1f468;‍&#x1f52c;Tickless Idle Mode 的原理及实现&#x1f468;‍&#x1f680;Tickless Idle Mode 的软件设计原理&#x1f468;‍&#x1f4bb;Tickless Idle Mo…

超过443万人次观看|央媒聚焦全球吉商大会,实在智能携国产大模型TARS出席

据吉林新闻联播近期报道&#xff0c;第八届全球吉商大会、第二届吉林省校友人才促进吉林振兴发展大会在长春开幕。省委书记景俊海出席开幕式并讲话。省委副书记、省长胡玉亭主持开幕式。省政协主席朱国贤为“吉商突出贡献人物”颁奖。全国工商联副主席汪鸿雁致辞。开幕式全程进…

3.2.20:DTP与Datepicker实现日期的输入

【分享成果&#xff0c;随喜正能量】人生艰难自不必去回避&#xff0c;人生艰难说多了也是白说&#xff0c;为什么&#xff0c;解决不了问题&#xff0c;说了也还是那么难。。 我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高…

PostgreSQL——sql文件导入

Windows方式&#xff1a; 进入PostgreSQL安装目录的bin&#xff0c;进入cmd 执行命令&#xff1a; psql -d 数据库名 -h localhost -p 5432 -U 用户名 -f 文件目录 SQL Shell: 执行命令&#xff1a; \i 文件目录(Windows下要加引号和双斜线)

第五章 聚合函数与内置函数

第五章 聚合函数与内置函数 一、聚合函数1、常用聚合函数2、示例&#xff08;1&#xff09;count&#xff08;2&#xff09;sum&#xff08;3&#xff09;avg&#xff08;4&#xff09;max&#xff08;5&#xff09;min 二、内置函数1、日期函数&#xff08;1&#xff09;总览&…

【Java基础学习打卡18】运算符(上)

目录 前言一、运算符和表达式1.运算符2.表达式 二、算术运算符1.加法运算符2.减法运算符3.乘法运算符4.除法运算符5.取余运算符6.表达式类型自动提升 总结 前言 本文主要介绍运算符和表达式&#xff0c;及运算符中的算术运算符。在 Java 编程中&#xff0c;运算符起着非常重要…

Java获取调用当前方法的方法名和行数(亲测可行)

有时候一个方法被很多方法调用了&#xff0c;但是在调试应用程序的时候&#xff0c;需要知道是哪个方法调用它的&#xff0c;方便定位bug问题。否者&#xff0c;比较难以理清和解决一些bug问题。 适用&#xff1a;任何适用java语言编程的地方&#xff0c;java后端和android端。…

【BOOST程序库】时间日期库

基本概念这里不再浪费时间介绍了&#xff0c;这里给出时间日期库的常见使用方法&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #include <boost/version.hpp> #include <boost/config.hpp>//时间库&#xff1…

AI绘画 | 黄金时代的铠甲女王

我是赤辰。本栏目专程向大家分享由SD制作的令人惊叹的AI绘画作品。这些作品以高品质、纯净背景、完美形象和直爽风格脱颖而出。数字化时代的艺术创新&#xff0c;接下来让我们一同领略这些作品带来的视觉盛宴&#xff0c;让艺术点亮生活&#xff01; 参考提示词&#xff1a; 非…

mysql的日期类型的数据转换为年或者月类型的统计

SELECT CONCAT(YEAR(DATE), if (MONTH(DATE)<10,CONCAT(0,MONTH(DATE)),MONTH(DATE))) AS date , round(SUM(capacity),2) AS ca_dsoc FROM dianchi4 where date > 20211231 GROUP BY YEAR(DATE), MONTH(DATE) 月度的跨年处理就是第一个

教师综合评价系统ssm学生班级课程选课教务评教管理jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 基于Java的疫情社区人员流动管理系统springboot vue …

大数据时代个人信息安全保护小贴士

个人信息安全保护小贴士 1. 朋友圈“五不晒”2. 手机使用“四要”、“六不要”3. 电脑使用“七注意”4. 日常上网“七注意”5. 日常生活“五注意” 互联网就像公路&#xff0c;用户使用它&#xff0c;就会留下脚印。 每个人都在无时不刻的产生数据&#xff0c;在消费数据的同时…

error: /tmp/ccxy1wo0.o: multiple definition of ‘tgt_flow_thread_init‘

linux 项目使用Makefile 编译代码时&#xff0c;一直报错 从报错意思上看很明确&#xff0c;就是重复定义 tgt_flow_thread_init函数 但是我从全局搜索代码看根本不存在重复定义问题。 从网上看是说可能存在头文件有重复的定义或者头文件被重复的引用&#xff0c;但是我看了…

PM、PMZ、PDM、VPDM比例调压阀控制放大器

PMV、PDV、SPDB、VPDB比例溢流阀控制放大器 PM、PMZ、PDM、VPDM比例调压阀控制放大器 SE、SEH、PSR2、PSR3比例流量调节阀控制放大器 EDL、PSL、 PSV、PSLF、PSVF比例多路换向阀控制放大器 比例多路换向阀属于换向阀类。 它控制一个或同时操作的多个液压耗能器的运动方向和…

【C语言】9-三大结构之选择结构-3

1. 综合举例 1.1 例1 编写一个程序完成输入一个 1-7 中的数字,输出对应的是星期几 这里推荐使用 Visio 或者类似的软件来画一个流程图。在进行程序设计时,尤其是大型项目时,软件流程图可以帮助我们很好的分析程序的结构以及结构需求,跟着流程图来写程序可以让写出来的程序…

数据库触发器简介——插入数据的触发器

1.触发器 准备工作&#xff1a;日志表user_logs create table user_logs(id int(11) not null auto_increment,operation varchar(20) not null comment 操作类型, insert/update/delete,operate_time datetime not null comment 操作时间,operate_id int(11) not null commen…

TortoiseGit 入门指南17:使用子模块

如果你想在自己的代码仓库中嵌入其它仓库&#xff0c;这称为引入子模块&#xff08;Submodule&#xff09;。使用右键菜单TortoiseGit - Submodules Add 选项&#xff0c;弹出添加子模块对话框&#xff0c;可以将一个外部仓库嵌入到源代码树的专用子目录中。 Repository&#x…

Apache pulsar 技术系列-- 消息重推的几种方式

导语 Apache Pulsar 是一个多租户、高性能的服务间消息传输解决方案&#xff0c;支持多租户、低延时、读写分离、跨地域复制&#xff08;GEO replication&#xff09;、快速扩容、灵活容错等特性。在很多场景下&#xff0c;用户需要通过 MQ 实现消息的重新推送能力&#xff0c…