echarts制作多个纵轴的折线图

 代码

<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.右上角示例颜色

 

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

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

相关文章

PHP8知识详解:PHP的历史版本

PHP&#xff08;全称&#xff1a;Hypertext Preprocessor&#xff09;是一种广泛应用于web开发的脚本语言。它最初由Rasmus Lerdorf在1994年开发&#xff0c;并于1995年发布了第一个版本。以下是PHP的一些历史大版本及其介绍&#xff1a; PHP 1.0&#xff08;1995年&#xff09…

【安全狗】linux免费服务器防护软件安全狗详细安装教程

在费用有限的基础上&#xff0c;复杂密码云服务器基础防护常见端口替换安全软件&#xff0c;可以防护绝大多数攻击 第一步&#xff1a;下载服务器安全狗Linux版&#xff08;下文以64位版本为例&#xff09; 官方提供了两个下载方式&#xff0c;本文采用的是 方式2 wget安装 方…

如何在数据中台中提高效率并节省成本?

上节讨论了如何保障数据中台的数据质量&#xff0c;让数据“准”。除了“快”和“准”&#xff0c;数据中台还离不开“省”。随数据规模越来越大&#xff0c;成本越来越高&#xff0c;如不合理控制成本&#xff0c;还没等你挖掘出数据应用价值&#xff0c;企业利润就被消耗完。…

vant-ui,DatetimePicker时间选择器选择到秒

vant-ui的DatetimePicker 组件只能选择年月日时分&#xff0c;可能是组件维护者认为秒的选择用途不多&#xff0c;但是今天的需求中就是需要选择年月日时分秒所以就对DatetimePicker的组件封装成了可以选择年月日时分秒&#xff0c;直接上代码&#xff1a; 封装成组件&#xf…

共用体类型

共用体&#xff08;union&#xff09;是一种成员共享存储空间的结构体类型。 union 共用体类型名 {成员列表 } 共用体内存长度是所有成员内存长度的最大值。 #include <iostream> using namespace std;int main() {//先声明共用体类型再定义共用体对象 union A {int m,…

【stable diffusion】保姆级入门课程05-Stable diffusion(SD)图生图-涂鸦重绘的用法

1.什么是涂鸦重绘 涂鸦重绘又称手涂蒙版。 简单来说&#xff0c;局部重绘手涂蒙版 就是涂鸦局部重绘的结合体&#xff0c;这个功能的出现是为了解决用户不想改变整张图片的情况下&#xff0c;对多个元素进行修改。 功能支持&#xff1a; 1.支持蒙版功能 2.笔刷决定绘制的元素…

玩转回文:探索双下标法解谜,揭秘验证回文串的智慧攻略

本篇博客会讲解力扣“125. 验证回文串”的解题思路&#xff0c;这是题目链接。 验证回文串&#xff0c;我们最容易想到的思路就是&#xff0c;使用两个下标left和right&#xff0c;分别表示字符串的第一个字符和最后一个字符。接着&#xff0c;让两个下标不断向中间移动&#x…

怎样计算一个算法的复杂度?

分析一个算法主要看这个算法的执行需要多少机器资源。在各种机器资源中&#xff0c;时间和空间是两个最主要的方面。因此&#xff0c;在进行算法分析时&#xff0c;人们最关心的就是运行算法所要花费的时间和算法中使用的各种数据所占用的空间资源。算法所花费的时间通常称为时…

DataWhale AI夏令营——机器学习

DataWhale AI夏令营——机器学习 学习记录一1. 异常值分析2. 单变量箱线图可视化3. 特征重要性分析 学习记录2 (2023.07.27更新)1. 数据层面2. 特征工程3. 数据划分方式4. 后处理 学习记录一 锂电池电池生产参数调控及生产温度预测挑战赛 已配置环境&#xff0c;跑通baseline…

SpringCloud nacos 集成 gateway ,实现动态路由

&#x1f388; 作者&#xff1a;Linux猿 &#x1f388; 简介&#xff1a;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;Linux、C/C、云计算、物联网、面试、刷题、算法尽管咨询我&#xff0c;关注我&#xff0c;有问题私聊&#xff01; &…

数据库架构设计

数据库架构设计 数据库架构分类 介绍 介绍常见的 四种 数据库架构设计模型&#xff1a; 单库架构、分组架构、分片架构和分组分片架构 &#xff0c;以及每种架构的 使用场景、存在的问题和对应的解决方案 。 一、数据模型 我们以 “ 用户中心 ” 数据库作为 数据模型 &…

python与深度学习(八):CNN和fashion_mnist二

目录 1. 说明2. fashion_mnist的CNN模型测试2.1 导入相关库2.2 加载数据和模型2.3 设置保存图片的路径2.4 加载图片2.5 图片预处理2.6 对图片进行预测2.7 显示图片 3. 完整代码和显示结果4. 多张图片进行测试的完整代码以及结果 1. 说明 本篇文章是对上篇文章训练的模型进行测…

Spring(二):更简单的存储与读取 Bean

通过上一章的Spring&#xff0c;我们基本实现了Spring 的读取与存储&#xff0c;但是在操作过程中&#xff0c;读取与存储并没有那么得“简单” 一套流程还是很复杂&#xff0c;所以&#xff0c;本章来介绍更加简单得读取与存储。 在 Spring 中想要更简单的存储和读取对象的核…

Rust vs Go:常用语法对比(八)

题目来自 Golang vs. Rust: Which Programming Language To Choose in 2023?[1] 141. Iterate in sequence over two lists Iterate in sequence over the elements of the list items1 then items2. For each iteration print the element. 依次迭代两个列表 依次迭代列表项1…

【数据结构】实验四:循环链表

实验四 循环链表 一、实验目的与要求 1&#xff09;熟悉循环链表的类型定义和基本操作&#xff1b; 2&#xff09;灵活应用循环链表解决具体应用问题。 二、实验内容 题目一&#xff1a;有n个小孩围成一圈&#xff0c;给他们从1开始依次编号&#xff0c;从编号为1的小孩开…

【项目开发】商城 - 三级分类 - 简单笔记

目录标题 后端业务类实体类 前端最终实现效果排序变化批量删除 后端 业务类 // 省略其他简单的CRUDOverridepublic List<CategoryEntity> listWithTree() {// 1、查出所有分类List<CategoryEntity> list baseMapper.selectList(null);// 2. 找出所有的一级分类Li…

数据库监控工具-PIGOSS BSM

PIGOSS BSM 运维监控系统的重要功能之一是数据库监控&#xff0c;它能够帮助数据库管理员(DBA)和系统管理员监控包含Oracle、SQL Server、MySQL、DB2、PostgreSql、MongoDB、达梦、南大通用、人大金仓、神州通用等多种类异构型的数据库环境。PIGOSS BSM通过执行数据库查询来采集…

【Spring Cloud Alibaba】限流--Sentinel

文章目录 概述一、Sentinel 是啥&#xff1f;二、Sentinel 的生态环境三、Sentinel 核心概念3.1、资源3.2、规则 四、Sentinel 限流4.1、单机限流4.1.1、引入依赖4.1.2、定义限流规则4.1.3、定义限流资源4.1.4、运行结果 4.2、控制台限流4.2.1、客户端接入控制台4.2.2、引入依赖…

基于深度学习的CCPD车牌检测系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于CCPD数据集的高精度车牌检测系统可用于日常生活中检测与定位车牌目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的车牌目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检测模型训练数据集…

【Spring篇】初识 Spring IoC 与 DI

目录 一. Spring 是什么 ? 二. 何为 IoC ? 三. 如何理解 Spring IoC ? 四. IoC 与 DI 五 . 总结 一. Spring 是什么 ? 我们通常所说的 Spring 指的是 Spring Framework&#xff08;Spring 框架&#xff09;&#xff0c;它是⼀个开源框架&#xff0c;有着活跃⽽ 庞⼤…