echarts坐标轴配置参数使用

echsrts坐标轴常用的配置参数简单使用:

  • 刻度线和标签对齐:
 xAxis: [{
      boundaryGap : true,
	  axisTick: {
       //类目轴中在 boundaryGap 为 true 的时候有效,可以保证刻度线和标签对齐
		alignWithLabel: true,
		}
	}],
  • 坐标轴设置成整数显示:
    ​ 在创建图表时,y轴数据默认是有小数点的,如果不显示小数,只显示整数可以设置minInterval属性的值为1保证坐标轴分割刻度显示成整数。
yAxis:{
    minInterval:1, //设置坐标轴分割显示成整数
}
  • 坐标轴的标签显示完整:
    ​ 如果坐标轴的名称过长,导致默认隔一个数据显示,可以通过以下方式使数据显示完整:(interval属性设置成0则表示强制显示所有标签,设置为1的话,隔一个标签显示一个标签,一次类推。但是如果设置为0的话,如果数据数据局再长点,它会直接不显示,还是解决不了问题,如果让数据倾斜显示,就可以显示完整。rotate表示倾斜显示,-是顺时针旋转多少度,+或者不写表示逆时针旋转多少度,默认为90)
xAxis:[
 axisLabel:{
      interval:0,
      rotate:45,  //表示逆时针旋转45度
     }   
]
  • 实现坐标轴的联动:
    ​ 设置轴上的 axisPointer.show(例如 xAxis.axisPointer.show)为 true,则显示此轴的 axisPointer。设置 tooltip.trigger 设置为 ‘axis’ 或者 tooltip.axisPointer.type 设置为 ‘cross’,则此时坐标系会自动选择显示哪个轴的 axisPointer,也可以使用 tooltip.axisPointer.axis 改变这种选择。注意,轴上如果设置了 axisPointer,会覆盖此设置。
//坐标轴指示器(axisPointer)的作用是指示坐标轴当前刻度的
axisPointer: {
       link: {
       //只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。
        xAxisIndex: [0, 1],
         }
     },
  • 设置坐标轴分割段数:
    ​ y 轴的分割段数默认为5,这是由于 yAxis 中的 splitNumber 决定的。坐标轴的分割段数,需要注意的是这个分割段数只是个预估值,最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
 yAxis:{
    splitNumber: 1//设置坐标轴分割显示成整数
}
  • 自动计算的坐标轴最小间隔大小:
    ​ 自动计算的坐标轴最小间隔大小
    ​ 注意:只在数值轴或时间轴中(type: ‘value’ 或 ‘time’)有效
 yAxis:{
    minInterval: 1,
}
  • 自动计算的坐标轴最大间隔大小
 yAxis:{
    maxInterval: 3600 * 24 * 1000,
}
  • 实现y轴与x轴联动:
 xAxis: {
           gridIndex:0,                          
           },             
yAxis:[          
        {     
         gridIndex:0,     
       },{
          gridIndex:1,
       }
    ],
series: [{
        xAxisIndex: 0,
        yAxisIndex: 1,
        },{
        xAxisIndex: 0,
        yAxisIndex: 0,    
        }]
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值