使用 ECHARTS 为每个条设置不同的条宽

Question

我正在使用电子图表库为我的数据创建条形图。像这样:

option.series = [
        {
            name: 'buy',
            type: 'bar',
            stack: 'one',
            data: Object.values(chartData?.data || {}).map(elem => -elem.buy?.total),
            color: colors.bought,
            label: {
                show: true,
                position: "bottom",
                formatter: (value) => Math.round(Math.abs(value.data))
            },
            tooltip: {
                formatter: (data) => Math.abs(data.value).toString()
            },
            // barWidth:this.data
        },
        {
            name: 'sell',
            type: 'bar',
            stack: 'one',
            data: Object.values(chartData?.data || {}).map(elem =>elem.sell?.total),
            color: colors.sold,
            label: {
                show: true,
                position: "top",
                formatter: (value) => Math.round(Math.abs(value.data))
            },
            tooltip: {
                formatter: (data) => Math.abs(data.value).toString()
            },
        },
        {
            name: 'profite',
            type: 'bar',
            stack: 'two',
            barGap: '-100%',  
            z: 100,
            data: Object.values(chartData?.data || {}).map(elem => elem.sell?.profit),
            color: colors.profit,
            label: {
                show: true,
                position: "insideTop",
                textBorderWidth: -1,
                offset: [0, -20],
                formatter: (value) => Math.round(Math.abs(value.data))
            },
            tooltip: {
                formatter: (data) => Math.abs(data.value).toString()
            },
        },
    ]

我正在尝试根据每个条形的值为每个条形设置不同的宽度。在数据属性上，我得到了一个数字渲染列表。当我尝试添加 barWidth 属性时，我所能做的就是更改相同图表中的所有条，例如：

条形宽度：${getBarWidth((Object.values(chartData?.data || {}).map((elem) => elem.sell?.amount)))}%

所以我每次都返回不同的数据值，但它并没有根据其值（买入、卖出等）更改每个柱。

提前致谢。

Answer 1

正如您所指出的，barWidth 设置了 bar 系列中所有条形的宽度。而且我认为没有办法在同一个 bar 系列中设置每个条的宽度。

您应该使用 custom series。

Custom 系列有一个参数叫做 renderItem, where you write the render logic of the chart. It's where you'll be able to display custom shapes (custom sized bar in your case), using graphics.

这是我在他们的网站上找到的 example，几乎可以满足您的需求。

var container = document.getElementById('main');
var chart = echarts.init(container);

const colorList = [
  '#4f81bd',
  '#c0504d',
  '#9bbb59',
  '#604a7b',
  '#948a54',
  '#e46c0b'
];
const data = [
  [10, 16, 3, 'A'],
  [16, 18, 15, 'B'],
  [18, 26, 12, 'C'],
  [26, 32, 22, 'D'],
  [32, 56, 7, 'E'],
  [56, 62, 17, 'F']
].map(function (item, index) {
  return {
    value: item,
    itemStyle: {
      color: colorList[index]
    }
  };
});

chart.setOption({
  title: {
    text: 'Profit',
    left: 'center'
  },
  tooltip: {},
  xAxis: {
    scale: true
  },
  yAxis: {},
  series: [
    {
      type: 'custom',
      renderItem: function (params, api) {
        var yValue = api.value(2);
        var start = api.coord([api.value(0), yValue]);
        var size = api.size([api.value(1) - api.value(0), yValue]);
        var style = api.style();
        return {
          type: 'rect',
          shape: {
            x: start[0],
            y: start[1],
            width: size[0],
            height: size[1]
          },
          style: style
        };
      },
      label: {
        show: true,
        position: 'top'
      },
      dimensions: ['from', 'to', 'profit'],
      encode: {
        x: [0, 1],
        y: 2,
        tooltip: [0, 1, 2],
        itemName: 3
      },
      data: data
    }
  ]
});

#main {
  width: 600px;
  height: 400px;
}

<html>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <div id="main"></div>
  </body>
</html>

使用 ECHARTS 为每个条设置不同的条宽

set different bar width for each bar using ECHARTS

reactjs

echarts