关于antv g2 柱状图的图例

Question

如图 antv g2的基础柱状图
目前是单个数据 我想展示图例 但是好像antv g2不能实现 单个数据显示图例的这个东西 只有多组数据的时候才支持 请问要怎么配置呢

<template>
  <div id="container"></div>
</template>

<script>
import { Chart } from "@antv/g2";

export default {
  props: ["data", "height", "width"],
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      console.log(this.data, this.height, this.width);
      const chart = new Chart({
        container: "container",
        autoFit: false,
        width: this.width,
        height: this.height
      });
      chart.data(this.data);
      chart.scale("value", {
        alias: "销售额(万)",
        nice: true
      });
      chart.axis("time", {
        tickLine: null
      });
      chart.axis("value", {
        grid: {
          line: {
            style: {
              stroke: "#e8e8e8",
              lineDash:[10,2], // 网格
            }
          }
        }
      });

      chart.tooltip({
        showMarkers: false
      });
      chart.interaction("active-region");

      chart
        .interval()
        .position("time*value")
        .style("time", val => {
          return {
            // fillOpacity: 1,
            // lineWidth: 0,
            // stroke: "yellow",
            // lineDash: [3, 2]
          };
        });
        chart.theme({ "styleSheet": { "brandColor": "l(90) 0:#FFD069  1:#FFEAA2", "paletteQualitative10": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA"] } });

      chart.render();
    }
  }
};
</script>

Answer 1

• 这篇博客也许可以解决你的问题👉 ：AntV G2 柱状图