电子图表为每个值设置不同的边框半径

Question

TLDR

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

简介

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

我尝试过的

如果没有正值(忽略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>

​