echarts+x轴刻度间距是啥意思？

Posted 2023-04-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts+x轴刻度间距是啥意思？相关的知识，希望对你有一定的参考价值。

echarts＋X轴刻度间距的意思echarts中柱状图左右的间距。

echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性interval来进行调整。默认会采用标签不重叠的策略间隔显示标签，则需要在xAxis 属性加上axisLabel:interval: 0。可以设置成 0 强制显示所有标签。

xAxis.axisLabel 属性：axisLabel的类型是object，主要作用是：坐标轴刻度标签的相关设置（当然yAxis也是一样有这个属性的）。

扩展资料：

量仪器标尺和刻度盘上，相邻两刻度线的中心线之间的距离或弧长。通常是等距刻线。为了适于人眼观察和读数，刻度间距一般在0.75~2.5之间。

测量仪器上标尺和刻度盘上，每一个刻度间距所代表的量值，其单位与标在标尺上的单位一致。对于一般情况的测量设备，两者在数值上是相等的。但是对于一些精密仪器来说，它们两者之间往往存在一定的比例系数。

参考资料来源：百度百科--刻度间距

参考技术A

echarts＋X轴刻度间距的意思echarts中柱状图左右的间距。

一、 echarts中横坐标值显示不全(自动隐藏)解决方案：

1、echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性interval来进行调整。

2、默认会采用标签不重叠的策略间隔显示标签，则需要在xAxis 属性加上axisLabel:interval: 0。可以设置成 0 强制显示所有标签。

3、xAxis.axisLabel 属性：

axisLabel的类型是object ,主要作用是：坐标轴刻度标签的相关设置（当然yAxis也是一样有这个属性的）。

echarts实现双y轴(多y轴)刻度间距动态保持一致

1.在项目中实现双y轴效果如下

echarts实现双y轴(多y轴)刻度间距动态保持一致_双y轴

存在的问题就是左右双y轴的辅助线splitLine没有保持一致，显得有点乱，针对次问题，特意拎出来单独总结一下

2.实现过程

在实现echarts双y轴(多y轴)刻度间距保持一致的问题，需要涉及到一些简单的计算过程，主要是最大值、最小的、向上取整、倍数等计算过程

2.1 求一个数的向上最近的且为5(也可以是其他的数)的倍数的整数

let a = 12let b = Math.ceil(a / 5) * 5 // 15
let a = 18let b = Math.ceil(a / 5) * 5 // 20
JavaScript

2.2 求一个数的向下最近的且为5(也可以是其他数)的倍数的整数

let a = 12let b = Math.floor(a / 5) * 5 // 10
let a = 18let b = Math.floor(a / 5) * 5 // 15
let a = -8let b = Math.floor(a / 5) * 5 // -10
JavaScript

2.3 实现双y轴刻度间距保持一致

有了上面的基础，就可以实现双y轴刻度间距动态保持一致了

const myChart = echarts.init(document.getElementById(main));
// 数据都为整数类型const yData1 = [79, 85, 224, 218, 121, 147, 280]const yData2 = [94, 300, 345, 320, 400, 601, 821]
// 1. 找出最大值 和 最小值let max1 = Math.max.apply(null, yData1)let max2 = Math.max.apply(null, yData2)let min1 = Math.min.apply(null, yData1)let min2 = Math.min.apply(null, yData2)
console.log(max1, max1)console.log(max2, max2)console.log(min1, min1)console.log(min2, min2)
// 2. 最大值: 向上取整, 且为5的倍速let newMax1 = Math.ceil(max1 / 5) * 5 // note: 关键代码let newMax2 = Math.ceil(max2 / 5) * 5 // note: 关键代码
// 3. 最小值: 向下取整, 且为5的倍数let newMin1 = Math.floor( min1 / 5) * 5 // note: 关键代码let newMin2 = Math.floor( min2 / 5) * 5 // note: 关键代码

console.log(newMax1, newMax1)console.log(newMax2, newMax2)console.log(newMin1, newMin1)console.log(newMin2, newMin2)let part = 5 // 分5段let interval1 = (newMax1 - newMin1) / 5  // note: 这个地方是用: 最大值 - 最小值let interval2 = (newMax2 - newMin2) / 5 // note: 这个地方是用: 最大值 - 最小值console.log(interval1, interval1)console.log(interval2, interval2)
const option =   xAxis:     type: category,    data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]  ,  yAxis: [    type: value,    min: newMin1,    max: newMax1,    interval: interval1,    splitLine:       lineStyle:         color: red            ,     type: value,    min: newMin2,    max: newMax2,    interval: interval2,    splitLine:       lineStyle:         color: green            ],  series: [    data: yData1,    type: line  ,     data: yData2,    type: line,    yAxisIndex: 1  ];myChart.setOption(option);
JavaScript