首页 前端知识 echarts制作多个纵轴的折线图

echarts制作多个纵轴的折线图

2024-08-16 22:08:00 前端知识 前端哥 599 770 我要收藏

 代码

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

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15899.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!