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';
    },
  };