多条y轴不重叠
yAxis: [{name:'温度',position: "left",type: 'value',min:0,boundaryGap: [0, '100%'],},{name:'湿度',position:'left',type: 'value',min:0,max:100,boundaryGap: [10, 10],offset:30,},{name:'风力',position:'right',type: 'value',min:0,max:12,},{name:'PM2.5质量',position:'right',type: 'value',offset:20,},{name:'人口密度',position:'right',type: 'value',splitNumber: 10, // Y 轴分隔格数splitLine: {// Y 轴分隔线样式show: true,lineStyle: {color: ["#f3f0f0"],width: 2,type: "solid"}},offset:40,},],
主要是offset 和position起作用。
y轴不显示刻度,serial的name和y轴name对应了无效果
错误:
数据没有跟刻度值对应起来,而且右边两个轴没有自适应显示出数值
正确:
解决办法:
在serial里加入yAxisIndex属性。
series: [{name: '温度', data: data.data1, type: 'line',yAxisIndex:0,},{name: '湿度', data: data.data2, type: 'line',yAxisIndex:1,},{name: '风力', yAxisIndex:2,data: data.data3, type: 'line'} ,{name: 'PM2.5质量', data: data.data4, type: 'line',yAxisIndex:3,},{name: '人口密度', data: data.data5, type: 'line',yAxisIndex:4,}]
除了初始的y轴,其他的顺序为从左到右数。
canvas过宽/右边重叠y轴显示不全
像上图一样 右边的刻度被截掉了
使用grid属性
,grid:{x2:85,x:55,}
调整后:
X轴数据太多增加滚动条
dataZoom: [{type: 'slider',show: true,xAxisIndex: [0],bottom: -5,start: 10,height:14,end: 90 //初始化滚动条}],
调节bottom值,调整其上下位置。