echarts为每个值设置不同的边框半径

Question

TLDR

在下图中，一些条出现翻转，有没有办法让所有条都显示为“正常”？

简介

我正在制作一个可以有多个系列和多个 y 值的 echarts 条形图。每个条的值可以是正数也可以是负数，有没有办法根据每个值改变边框半径？

我尝试了什么

如果没有正值（忽略0），那么我只使用[0, 0, 10, 10] 而不是[10, 10, 0, 0] 作为barBorderRadius 属性。但这只有在只有 1 y 值时才能保证有效。

在下面的示例中，红色 b 条显示为“倒置”，但绿色 b 显示为应有的样子，因为绿色 a 没有值。

小例子

var dom = document.querySelector("#chart");

var data = {
  "red": {
    A: 400,
    B: -200
  },
  "green": {
    A: 0,
    B: -100
  },
  "blue": {
    A: 200,
    B: 0
  }
};
var colors = Object.keys(data);
var types = Object.keys(data[colors[0]]);

var myChart = echarts.init(dom);
myChart.setOption({
  color: colors,
  xAxis: [{
    type: "category",
    data: types
  }],
  yAxis: [{
    type: "value"
  }],
  series: colors.map(function(key) {
    var dataSet = Object.values(data[key]);
    var hasPositive = dataSet.filter(Boolean).some(function(val) {
      return val > 0;
    });
    return {
      name: key,
      type: "bar",
      itemStyle: {
        normal: {
          barBorderRadius: hasPositive ? [10, 10, 0, 0] : [0, 0, 10, 10]
        }
      },
      data: dataSet
    };
  })
});

#chart {
  margin-top: -50px;
  height: 280px;
  width: 400px;
}

<script src="https://lib.baomitu.com/echarts/4.5.0/echarts-en.common.js"></script>
<div id="chart"></div>

Answer 1

我找不到其他答案，所以我只想为其他没有其他方法解决类似问题的人发布我的“hack”。

我已将数据分成多个重叠的一系列条形图，问题是左侧的条形图集向左边缘移动，而右侧的条形图向右边缘移动。

var dom = document.querySelector("#chart");

var data = {
  "red": {
    A: 400,
    B: -200
  },
  "green": {
    A: 0,
    B: -100
  },
  "blue": {
    A: 200,
    B: 0
  }
};
var colors = Object.keys(data);
var types = Object.keys(data[colors[0]]);

var myChart = echarts.init(dom);
myChart.setOption({
  color: colors,
  xAxis: [{
    type: "category",
    data: types
  }],
  yAxis: [{
    type: "value"
  }],
  series: colors.reduce(function(result, color) {

    types.forEach(function(type, index) {
      var value = data[color][type];
      var dataList = "0".repeat(index).split("").map(function() {
        return NaN;
      });
      dataList[index] = value;

      result.push({
        name: color,
        type: "bar",
        barWidth: "25%",
        barGap: "-50%",
        itemStyle: {
          normal: {
            borderColor: color,
            borderWidth: 1,
            barBorderRadius: value < 0 ? [0, 0, 10, 10] : [10, 10, 0, 0]
          }
        },
        data: dataList
      });
    });

    return result;
  }, [])
});

#chart {
  margin-top: -50px;
  height: 280px;
  width: 400px;
}

<script src="https://lib.baomitu.com/echarts/4.5.0/echarts-en.common.js"></script>
<div id="chart"></div>

您可以通过在真实集合周围添加更多集合来使条形居中。您可以根据需要添加任意数量，但您必须调整宽度和间隙。

var dom = document.querySelector("#chart");

var data = {
  "red": {
    A: 400,
    B: -200
  },
  "green": {
    A: 0,
    B: -100
  },
  "blue": {
    A: 200,
    B: 0
  }
};
var colors = Object.keys(data);
var types = Object.keys(data[colors[0]]);

var myChart = echarts.init(dom);
myChart.setOption({
  color: colors,
  xAxis: [{
    type: "category",
    data: types
  }],
  yAxis: [{
    type: "value"
  }],
  series: colors.reduce(function(result, color) {
    // left padding
    result.push({
      name: color,
      type: "bar",
      barWidth: "25%",
      barGap: "-75%",
      z: 0,
      data: [NaN, NaN]
    });

    types.forEach(function(type, index) {
      var value = data[color][type];
      var dataList = "0".repeat(index).split("").map(function() {
        return NaN;
      });
      dataList[index] = value;
      result.push({
        name: color,
        type: "bar",
        barWidth: "25%",
        barGap: "-75%",
        z: 10,
        itemStyle: {
          normal: {
            borderColor: color,
            borderWidth: 1,
            barBorderRadius: value < 0 ? [0, 0, 10, 10] : [10, 10, 0, 0]
          }
        },
        data: dataList
      });
    });

    // right padding
    result.push({
      name: color,
      type: "bar",
      barWidth: "25%",
      barGap: "-75%",
      z: 0,
      data: [NaN, NaN]
    });
    return result;
  }, [])
});

#chart {
  margin-top: -50px;
  height: 280px;
  width: 400px;
}

<script src="https://lib.baomitu.com/echarts/4.5.0/echarts-en.common.js"></script>
<div id="chart"></div>