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

ps ： 这个color属性不写的话有默认颜色
总结：做这个多个纵轴的折线图，一开始是从百度上找，找到了一个有多个Y轴的例子，例子上的注释很少，也不熟悉echarts 就不是很好改，只能一边百度，一边摸索，进展很慢。忍无可忍打开了echarts的官网，找的文档，里面有一个echarts图的页面，可以选择区域，进去找相关的详细属性，挺方便的
官网-术语速查手册