关于echarts的正负柱状图，如何去实现正数显示在柱子右边，负数显示在柱子左边

最新推荐文章于 2024-10-05 23:08:20 发布

琳木兮

最新推荐文章于 2024-10-05 23:08:20 发布

阅读量5.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： javascript reactjs

本文链接：https://blog.youkuaiyun.com/jililin123/article/details/110956362

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ECharts实现正数显示在柱子右侧，负数显示左侧的效果，并提供了一个具体示例代码，包括HTML结构、JavaScript配置等。

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

关于echarts的正负柱状图，如何去实现正数显示在柱子右边，负数显示在柱子左边

废话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" style="height: 400px;width: 400px;">

    </div>
</body>
</html>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
<script>
    let data1 = [200, 117, 240, -244, 200, 220, 210]
    let data2 = [320, 302, 341, 374, 390, 450, 1520]
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['利润', '收入']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'value',
                nameRotate:45,
            }
        ],
        yAxis: [
            {
                type: 'category',
                axisTick: {
                    show: false
                },
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
        ],
        series: [
            {
                name: '利润',
                type: 'bar',
                data: data1.map((item)=>{
                    // console.log(item)
                    return {
                        value:item,
                        label:{
                            show: true,
                            position:item>0?'right':'left',
                            textStyle: {
                                color: '#ccc',
                                fontSize: 12
                            }
                        }
                        
                    }
                }),
               
            },
            {
                name: '收入',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true
                },
                data: data2.map((item)=>{
                    // console.log(item)
                    return {
                        value:item,
                        label:{
                            show: true,
                            position:item>0?'right':'left',
                            textStyle: {
                                color: '#ccc',
                                fontSize: 12
                            }
                        }
                        
                    }
                }),
            },
           
        ]
    };
    console.log(option)
    myChart.setOption(option)

</script>

在这里插入图片描述