echarts双y轴实现（解决刻度线不对齐）

在这里插入图片描述

1. 这里是按照，分成5格，计算出 int e r val；

2. 先拿到两个数组各自的最大值；各自向上取整。拿到一个整数倍的值（10,5*n,100,1000,10000，…）

   // echarts
        function repair_Echarts(dateList, list1, list2) {
            var maxa = Math.max.apply(null, list1)
            var maxb = Math.max.apply(null, list2)

            myChart3 = echarts.init(document.getElementById('repair_Echarts'));
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '3%',
                    top: '12%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        show: false, //取消坐标轴线
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#333'   //坐标轴文字颜色
                        }
                    },
                    axisTick: {
                        show: false, //取消坐标轴刻度线
                    },
                    data: dateList, --------------data----------------------//
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '(元)',
                        nameTextStyle: { align: 'left', width: '30px', shadowColor: '#edf7ff', padding: [0, 0, 0, -28] },//坐标轴名称的文字样式。backgroundColor: 'red', 
                        min: 0,
                        max: set_max(maxa),
                        interval: set_max(maxa) / 5,
                    },
                    {
                        type: 'value',
                        name: '(次)',
                        nameTextStyle: { align: 'left', width: '30px', shadowColor: '#edf7ff', padding: [0, 0, 0, 6] },//坐标轴名称的文字样式。backgroundColor: 'red', 
                        min: 0,
                        max: set_max(maxb),
                        interval: set_max(maxb) / 5,
                    },

                ],
                series: [{
                    name: '维修金额',
                    type: 'bar',
                    barWidth: 10, //柱图宽度
                    /*设置柱状图颜色*/
                    itemStyle: {
                        normal: {
                            color: '#1E9FFF', 
                        }
                    },
                    data: list1 //数据——————————data
                },
                {
                    name: '维修次数',
                    type: 'bar',
                    barWidth: 10, //柱图宽度
                    /*设置柱状图颜色*/
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            color: '#a5d8ff', 
                        }
                    },
                    data: list2 //数据——————————data
                },]
            };
            myChart3.setOption(option, true);
        }

        //  取最大值
        function set_max(num) {
            // 1.判断是否小数：  //判断是否含有小数点：要检索的字符串值没有出现，则该方法返回 -1。
            if (num.toString().indexOf(".") != -1) {//有小数点
                num = Math.ceil(num);//向上取整 
            }
            // 2.向上取整数倍
            if (num.toString().length < 2) {
                // 一位数1
                num = 10;
            } else if (num.toString().length < 3) {
                // 2位数
                num = Math.ceil(num / 5) * 5;// 变成最近的5的倍数
            } else {
                // 位数--先判断是不是1000...的倍数
                var t = '';
                for (let i = 0; i < num.toString().length - 1; i++) {
                    t += '0';//'0000...'
                }
                if ((num % Number(1 + t)) != 0) {//不是100的倍数

                    num = (Number(num.toString().substr(0, 1)) + 1) * Number(1 + t);
                }
            }
            return num
        }