G2Plot 分组柱状图图例样式自定义教程

可以通过 G2Plot 的配置项 'legend' 来改变分组柱状图的图例样式。

具体操作如下：

在 G2Plot 实例化时，设置 'legend' 配置项，如下：

const plot = new G2Plot.GroupedColumn(chartDiv, {
  data,
  xField: 'year',
  yField: 'value',
  seriesField: 'type',
  legend: {
    position: 'top-right',
    marker: {
      symbol: 'square',
      style: {
        r: 6,
        lineWidth: 3,
      },
    },
  },
});

其中，'legend' 的 'position' 属性可以设置图例位置，'marker' 是图例 marker 的配置项，可以设置 marker 的形状、大小和样式。

通过设置 'marker' 的 'style' 属性，来改变 marker 样式：

legend: {
  position: 'top-right',
  marker: {
    symbol: 'square',
    style: {
      r: 6,
      lineWidth: 3,
      stroke: '#f00',
      fill: '#ff0',
    },
  },
},

其中，'r' 属性设置 marker 半径，'lineWidth' 属性设置 marker 边框宽度，'stroke' 属性设置 marker 边框颜色，'fill' 属性设置 marker 填充颜色。

通过设置 'marker' 的 'symbol' 属性，来改变 marker 形状：

legend: {
  position: 'top-right',
  marker: {
    symbol: 'circle',
    style: {
      r: 6,
      lineWidth: 3,
      stroke: '#f00',
      fill: '#ff0',
    },
  },
},

其中，'symbol' 属性可以设置 marker 形状，支持的形状有 'circle', 'square', 'diamond', 'triangle', 'star', 'cross', 'tick'。