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

        };
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值