echarts多个折线图保证图形对齐

  在echarts基本上做多个折线图，保证左右两边图形对齐
  效果如下：

可以将每个图形的主区域grid 的宽度，高度，距离左边的距离left都设置相同，就可以保证图形是按照坐标轴对齐的。这里需要注意的是一个属性containLabel，假如这个值是false的话，它是按坐标轴区分来对齐的，具体请看官网文档

         let newData = data.data;
        let time = data.date;
        let xAxis = newData.map((item, i) => {
            return {
                type: "category",
                data: time,
                name: i == newData.length - 1 ? item.unit : '',
                nameLocation: "middle",   //坐标轴名字的位置
                nameGap: 30,  //距离坐标轴距离
                axisLine: {
                    lineStyle: {
                        color: "#888",
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "#ddd",
                        type: "dashed"
                    },
                    show: true,
                },
                axisLabel: {
                    show: i == newData.length - 1,
                    formatter: function (value, i) {
                    //将年月日时分秒显示成0-24小时
                        var date = new Date(value);
                        let hour = date.getHours();
                        let minutes = date.getMinutes();
                        let seconds = date.getSeconds();
                        if (hour == 23 && (minutes > 0)) {
                            return '24'
                        } else {
                            return hour.toString();
                        }
                    },
                },
                axisTick: {
                    show: true,
                    inside: true
                },
                gridIndex: i,
                splitNumber: 300
            };
        });
        let yAxis = newData.map((item, i) => {
            let obj = {
                type: "value",
                // name: `${item.name}`,
                nameLocation: "middle",
                nameGap: 50,
                axisLine: {
                    lineStyle: {
                        color: "#888",
                    },
                    show: true,
                },
                splitLine: {
                    lineStyle: {
                        color: "#ddd",
                    },
                    show: false,
                },
                axisTick: {
                    show: true,
                    inside: true
                },
                gridIndex: i,
                splitNumber: 3,
                max: function (value) {
                    return Math.floor(value.max + 3);
                },
                min: function (value) {
                    return Math.ceil(value.min - 3);
                },
            };
            if ((i + 1) % 2 == 0) {
                obj.position = 'right';
                obj.name = ''
            } else {
                obj.position = 'left';
                obj.name = item.name
            }
            return obj;
        });
        // console.log(yAxis);
        let series = newData.map((item, i) => {
            return {
                type: "line",
                name: item.name,
                data: item.data,
                symbol: 'none',
                xAxisIndex: i,
                yAxisIndex: i,
            }
        })
        // console.log(series);
        let option = {
            tooltip: {
                trigger: "axis"
            },
            grid: [{
                    left: '15%',
                    top: '5%',
                    // containLabel: true,   
                    width: '32%',
                    height: '25%',
                    show: true,
                    borderColor: "#888"
                },
                {
                    show: false,
                    left: '50%',
                    top: '5%',
                    // containLabel: true,
                    width: '32%',
                    height: '25%',
                    show: true,
                    borderColor: "#888"
                }, {
                    show: false,
                    left: '15%',
                    top: '35%',
                    // containLabel: true,
                    width: '32%',
                    height: '25%',
                    show: true,
                    borderColor: "#888"
                },
                {
                    show: false,
                    left: '50%',
                    top: '35%',
                    // containLabel: true,
                    width: '32%',
                    height: '25%',
                    show: true,
                    borderColor: "#888"
                },
                {
                    show: false,
                    left: '15%',
                    top: '65%',
                    // containLabel: true,
                    width: '32%',
                    height: '25%',
                    show: true,
                    borderColor: "#888"
                },

            ],
            xAxis,
            yAxis,
            series

        };