Echarts - 对条形图进行分组并在图例和工具提示中仅显示宏

Question

在这种情况下，我想创建一个条形图：x axys 是第一列“月”，列“购物车”和“订单”中的值必须重叠（订单永远不会超过购物车的数量）。

此外，图例应仅显示宏（Direct、ADV 等）并显示/隐藏值“购物车”和“订单”，工具提示必须显示该月的所有数据。

我尝试在文档中搜索，但没有找到类似的内容。

Answer 1

我不确定你到底想要什么，但这里可以给你一个想法：

const dataset = [
  {
    time: '01-2023',
    directC: 10,
    directO: 10,
    directDiff: 0,
    advC: 10,
    advO: 7,
    advDiff: 3
  },
  {
    time: '02-2023',
    directC: 14,
    directO: 12,
    directDiff: 2,
    advC: 12,
    advO: 7,
    advDiff: 5
  },
  {
    time: '03-2023',
    directC: 8,
    directO: 6,
    directDiff: 2,
    advC: 14,
    advO: 6,
    advDiff: 8
  }
];

option = {
  dataset: [{source: dataset}],
  legend: {},
  tooltip: {
    formatter: displayIndex,
  },
  xAxis: {
    type: 'category',
    data: ['01-2023', '02-2023', '03-2023']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      name:'Direct Orders',
      stack: 'direct',
      encode: {
        x: 'time',
        y: 'directO'
      }
    },
    {
      type: 'bar',
      name: 'Direct Carts',
      stack: 'direct',
      encode: {
        x: 'time',
        y: 'directDiff'
      },
      barMinHeight: 10,
    },
    {
      type: 'bar',
      name: 'ADV Orders',
      stack: 'adv',
      encode: {
        x: 'time',
        y: 'advO'
      }
    },
    {
      type: 'bar',
      name: 'ADV Carts',
      stack: 'adv',
      encode: {
        x: 'time',
        y: 'advDiff'
      },
      barMinHeight: 10,
    }
  ]
};


function displayIndex(params) {
  const dataItem = dataset[params.dataIndex];
  return  '<div> Direct: Carts - ' + dataItem['directC'] + ' Orders - ' + dataItem['directO'] + '</div>' +
          '<div> ADV: Carts - ' + dataItem['advC'] + '    Orders - ' + dataItem['advO'] + '</div>'
}