搜索
您的当前位置:首页正文

echarts折线图y轴显示多个数据

来源:步旅网

我们在使用echarts折线图的时候,有时候会出现需要两个y轴数据的情况,如下图

这种左右两边两种数据的怎么实现呢?

很简单,我们在里这样写:

yAxis: [
					{
							type: 'value',
							name: '数量',
							alignTicks:true,
						},
						{
							type: 'value',
							name: '百分比',
							offset:20,
							alignTicks:true,
							axisLine: {
								show: true,
								lineStyle: {
									color: "#fac858"
								}
							},
							axisLabel: {
								formatter: '{value}%'
							}
						}
				],

alignTicks是让两边的线对齐

可以设置position的值来设置数据的位置

series里可以这样写

        series: [{
						name: '1',
						type: 'line',
						stack: '1',
						data: data,
						yAxisIndex: 0,
					},
					{
						name: '2',
						type: 'line',
						stack: '2',
						data: data,
						yAxisIndex: 1,
					},
                  ]

yAxisIndex就是用来设置你的数据跟哪个对齐

因篇幅问题不能全部显示,请点此查看更多更全内容

Top