echarts柱状图：正负值同侧显示，数值带正负号

本文解决ECharts柱状图中如何将正负值显示在同一侧，并确保数值正确显示正负号的问题。

问题描述：

如何使用ECharts让柱状图的正负值都显示在同一侧（例如，都显示在Y轴正方向），同时在柱子上正确显示数值的正负号（例如，“+10”，“-5”）？

解决方案：

关键在于巧妙地利用数据处理和label的formatter函数。

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

以下代码片段展示了如何实现：

var displayData1 = data1.map(v => Math.abs(v)); // 将数据转换为绝对值
var displayData4 = data4.map(v => Math.abs(v)); // 将数据转换为绝对值

option = {
  // ...其他ECharts配置
  series: [
    {
      name: '辅助',
      // ...其他series配置
      data: displayData1, // 使用绝对值数据绘制柱状图
      label: {
        // ...其他label配置
        formatter: function (params) {
          return data1[params.dataIndex] >= 0 ? ('+' + params.value) : ('-' + params.value); // 根据原始数据添加正负号
        }
      }
    },
    // ...其他series配置
    {
      name: '其他',
      // ...其他series配置
      data: displayData4, // 使用绝对值数据绘制柱状图
      label: {
        // ...其他label配置
        formatter: function (params) {
          return data4[params.dataIndex] >= 0 ? ('+' + params.value) : ('-' + params.value); // 根据原始数据添加正负号
        }
      }
    }
  ]
};

代码说明：

1. displayData1 = data1.map(v => Math.abs(v));: 将原始数据data1中的每个值转换为绝对值，并存储在displayData1中。这使得所有柱子都绘制在同一侧。

2. label.formatter: 这个函数用于自定义柱子上显示的数值。它根据原始数据data1或data4中对应索引的值的正负，在数值前添加“+”或“-”号。

通过以上方法，即可在ECharts柱状图中实现正负值同侧显示，并正确显示数值的正负号。 记住将data1和data4替换成你的实际数据变量名。