Charts-Column(柱状图)配置详解

Column

• 各个配置持续更新，同时也需要参考官方文档

  

1、 更改图例的形状、位置、间距等

const legend = {
    layout: 'horizontal',
    position: 'right-top',
    margin: [10, 10, 10, 0],
    marker: {
      symbol: 'circle',
    },
  };
           

2、 更改图形标注位置，字体大小

// 柱状图图例文字
  const label = {
    position: 'middle',
    style: {
      fill: '#FFFFFF',
      fontSize: 13,
      cursor: 'pointer',
    },
    rotate: 0,
  };
           

3、 X轴点击事件注册

• 参考文档描述事件名称类型

onReady={(plot) => {
              plot.on('axis-label:click', () => {
                modalRef.current.handleChangeVisible();
              });
            }}
           

4、 柱状图根据变量进行颜色设置

// 柱状图间距
  const marginRatio = [0.2];
  const setColor = {
    legend: false,  // 这里需要设置为false
    colorField: 'rank',
    // 部分图表使用 seriesField
    color: ({ rank }) => {
      if (rank === 1) {
        return '#fc7275';
      }
      return '#31bff5';
    },
  };