echarts 实现Y轴四等分*
需要实现的效果： 把整个Y轴实现四等分 同时保证Y轴最大的刻度 是距离最高的的数据 比如图上的100 是需要留出一些位置
比较低端 是第一个版本 后面实际使用是需要精进 此次的笔记 子是想记录一下
代码贴上
1.计算出 这七日的数据的最大值 最小值
2.计算出 最大值是几位数
3.计算出 最大值 对应的整百 整千…
4.计算出 最大值 的最高位是多少 向上整 （因为距离Y轴 是需要一点距离的 那么 就需要 往前加一个较大一点的数 所以会取最高位）需注意 1774 那么向上取整 后最高位是2；10 向上取整为1
5.做判断 向上取整后这个数（ceilData2 ）是否比最大值大 如果没有 最高位+1
6 由于要做四等分 那么ceilData2 必须为可以被四整除的数 所以这边用了一个循坏 去向上加 取一个离他最近的一个可以被四整除的数
那么到这 其实对数据的处理就结束了
接下来 是对表格 进行属性的赋值
yAxis.put(“max”, ceilData2); // 把计算出来的这个 设置为Y轴刻度最大的值
yAxis.put(“splitNumber”, 4); // 设置为Y轴刻度 均分的个数
yAxis.put(“interval”,interval); // 设置 刻度的步长 interval =ceilData2/4;
其实 到这 就可以了
private Map yAxisDataFormat (int maxCount,int minCount){
log.info("maxCount:{},minCount:{}",maxCount,minCount);
Integer count =0;
int data = maxCount;
do {
data=data/10;
count=count+1;
}while(data>0);
Integer maxData =1;
for(int i=0;i<count-1;i++){
maxData = maxData * 10;
}
Integer ceilData =(int)Math.ceil(maxCount*1.0 /maxData);//最高位加1
if(ceilData*maxData <= maxCount){
ceilData = ceilData +1;
}
// 判断这个数是否能被4整除
int i=0;
Integer ceilData2 = ceilData*maxData;
do {
if(ceilData2 %4!=0){
ceilData2++;
i++;
continue;
}else{
break;
}
}while (i<20);
double interval =ceilData2/4;
Map yAxis = new HashMap<>();
yAxis.put("type", "value");
yAxis.put("max", ceilData2);
yAxis.put("position","right"); // y轴居右边
yAxis.put("splitNumber", 4);
yAxis.put("interval",interval);
Map axisLine= new HashMap<>();
axisLine.put("show",false); // 不显示坐标轴线
yAxis.put("axisLine",axisLine);
Map axisTick = new HashMap<>();
axisTick.put("show",false);
yAxis.put("axisTick",axisTick);//不显示坐标刻度
Map axisLabel = new HashMap<>();
Map textStyle = new HashMap<>();
textStyle.put("color","#A1A5aa");
axisLabel.put("textStyle",textStyle);
yAxis.put("axisLabel",axisLabel);
return yAxis;
}
在这里插入代码片
实现出来的效果
