echarts -根据y轴的visualMap

Question

我正在尝试根据echarts中的y轴添加一个视觉地图。

以他们的一个例子：https://echarts.apache.org/examples/en/editor.html?c=area-pieces

结果如下所示：

​

​

我想要实现的是：

​

​

显然在这里，我刚刚将图片旋转了90度。如何在echarts中直接实现这一点(所以不是先保存图片)？

Answer 1

最简单的解决方案是反转轴、数据索引和可视化地图轴。请参阅下面的图表选项：

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']
            ]
        }
    ]
};

结果：

See on Imgur