echarts - 根据y轴的visualMap答案

【问题标题】：echarts - visualMap according to y axisecharts - 根据y轴的visualMap
【发布时间】：2020-10-05 10:07:43
【问题描述】：

我正在尝试根据echarts中的y轴添加可视化地图。

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

结果如下：

我想要实现的是：

显然在这里，我刚刚将图片旋转了 90 度。这怎么能直接在echarts中实现（所以不是先保存图片）？

【问题讨论】：

标签： echarts

【解决方案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

【讨论】：

感谢您的回答。我目前正在休假，只能在几周内对其进行测试，但查看您发布的代码，它看起来就像我正在寻找的解决方案。谢谢。