echarts - visualMap according to y axis

Question

I am trying to add a visual map according to the y axis in echarts.

Taking one of their example: https://echarts.apache.org/examples/en/editor.html?c=area-pieces

The results looks as follow:

what I'm trying to achieve is:

Obviously here, I have just rotated the picture by 90 degree. How can this be achieve in echarts directly (so not by saving the picture first)?

Answer 1

The simplest solution would be inverting the axis, data index, and visual map axis. See chart options below:

option = {
    backgroundColor: '#fff',
    xAxis: {
        type: 'value',
        boundaryGap: [0, '30%'],
        position: 'top'
    },
    yAxis: {
        type: 'category',
        boundaryGap: false 
    },
    visualMap: {
        type: 'piecewise',
        show: false,
        dimension: 1,
        seriesIndex: 0,
        pieces: [{
            gt: 1,
            lt: 3,
            color: 'rgba(0, 180, 0, 0.5)'
        }, {
            gt: 5,
            lt: 7,
            color: 'rgba(0, 180, 0, 0.5)'
        }]
    },
    series: [
        {
            type: 'line',
            smooth: 0.6,
            symbol: 'none',
            lineStyle: {
                color: 'green',
                width: 5
            },
            markLine: {
                symbol: ['none', 'none'],
                label: {show: false},
                data: [
                    {yAxis: 1},
                    {yAxis: 3},
                    {yAxis: 5},
                    {yAxis: 7}
                ]
            },
            areaStyle: {},
            data: [
                [200, '2019-10-10'],
                [400, '2019-10-11'],
                [650, '2019-10-12'],
                [500, '2019-10-13'],
                [250, '2019-10-14'],
                [300, '2019-10-15'],
                [450, '2019-10-16'],
                [300, '2019-10-17'],
                [100, '2019-10-18']
            ]
        }
    ]
};

Result:

See on Imgur