EChart 3.0 设置Y轴反转

最新推荐文章于 2024-07-04 09:28:19 发布

原创最新推荐文章于 2024-07-04 09:28:19 发布 · 1w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#EChart

EChart 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在ECharts中实现Y轴反转，并通过隐藏X轴及刻度线来优化图表展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意: 这是3.0以后新加的属性!

EChart 设置Y轴反转,只需要将 yAxis 的 inverse 设为 true 即可:

yAxis : [
    {
        inverse:true,
        type : 'value'
    }
]

效果是这样滴:
这里写图片描述

X 轴会在上面显示,而 X 轴的数据会在下面显示,这样通常比较丑,所有我们把 X 轴和刻度线都隐藏掉:

xAxis : [
        {
            type : 'category',
            axisLine:{ // 隐藏X轴
                show: false
            },
            axisTick:{ // 隐藏刻度线
                show: false
            },
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六']
        }
    ]