echarts 正负值柱状图同侧显示及数值正确显示详解
本文将详细讲解如何在 ECharts 中将正负值柱状图显示在同一侧，并确保数值正确显示。下图展示了最终效果：
实现这一目标需要对数据和图表配置进行调整：
一、数据预处理:
为了让正负值柱状图在同一侧显示，我们需要将负值转换为其绝对值。假设你的原始数据为 data1 和 data4，可以使用 Math.abs() 函数进行转换：
<code class="javascript">var displayData1 = data1.map(v => Math.abs(v)); var displayData4 = data4.map(v => Math.abs(v));</code>
二、图表配置:
-
辅助系列: 引入一个辅助系列来绘制透明的柱状图，用于占位，从而使正负值柱状图显示在同一侧。将辅助系列的
itemStyle配置为透明：
<code class="javascript">{
name: '辅助',
type: 'bar',
stack: '总量', // 确保与其他系列堆叠
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
emphasis: {
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
}
},
data: displayData1, // 使用处理后的绝对值数据
// ...其他配置
}</code>
-
其他系列 (收入、支出、其他): 调整其他系列的
label配置，使用formatter函数显示正确的正负值：
<code class="javascript">label: {
show: true,
position: 'bottom', // 或 'top'，根据需要调整
formatter: function (params) {
// 假设 params.value 为柱状图的值，data2 为对应的数据数组
return data2[params.dataIndex] >= 0 ? ('+' + params.value) : ('-' + params.value);
}
}</code>
-
Y 轴: 将 y 轴的
inverse属性设置为true，使正值在底部显示：
<code class="javascript">yAxis: {
type: 'value',
inverse: true
}</code>
通过以上步骤，即可在 ECharts 中实现正负值柱状图同侧显示，并准确显示柱状图上的数值。 请确保你的数据结构和代码与示例相符，并根据你的实际数据调整 data1, data2, data4 等变量名。
