关于antv g2 中的问题

Question

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

<script>
import { Chart, registerShape } from "@antv/g2";
import { DataSet } from "@antv/data-set";
export default {
  props: ["width", "height"],
  data() {
    return {};
  },
  mounted() {
    console.log("---------------yuan ayuna ");
    this.init();
  },
  methods: {
    init() {
      const data = [
        { country: "Lithuania", litres: 501.9 },
        { country: "Czech Republic", litres: 301.9 },
        { country: "Ireland", litres: 201.1 },
        { country: "Germany", litres: 165.8 },
        { country: "Australia", litres: 139.9 },
        { country: "Austria", litres: 128.3 },
        { country: "UK", litres: 99 },
        { country: "Belgium", litres: 60 },
        { country: "The Netherlands", litres: 50 }
      ];

      const ds = new DataSet();
      const dv = ds
        .createView()
        .source(data)
        .transform({
          type: "percent",
          field: "litres",
          dimension: "country",
          as: "percent"
        });

      const chart = new G2.Chart({
        container: "c2",
        width: 500,
        height: 500,
        padding: [20, 120, 20, 160]
      });
      chart.source(dv, {});
      chart.coord("theta", {
        innerRadius: 0.6,
        radius: 1
      });
      chart.tooltip({
        showTitle: false, // 不展示标题
        itemTpl:
          '
{name}:{value}
'
      });
      chart.legend({
        useHtml: true,
        position: "right",
        containerTpl:
          '
' +
          '' +
          "
",
        itemTpl: (value, color, checked, index) => {
          console.log(value, color, checked, index);
          const obj = dv.rows[index];
          checked = checked ? "checked" : "unChecked";
          return (
            '" " +
            checked +
            '" data-value="' +
            value +
            '" data-color=' +
            color +
            ' style="cursor: pointer;font-size: 12px;">' +
            '';">' +
            '' +
            value +
            "" +
            '' +
            obj.litres +
            "" +
            ""
          );
        },
        offsetX: 15,
        "g2-legend": {
          marginLeft: "100px",
          marginTop: "-107px"
        },
        "g2-legend-list": {
          border: "none"
        }
      });

 
      chart
        .annotation()
        .text({
          position: ["50%", "50%"],
          content: "主机",
          style: {
            fontSize: 14,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetY: -20
        })
        .text({
          position: ["50%", "50%"],
          content: "200",
          style: {
            fontSize: 20,
            fill: "#8c8c8c",
            textAlign: "center"
          },
          offsetX: 0,
          offsetY: 20
        });

      chart
        .intervalStack()
        .position("percent")
        .color("country", [
          "#67b7dc",
          "#84b761",
          "#fdd400",
          "#cc4748",
          "#cd82ad",
          "#2f4074",
          "#448e4d",
          "#b7b83f",
          "#b9783f"
        ])
        .label("percent", {
          formatter: (val, item) => {
            // 延长线
            return;
          }
        })
        .style({
          lineWidth: 2,
          stroke: "#fff"
        });
      chart.render();
    }
  }
};
</script>

<style lang="less" scoped>
</style>

如图报错 但是我在别的地方用同样的代码又是正常的的 不知道是什么原因

Answer 1

该问题是因为方法版本不匹配造成的