[Feature] legends need to support align style inside the column.

[da730]

What problem does this feature solve?

size legend need to support align style inside the column, so it can be in the side close to the chart like 3.x:

What does the proposed API look like?

legends:[
{
...
position: 'start',
align: left , right or middle
}]

[kkxxkk2019]

这个涉及到三点：

1. 离散图例的分页器需要支持左中右显示，这个会在 vrender 0.16.18 版本支持， vchart 1.7.3 版本带上
2. 尺寸图例的样式调整，vchart 1.7.3 版本会开放 align 属性用于调整滑轨的显示方向，至于标题和滑块文本的对齐，可以通过调整样式完成，配置如下：

{
       type: 'size',
        slidable: true,
        visible: true,
        title: {
          visible: true,
          text: '销售额',
          textStyle: {
            fontSize: 12,
            fill: '#6F6F6F'
          },
          space: 0,
          padding: [0, 0, 0, 4] // 标题间距，调整左侧 padding 同滑轨对齐
        },
        align: 'left', // 配置滑轨的显示方向
        handlerText: {
          style: {
            maxLineWidth: 50,
            fontSize: 12,
            fill: '#6F6F6F',
            textAlign: 'start', // 配置对齐方式
            dx: 30  // 配置便宜
          }
        },
}

效果：

3. 图例整体的向左对齐，目前可以通过以下两种方式实现：
1. 自定义布局，参考：https://github.com/VisActor/VChart/blob/develop/packages/vchart/src/layout/base-layout.ts，'normal-inline' 的布局方法在 https://github.com/VisActor/VChart/blob/1f6c5b59f54dccb494dfbcf1ae68efe990e85e79/packages/vchart/src/layout/base-layout.ts#L110，自定义布局教程：https://www.visactor.io/vchart/guide/tutorial_docs/Layout/Layout_Cases/example-custom
2. 监听 afterLayout 事件，在布局结束之后调整元素的布局属性，如下：

vchart.on('afterLayout', e => {
    const elements = e.elements;
    const legends = elements.filter(e => e.layoutType === 'normal-inline');
    const region = elements.filter(e => e.type === 'region')[0];

    legends.forEach(legend => {
      console.log(legend.type);
      if (legend.type === 'discreteLegend') {
        legend.setLayoutStartPosition({
          x: region.getLayoutStartPoint().x + region.getLayoutRect().width,
          y: legend.getLayoutStartPoint().y
        });
      }
      if (legend.type === 'sizeLegend') {
        legend.setLayoutStartPosition({
          x: region.getLayoutStartPoint().x + region.getLayoutRect().width,
          y: region.getLayoutStartPoint().y + region.getLayoutRect().height - legend.getLayoutRect().height
        });
      }
    });
  });

[kkxxkk2019]

监听 'afterLayout' 的完整示例：

const CONTAINER_ID = 'chart';

const run = () => {
  const spec = {
    type: 'scatter',
    xField: '231127202655022',
    yField: '231128164638011',
    invalidType: 'ignore',
    region: [
      {
        clip: true
      }
    ],
    padding: 0,
    labelLayout: 'region',
    data: [data],
    legends: [
      {
        type: 'discrete',
        visible: true,
        id: 'legend-discrete',
        orient: 'right',
        position: 'start',
        layoutType: 'normal-inline',
        maxCol: 4,
        title: {
          textStyle: {
            fontSize: 12,
            fill: '#6F6F6F'
          }
        },
        layoutLevel: 60,
        item: {
          focus: true,
          focusIconStyle: {
            size: 14
          },
          maxWidth: 445,
          spaceRow: 0,
          spaceCol: 0,
          padding: {
            top: 1,
            bottom: 2,
            left: 3,
            right: 2
          },
          background: {
            visible: false,
            style: {
              fillOpacity: 0.001
            }
          },
          label: {
            style: {
              fontSize: 12,
              fill: '#6F6F6F'
            }
          },
          shape: {
            style: {
              lineWidth: 0,
              symbolType: 'square'
            }
          }
        },
        pager: {
          position: 'start',
          layout: 'horizontal',
          // padding: {
          //   left: -18
          // },
          textStyle: {},
          space: 0,
          handler: {
            preShape: 'triangleLeft',
            nextShape: 'triangleRight',
            style: {},
            state: {
              disable: {}
            }
          }
        },
        padding: {
          top: 0,
          bottom: 12,
          left: 16,
          right: 0
        },
        height: '60%'
      },
      {
        type: 'size',
        slidable: true,
        visible: true,
        title: {
          visible: true,
          text: '销售额',
          textStyle: {
            fontSize: 12,
            fill: '#6F6F6F'
          },
          space: 0,
          padding: [0, 0, 0, 4] // 标题间距，调整左侧 padding 同滑轨对齐
        },
        align: 'left', // 配置滑轨的显示方向
        handlerText: {
          style: {
            maxLineWidth: 50,
            fontSize: 12,
            fill: '#6F6F6F',
            textAlign: 'start', // 配置对齐方式
            dx: 30 // 配置便宜
          }
        },
        id: 'legend-size',
        orient: 'right',
        position: 'start',
        layoutType: 'normal-inline',
        field: ['231128164638017'],
        layoutLevel: 50,
        track: {
          style: {
            fill: 'rgba(20,20,20,0.1)'
          }
        },
        rail: {
          height: 100
        },
        handler: {
          style: {
            symbolType: 'M-5,0L-2.5,-3.5\n    h5\n    v7\n    h-5\n    Z',
            size: 8,
            shadowBlur: 0,
            shadowColor: false,
            outerBorder: {
              stroke: '#AEB8C6',
              lineWidth: 1,
              strokeOpacity: 0.5
            }
          }
        },
        startText: {
          visible: false
        },
        endText: {
          visible: false
        },
        padding: {
          top: 0,
          bottom: 12,
          left: 23,
          right: 0
        }
      }
    ],
    seriesField: '231128164638035',

    sizeField: '231128164638017',
    size: {
      type: 'linear',
      range: [7.0898154036220635, 28.359261614488254]
    }
  };

  const vchart = new VChart(spec, { dom: CONTAINER_ID });
  vchart.renderAsync();

  vchart.on('afterLayout', e => {
    const elements = e.elements;
    const legends = elements.filter(e => e.layoutType === 'normal-inline');
    const region = elements.filter(e => e.type === 'region')[0];

    legends.forEach(legend => {
      console.log(legend.type);
      if (legend.type === 'discreteLegend') {
        legend.setLayoutStartPosition({
          x: region.getLayoutStartPoint().x + region.getLayoutRect().width,
          y: legend.getLayoutStartPoint().y
        });
      }
      if (legend.type === 'sizeLegend') {
        legend.setLayoutStartPosition({
          x: region.getLayoutStartPoint().x + region.getLayoutRect().width,
          y: region.getLayoutStartPoint().y + region.getLayoutRect().height - legend.getLayoutRect().height
        });
      }
    });
  });

  // Just for the convenience of console debugging, DO NOT COPY!
  window['vchart'] = vchart;
};
run();

data.json