echarts-根据y轴的visualMap

问题描述

我试图根据echarts中的y轴添加视觉地图。

以其中一个示例为例： https://echarts.apache.org/examples/en/editor.html?c=area-pieces

结果如下：

我想要实现的是：

很显然，在这里，我刚刚将图片旋转了90度。如何在echarts中直接实现（而不是先保存图片）？

解决方法

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

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.5)'
        },{
            gt: 5,lt: 7,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'],'2019-10-17'],[100,'2019-10-18']
            ]
        }
    ]
};

结果：

See on Imgur

echarts echarts