Incubator-echarts: 双Y轴数据差异导致网格不重合

Created on 13 May 2016 · 5Comments · Source: apache/incubator-echarts

问题简述 (One-line summary)

设置Y轴左右两个刻度，网格有时候会根据数据的差异，左右两个刻度网格没有重合

版本及环境 (Version & Environment)

ECharts 版本 (ECharts version):3.1.7
浏览器类型和版本 (Browser version):chrome 49
操作系统类型和版本 (OS Version):mac

ECharts配置项 (ECharts option)

option = {
    tooltip: {
        trigger: 'axis'
    },
    toolbox: {
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:['蒸发量','降水量','平均温度']
    },
    xAxis: [
        {
            type: 'category',
            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '水量',
            min: 0,
            axisLabel: {
                formatter: '{value} ml'
            }
        },
        {
            type: 'value',
            name: '温度',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: '{value} °C'
            }
        }
    ],
    series: [
        {
            name:'降水量',
            type:'line',
            data:[2.6, 1.9, 2.0, 36.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name:'平均温度',
            type:'line',
            yAxisIndex: 1,
            data:[9.10, 3.2, 1.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
};

结果

期望结果 (Expected behaviour)

stale

Source

cyyjs

👍2

Most helpful comment

一样碰到这样的问题。。2.0是会自动计算，3.0里需要手动设置 max ,min ,interval ...有点麻烦，编写时候很多图形都是自动生成。。

解决方法......还是的自己计算max min interval splitNumber的值

data = [84,12,54.5,99.12,64,20,15.5,40]
splitNumber=5

min=Math.min(...data)

//取splitNumber的倍数
max= Math.ceil(Math.max(...data))

max = parseInt(max/splitNumber) * splitNumber + (max%splitNumber == 0 ? 0 : splitNumber )

interval = max / splitNumber

bplok20010 on 27 Sep 2016

👍3

All 5 comments

一样碰到这样的问题。。2.0是会自动计算，3.0里需要手动设置 max ,min ,interval ...有点麻烦，编写时候很多图形都是自动生成。。

解决方法......还是的自己计算max min interval splitNumber的值

data = [84,12,54.5,99.12,64,20,15.5,40]
splitNumber=5

min=Math.min(...data)

//取splitNumber的倍数
max= Math.ceil(Math.max(...data))

max = parseInt(max/splitNumber) * splitNumber + (max%splitNumber == 0 ? 0 : splitNumber )

interval = max / splitNumber

bplok20010 on 27 Sep 2016

👍3

上面的方法用的不对
Math.min()和Math.max()不能传数组，要用Math.min.apply()
同时算法可以根据项目具体情况改进