echarts多个折线的早晚高峰显示

在一次前端页面编写过程中遇到了一次需要显示多条折线的早晚高峰显示需求，查看官网例子，只有一条折线显示早晚高峰这样的例子，就是官网 一天用电量分布,示例图如下：

具体的实现方式是写关于series的markArea属性：

series: [
        {
            name:'用电量',
            type:'line',
            smooth: true,
            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
            markArea: {
                data: [ [{
                    name: '早高峰',
                    xAxis: '07:30'
                }, {
                    xAxis: '10:00'
                }], [{
                    name: '晚高峰',
                    xAxis: '17:30'
                }, {
                    xAxis: '21:15'
                }] ]
            }
        }
    ]

而且这个属性的颜色值是随着对应的series颜色变化的，而我所需要的是两条折线对应同一个markArea，如果每条折线对应的series都设置markArea，只会显示代码在最上面的折现颜色，没有办法实现我想要的，一条绿色折线，一条蓝色折线，markArea为黄色，为此费了很多脑子，尝试了很多次，甚至还用div自己写了一个定位上去，但是效果都不是很好，最后使用增加一条没有数值的series的办法，隐藏上面的legend，设置legend文字为透明色，达到我想要的效果！在此放上一张自己做测试的丑图：

效果图如下：

注：想要legend居中，设置偏移量即可 即 x: ‘35%’

legend: {
        	x: '35%',
            data:[
                {name:'当前时段', textStyle: {color: 'red'}},
                {name:'对比状态', textStyle: {color: 'red'}},
                {name:'早高晚峰', icon:'none' ,textStyle: {color: 'rgba(0,0,0,0)'}}],
        },

但是注意:该方法有一个缺陷就是，隐藏的legend还是可以点击的，如何设置为不可点击，并没找到方法解决