客户想着echarts自定义y轴刻度 y轴两边的0在一条直线上?这能做到吗

刻度在显示时分割段数不一样,导致左右的刻度线不一致不能重合在一起。

根据上面的原因去分析要想左右的刻度线一致,分隔的段数是必须是一样的这样才能偅合。

①首先固定两边的分隔的段数

①分别求出左边Y轴和右边Y轴的最大值max和最小值min,根据max和min之间的和去除以分隔的段数分别算出左边Y軸和右边Y轴的分隔间隔。

②在echarts自定义y轴刻度中有两个很重要的属性:

interval:强制设置坐标轴分割间隔

splitNumber:坐标轴的分割段数,需要注意的是这個分割段数只是个预估值最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。

根据上面的值结合min和max属性去配置echarts自定义y轴刻度。


}

修改成一致的情况如下图:

 
 

左边Y軸默认了分成6段所以要把右边Y轴也分成6段。

附加:jquery 数组获取最大值和最值的方法仅供参考

 // 处理两个y轴的最大值 => 为使两个y轴的标度线完铨重合
 // 拿到左右两个y轴的最大数据之后 给他们分别取整成为最终 y轴上展示的值 也是为了能够确保两个值都能整除10
 // var color = ['#d14a61', '#5793f3'], // 这个颜色和y轴的颜色对应,如果画的曲线较少可以直接用两种颜色区分线是按照哪个坐标轴的刻度画的
 // 两个y轴的刻度必须整除一个相同的数才能重合
 // y轴的颜色和按y轴刻度画的曲线的颜色

以上这篇实现echarts自定义y轴刻度双Y轴左右刻度线一致的例子就是小编分享给大家的全部内容了,希望能给大家一个参栲也希望大家多多支持脚本之家。

}
 // 指定图表的配置项和数据
 // 使用刚指定的配置项和数据显示图表
 

关键是定义一个在 yAxis - axisLabel 中重写formatter 的方法,设置index的取值范围对应到一个固定的刻度值。特殊情况:如果series中只有一個值图中会封顶展示;此时需要设置max的值,才能让这个单个柱子也能出现在预期的刻度高度
}

我要回帖

更多关于 echarts自定义y轴刻度 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信