echarts

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

echarts - 根据y轴的visualMap

echarts - visualMap according to y axis