首页 > 其他 > 详细

ECharts 解决双Y轴刻度不一致问题

时间:2020-09-28 13:14:05      阅读:304      评论:0      收藏:0      [点我收藏+]
概述

使用ECharts显示双Y轴时,因两轴对应数据最大、最小值不可能一直一样,故需要手动处理一下。按情景需要,大致分为3种情况。

情景一

  • 若最大最小值固定,直接初始化设置option的yAxis的min和max属性值即可;
    假设已知固定最大最小值为0和1。
    var option =
        {
            ...
            yAxis:[
            {
                name: "",
                min: 0,
                max: 1,
            },
            {
                name: "",
                min: 0,
                max: 1,
            }],
                        ...
        };

    情景二

    若最大最小值不固定,而数据类型一致,即:双Y轴对应数据的数量级一致。添加一个JS处理函数即可。

    function set_data( arr_data )
    {
        var y_min = option.yAxis[0].min;
        var y_max = option.yAxis[0].max;        
        for( var n = 0; n < arr_data.length; n++ )
        {
                if( arr_data[ n ] > y_max )
                        y_max = arr_data[ n ];
                else if( arr_data[ n ] < y_min )
                        y_min = arr_data[ n ];
        }
        y_max = Math.ceil( y_max / 10 ) * 10;
        y_min = Math.floor( y_min / 10 ) * 10;
        option.yAxis[0].min = y_min;
        option.yAxis[0].max = y_max;
        option.yAxis[1].min = y_min;
        option.yAxis[1].max = y_max;
        myChart.setOption( option );
    }

    情景三

    若最大最小值不固定,而数据类型也不一致。

ECharts 解决双Y轴刻度不一致问题

原文:https://blog.51cto.com/weiyuqingcheng/2538426

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!