echarts实现1个X轴多个Y轴的图表

最新推荐文章于 2024-06-05 09:34:51 发布

华府名安小书童

最新推荐文章于 2024-06-05 09:34:51 发布

阅读量3k

点赞数

分类专栏： Echarts

本文链接：https://blog.csdn.net/qq649954944/article/details/115654021

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

记录一下，备查

先上代码：

<!DOCTYPE html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>ECharts</title>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height: 500px; width: 1366px"></div>
 
	<!-- ECharts单文件引入 -->
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js?_v_=1605253040269"></script>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts图表
		var myChart = echarts.init(document.getElementById('main'));
		var colors = [ '#5793f3', '#d14a61', '#675bba', '#c04aab',  '#a6c30f'];
				option = {
					color : colors,
		 
					tooltip : {
						trigger : 'axis'
					},
					grid : {
					    left : '160px',//这是左侧留白，配合坐标轴数量调整
						right : '240px'//这是右侧，同上
					},
					toolbox : {
						feature : {
							dataView : {
								show : false,
								readOnly : false
			  				},
							restore : {
								show : false
							},
							saveAsImage : {
								show : false
							}
						}
					},
					legend : {
						data : [ '设备新增数量', '产品新增数量', '厂商新增数量' , '注册用户新增数量' ,'XXXXXX']
					},
					xAxis : [ {
						type : 'category',
						axisTick : {
							alignWithLabel : true
						},
						data : [ '0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20']
					} ],
					yAxis : [ {
						type : 'value',
						name : '厂商新增数量',
						min : 0,//这是定义坐标轴的最小值
						max : 200,//这是定义坐标轴的最小值
						nameLocation : 'center',//这是定义坐标轴名字的位置
						nameGap :45,//这是定义坐标轴文字距离坐标轴的距离
						interval : 50,//这是定义坐标轴的分隔数
						position : 'left',//这是定义坐标轴的位置，在左边还是右边
						offset : 80,//这是定义坐标轴相对y轴初始位置的偏移量
						axisLine : {
							lineStyle : {
								color : colors[1]
							}
						},
						axisLabel : {
							formatter : '{value}'
						}
					} ,{
						type : 'value',
						name : '设备新增数量',
						min : 0,
						max : 11000,
						nameLocation : 'center',
						nameGap :45,
						interval : 2200,
						position : 'left',
						offset : 160,
						axisLine : {
							lineStyle : {
								color : colors[2]
							}
						},
						axisLabel : {
							formatter : '{value}'
						}
					}, {
						type : 'value',
						name : '产品新增数量',
						min : 0,
						max : 200,
						nameLocation : 'center',
						nameGap :45,
						interval : 50,
						position : 'right',
						offset : 0,
						axisLine : {
							lineStyle : {
								color : colors[0]
							}
						},
						axisLabel : {
							formatter : '{value}'
						}
					},  {
						type : 'value',
						name : '注册用户新增数量',
						min : 0,
						max : 90000,
						nameLocation : 'center',
						nameGap :45,
						interval : 18000,
						position : 'right',
						offset : 80,
						axisLine : {
							lineStyle : {
								color : colors[3]
							}
						},
						axisLabel : {
							formatter : '{value}'
						}
					} , {
						type : 'value',
						name : 'XXXXXX',
						min : 0,
						max : 1000000,
						nameLocation : 'center',
						nameGap :45,
						interval : 200000,
						position : 'right',
						offset : 160,
						axisLine : {
							lineStyle : {
								color : colors[4]
							}
						},
						axisLabel : {
							formatter : '{value}'
						}
					}],
					series : [
							{
								name : '设备新增数量',
								type : 'line',
								yAxisIndex : 0,
								data : [ 10000, 2000, 1065, 3620, 6530, 9510, 2000,
										3002, 3580, 5063, 1520, 9000 ]
							},
							{
								name : '产品新增数量',
								type : 'line',
								yAxisIndex : 1,
								data : [ 10, 50, 100, 32, 56, 87, 41, 25, 46, 96, 30,
										150 ]
							},
							{
								name : '厂商新增数量',
								type : 'line',
								yAxisIndex : 2,
								data : [ 12, 15, 26, 36, 25, 18, 16, 47, 58, 69, 93,
										150 ]
							} ,
							{
								name : '注册用户新增数量',
								type : 'line',
								yAxisIndex : 3,
								data : [ 30000, 5000, 50000, 13436, 25555, 18000,56416, 42227, 44658, 69002, 90013,
										15330 ]
							}  ,
							{
								name : 'XXXXXX',
								type : 'line',
								yAxisIndex : 4,
								data : [ 130000, 50100, 250000, 123436, 251555, 138000,56416, 482227, 144658, 569002, 290013,
										152230 ]
							}]
				};
		 
				// 为echarts对象加载数据 
				myChart.setOption(option);
	</script>
</body>

效果图：（效果图和实际有点偏差，实际是有Y轴的竖线的）

华府名安小书童

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
echarts实现1个X轴多个Y轴的图表

记录一下，备查先上代码：<!DOCTYPE html><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″><title>ECharts</title></head><body>  <div id="main" style="h
复制链接

扫一扫

专栏目录