echarts 实现Y轴四等分

最新推荐文章于 2024-08-01 23:45:55 发布

weixin_45315800

最新推荐文章于 2024-08-01 23:45:55 发布

阅读量1.3k

点赞数

分类专栏：微信小程序文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_45315800/article/details/127758718

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

*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;
    }
在这里插入代码片

实现出来的效果
在这里插入图片描述