ECharts正负柱状图技巧：同一侧显示并正确显示数值！

本文讲解如何在ECharts中绘制正负值柱状图，并使其正负值显示在同一侧且数值正确。通过数据预处理（将负值转换为绝对值）和图表配置（添加辅助系列占位，调整系列label的formatter函数显示正负号，并将y轴inverse属性设置为true），实现正负柱状图同侧显示，并用formatter函数准确显示每个柱状图的正负数值。 文章包含详细步骤和代码示例，助你轻松解决ECharts正负值柱状图显示难题。

ECharts 正负值柱状图同侧显示及数值正确显示详解

本文将详细讲解如何在 ECharts 中将正负值柱状图显示在同一侧，并确保数值正确显示。下图展示了最终效果：

实现这一目标需要对数据和图表配置进行调整：

一、数据预处理:

为了让正负值柱状图在同一侧显示，我们需要将负值转换为其绝对值。假设你的原始数据为 data1 和 data4，可以使用 Math.abs() 函数进行转换：

var displayData1 = data1.map(v => Math.abs(v));
var displayData4 = data4.map(v => Math.abs(v));

二、图表配置:

1. 辅助系列: 引入一个辅助系列来绘制透明的柱状图，用于占位，从而使正负值柱状图显示在同一侧。将辅助系列的 itemStyle 配置为透明：

{
    name: '辅助',
    type: 'bar',
    stack: '总量', //  确保与其他系列堆叠
    itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
    },
    emphasis: {
        itemStyle: {
            borderColor: 'transparent',
            color: 'transparent'
        }
    },
    data: displayData1, // 使用处理后的绝对值数据
    // ...其他配置
}

2. 其他系列 (收入、支出、其他): 调整其他系列的 label 配置，使用 formatter 函数显示正确的正负值：

label: {
    show: true,
    position: 'bottom', // 或 'top'，根据需要调整
    formatter: function (params) {
        // 假设 params.value 为柱状图的值，data2 为对应的数据数组
        return data2[params.dataIndex] >= 0 ? ('+' + params.value) : ('-' + params.value);
    }
}

3. Y 轴: 将 y 轴的 inverse 属性设置为 true，使正值在底部显示：

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

通过以上步骤，即可在 ECharts 中实现正负值柱状图同侧显示，并准确显示柱状图上的数值。 请确保你的数据结构和代码与示例相符，并根据你的实际数据调整 data1, data2, data4 等变量名。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《ECharts正负柱状图技巧：同一侧显示并正确显示数值！》文章吧，也可关注golang学习网公众号了解相关技术文章。