echarts折线图有两个图例时如何实现分别采用两个不同单位的y轴

WEB前端 waitig 1013℃ 百度已收录 0评论

(1)做法为在series中添加yAxisIndex: 1,这个就可以,默认为yAxisIndex: 0,

(2)下面贴出来完整的代码

option = {
				 	backgroundColor : 'rgba(43, 62, 75, 0.5)',//背景颜色
				 	title : {
						text : '引流实体',
						x : 'center',
						textStyle : {
							color : '#FFF'
						}
					},
					dataZoom: [//给x轴设置滚动条
					            {
					            	start:dataZoom_end,
					                end: 100,
					                type: 'slider',
					                show: true,
					                xAxisIndex: [0],
					                height: 15,//组件高度
					                showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
					            },
					            //下面这个属性是里面拖到
					            {
					                type: 'inside',
					                show: true,
					                xAxisIndex: [0],
					                start:dataZoom_end,
					                end: 100,
					            },
					        ],
					 tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
					            type : 'line'        // 默认为直线,可选为:'line' | 'shadow'
					        }
		             }, 
				    grid : {//间距距离左右下
						//top: '50',
						bottom: '45',
						left : '1%',
						right : '1%',
						containLabel : true
					},
					legend: {
				    	data:['掌上营业厅相关内容点击量','环比增幅'],
				        textStyle : {
							color : '#FFF',
							fontSize : 14
						},
						top:30
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            data : dates,
				            splitLine : {//去掉网格线
								show : false
							},
							axisLine : {//坐标轴轴线相关设置。
							    show : false,
								lineStyle : {
									color : '#FFF'
								}
							},
							axisTick : {//坐标轴刻度相关设置
								lineStyle : {
									color : '#FFF'
								}
							},
							axisLabel: {//x轴文字显示不全并将文字倾斜
								interval:0,
								rotate:40
							}
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            name : '点击量(次)',
				            axisLabel : {
				                formatter: '{value}'
				            },
				            /*splitLine : {//去掉网格线
								show : false
							},*/
							axisLine : {//坐标轴轴线相关设置。
								show : false,
								lineStyle : {
									color : '#FFF'
								}
							},
							axisTick : {//坐标轴刻度相关设置
								show : false,
								lineStyle : {
									color : '#FFF'
								}
							},
				        },
				        {
				            type : 'value',
				            name: '环比增幅(pp%)',
				            axisLabel : {
				                formatter: '{value}%'
				            },
				            splitLine : {//去掉网格线
								show : false
							},
							axisLine : {//坐标轴轴线相关设置。
								show : false,
								lineStyle : {
									color : '#FFF'
								}
							},
							axisTick : {//坐标轴刻度相关设置
								show : false,
								lineStyle : {
									color : '#FFF'
								}
							},
				        }
				    ],
				    series : [
				        {
				            name:'掌上营业厅相关内容点击量',
				            type:'bar',
				            data:values,
				            itemStyle : {
								normal : {
									color:'#ccecff',
									label : {
				          				textStyle : {
				          					fontSize : '15',//柱状上的显示的文字
				          					color:'#0fdc97'
				          				}
				          			}
								}
							},
				        },
				        {
				            name:'环比增幅',
				            type:'line',
				            yAxisIndex: 1,
				            data:val_float,
				            itemStyle : {
								normal : {
									color:'#fe9484',
									label : {
				          				textStyle : {
				          					fontSize : '15',//柱状上的显示的文字
				          					color:'#0fdc97'
				          				}
				          			}
								}
							},
				        }
				    ]
				};


本文由【waitig】发表在等英博客
本文固定链接:echarts折线图有两个图例时如何实现分别采用两个不同单位的y轴
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)