简洁大方网站建设,火蝠电商,wordpress flat主题,开发和研发的区别文章目录 1、原因2、思路3、解决方法3.1、使用alignTicks解决3.2、结合min和max属性去配置interval属性1、首先固定两边的分隔的段数。2、结合min和max属性去配置interval。 1、原因
刻度在显示时#xff0c;分割段数不一样#xff0c;导致左右的刻度线不一致#xff0c;不… 文章目录 1、原因2、思路3、解决方法3.1、使用alignTicks解决3.2、结合min和max属性去配置interval属性1、首先固定两边的分隔的段数。2、结合min和max属性去配置interval。 1、原因
刻度在显示时分割段数不一样导致左右的刻度线不一致不能重合在一起。
2、思路
根据上面的原因去分析要想左右的刻度线一致分隔的段数是必须是一样的这样才能重合。
3、解决方法
3.1、使用alignTicks解决 从 v5.3.0 开始支持 在多个 y 轴为数值轴的时候可以开启该配置项自动对齐刻度。只对’value’和’log’类型的轴有效。
yAxis: [{type: value,name: 水量,alignTicks: true,axisLabel: {formatter: {value} ml}},{type: value,name: 温度,alignTicks: true,axisLabel: {formatter: {value} °C}}
],效果展示
3.2、结合min和max属性去配置interval属性
1、首先固定两边的分隔的段数。
分别求出左边Y轴和右边Y轴的最大值max和最小值min根据max和min之间的和去除以分隔的段数分别算出左边Y轴和右边Y轴的分隔间隔。
在ECharts中有两个很重要的属性 interval强制设置坐标轴分割间隔。 splitNumber坐标轴的分割段数需要注意的是这个分割段数只是个预估值最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
2、结合min和max属性去配置interval。
这是测试数据
let lData [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]let rData [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 92.0, 6.2]计算最大值和最小值
let lMax Number(Math.max(...lData))
let lMin Number(Math.min(...lData))
let rMax Number(Math.max(...rData))
let rMin Number(Math.min(...rData))最大值向上取整最小值向下取整让显示的数据为10的倍数或100的倍数整数显示。
lMax Math.ceil(lMax / 100) * 100
lMin Math.floor(lMin / 100) * 100
rMax Math.ceil(rMax / 10) * 10
rMin Math.floor(rMin / 10) * 10计算分隔间隔
let splitNumber 10
let lInterval lMax / splitNumber
let rInterval rMax / splitNumber配置yAxis
yAxis: [{type: value,name: 水量,splitNumber:splitNumber,min: lMin,max: lMax,interval: lInterval,axisLabel: {formatter: {value} ml}},{type: value,name: 温度,splitNumber:splitNumber,min: rMin,max: rMax,interval: rInterval,axisLabel: {formatter: {value} °C}}
],效果展示
