What problem does this feature solve?

After adding the x-axis to set the polyline offset, the visualMap setting fails

What does the proposed API look like?

My option as follow:

option = {
  grid:{
            left:'6%',
            top:'10%',
            right:'5%',
            bottom:'50'
        },
    xAxis: [{
        axisTick:{
                alignWithLabel: true
            },
            type:'category',
            data:['00:00','1:00','2:00','3:00','4:00','5:00','6:00','7:00','8:00','9:00','10:00','11:00'],
            axisLine:{
                lineStyle: {
                    color:'#B6C3CC',
                    width:1
                }
            },
            axisLabel:{
                interval:0, 
                fontSize:18,
                color:'#B6C3CC',
                font:'Arial'
            }
    }, ],
    yAxis: [{
            type:'value',
            axisLabel:{
                fontSize:20,
                color:'#B6C3CC'
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:'#425559'
                }
            }
        }
    ],
    visualMap: 
    {
        show: false,
        dimension: 0,
        seriesIndex: 1,
        pieces: [
            {
              lte: 6,
              color: 'green'
            },
            {
              gt: 6,
              lte: 8,
              color: 'red'
            },
            {
              gt: 8,
              color: 'green'
            }
        ]
    },
    series: [
        {
            xAxisIndex: 1,
            type:'line',
            label: {
                    show: true,
                    position: 'top',
                    color: '#000000',
                    fontSize: 18,
                    formatter: function (params) {
                        return (params.value[1])+"%"
                    }
                },
            data: [43, 18, 90, 26, 15, 80, 92,76, 53, 28, 76, 82,91],
        }
    ]
};
 
// 增加了一个隐藏的x轴，用来控制线图的点的位置
option.xAxis[1] = {
    type: 'value',
    max: option.xAxis[0].data.length * 100,
    show: false
}
option.series[0].data = option.series[0].data.map((x, i) => [0 + i * 100, x])

I want to set the polyline color as: 0 ~ 6 green, 6 ~ 8 red,....
Is there something wrong with my option? please give some advice
Thanks!