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

Question

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

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

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()
            },
        },
    ]

Run Code Online (Sandbox Code Playgroud)

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

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

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

提前致谢。

Answer 1

A m*_*dev 6

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

您应该使用的是定制系列。

Custom系列有一个名为renderItem的参数，您可以在其中编写图表的渲染逻辑。您可以在其中使用图形显示自定义形状（在您的情况下为自定义大小的条形）。

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

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
    }
  ]
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	3 年，7 月前
查看次数：	4308 次
最近记录：	3 年，6 月前