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

(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'
				          				}
				          			}
								}
							},
				        }
				    ]
				};

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值