使用echarts强制将y轴分段,y轴显示的值小于1024,自动计算单位
(1)将y轴强制分为五段,效果图:
实现方法:在yAxis:{}中配置最大值和最小值还有分段的值,核心代码如下:
min: 0, max: this.unit.max, interval: this.unit.max/5,
因为这里需要设计的是实时备份流量,所以这里的max是一个变化的值,所以就先设计了一个变量,每当数据请求一次,max也会跟着变化
(2)将y轴展示的值转化成小于1024的值:效果图在上方进行了展示,由于后端传递给前端的数值的单位是字节类型的,数据量特别大,所以在展示的时候需要对数据进行转化,转变成小于1024的值
实现方法:在yAxis中的 axisLabel 属性 进行配置 。 实现想法是:在数据进行显示前进行拦截,拦截到了数据,然后在进行修改,修改完了在进行显示,核心代码如下:
axisLabel: { formatter: (value) => { //formatter拦截数据展示的方法 let max = this.unit.data.reduce((a,b)=>a>b?a:b); if(max == 0){ return value }else{ value = this.y_axis_data_display(max,value); //该方法是将展示的值转化成小于1024的数据 return value } } } -------------------------------分割线--------------------------------------
/*
实现方式:获取到传递过来的最大值和需要转变的值,
先确定最大值是属于哪一个数量级的,然后在将这个
数量级转化保存下来,然后在通过这个数量级将需要
转变的值转化成同一个数量级的值
*/
y_axis_data_display(max,value){ if (max <= 0) { value = '0'; } else{ let k = 1024; let c = Math.floor(Math.log(max) / Math.log(k)); if(c == -1){ c=0 } value = (value / Math.pow(k, c)).toFixed(1); } return value },