如何让图例标题和图例在同一行左右分开显示？

Question

我想给图例新增一些文字描述，期望在图表底部新增一个图例和图例的文字描述。预期的布局效果是，文字左对齐，图例右对齐，并且文字和图例在同一行。
有什么图表库可以实现这种比较特殊定制的逻辑吗？

Answer 1

legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
    orient: 'vertical',
    align: 'right',
    formatter: [
        '{name|{name}}',
    ].join('\n'),
    textStyle: {
      width: 200,
      rich: {
          name: {
            align: 'left'
          }
      }
    }
  }

使用echart

Answer 2

解决方案 Solution

VChart的图例组件和标题组件提供了绝对定位的布局方式，通过设置layoutType:'absolute'即可开启该布局模式。

随后为图表设置足够的padding，将标题组件放在左下角，图例组件放在右下角，即可实现让图例的标题和图例左右分开显示。

代码示例 Code Example

import { useEffect, useRef } from "react";
import VChart from "@visactor/vchart";

export const Chart = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const spec = {
      type: "bar",
      data: [
        {
          id: "barData",
          values: [
            { type: "Autocracies", year: "1930", value: 129 },
            { type: "Autocracies", year: "1940", value: 133 },
            { type: "Autocracies", year: "1950", value: 130 },
            { type: "Autocracies", year: "1960", value: 126 },
            { type: "Autocracies", year: "1970", value: 117 },
            { type: "Autocracies", year: "1980", value: 114 },
            { type: "Autocracies", year: "1990", value: 111 },
            { type: "Autocracies", year: "2000", value: 89 },
            { type: "Autocracies", year: "2010", value: 80 },
            { type: "Autocracies", year: "2018", value: 80 },
            { type: "Democracies", year: "1930", value: 22 },
            { type: "Democracies", year: "1940", value: 13 },
            { type: "Democracies", year: "1950", value: 25 },
            { type: "Democracies", year: "1960", value: 29 },
            { type: "Democracies", year: "1970", value: 38 },
            { type: "Democracies", year: "1980", value: 41 },
            { type: "Democracies", year: "1990", value: 57 },
            { type: "Democracies", year: "2000", value: 87 },
            { type: "Democracies", year: "2010", value: 98 },
            { type: "Democracies", year: "2018", value: 99 }
          ]
        }
      ],
      xField: ["year", "type"],
      yField: "value",
      seriesField: "type",
      padding: [12, 12, 40, 12],
      legends: {
        visible: true,
        orient: "top",
        position: "start",
        layoutType: "absolute",
        bottom: -40,
        right: 12,
        padding: 0
      },
      title: {
        visible: true,
        text: "Two Series Category",
        layoutType: "absolute",
        bottom: -40,
        left: 12,
        textStyle: {
          fontSize: 12
        },
        padding: 0
      }
    };

    const vchart = new VChart(spec, {
      dom: containerRef.current
    });

    vchart.renderSync();

    return () => vchart.release();
  }, []);

  return (
    <div
      ref={containerRef}
      style={{
        width: 520,
        height: 520,
        border: "1px solid #ccc"
      }}
    />
  );
};

结果展示 Results

在线示例：https://codesandbox.io/s/layout-legend-q6sht5?file=/src/App.js

相关文档 Documents

VChart Github

VChart 标题组件配置文档

VChart 图例组件配置文档