echarts 二个坐标统一刻度线的方法

根据二个不同的坐标数据,计算出二个坐标的最大值(数据来源后端),然后通过平均分配刻度,计算出echarts的interval数值,然后设置最大值最小值,效果图如下:


99999.png
  methods:{
      //计算级数
      getLog(num){
            if(num==1){
                return 10;
            }else{
                num--;
                return this.getLog(num)*10;
            }
        },
      //计算刻度值
      getLine(max,max1){
            //max 第一个坐标的最大值   max1第二个坐标的最大值
            var splitNumber = 5;//平均分配5个刻度
            var value = parseInt(max);
            var value1 = parseInt(max1);
            var len = (parseInt(max)+"").length-2>0?(parseInt(max)+"").length-2:1;
            var len1 = (parseInt(max1)+"").length-2>0?(parseInt(max1)+"").length-2:1;
            value = Math.ceil(value/this.getLog(len))*this.getLog(len);
            value1 = Math.ceil(value1/this.getLog(len1))*this.getLog(len1);
            return {
                interval:parseInt(value/splitNumber ),
                max:parseInt(value/splitNumber )*splitNumber ,
                interval1:parseInt(value1/splitNumber ),
                max1:parseInt(value1/splitNumber )*splitNumber ,
            }
        },
        initData(){
                const max =  8978,max1=158;//通过后端数据计算得出数据的二组最大值
                this.options.yAxis[0].interval = this.getLine(max,max1).interval;
                this.options.yAxis[0].max = this.getLine(max,max1).max;
                this.options.yAxis[1].interval = this.getLine(max,max1).interval1;
                this.options.yAxis[1].max = this.getLine(max,max1).max1;
       }
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容