surveyMaker/src/components/HistogramHorizontal.vue

<!-- 水平方向的柱状图 -->
<template>
  <div :id="chartId"></div>
</template>
<script>
import { Chart } from "@antv/g2";
import superHorizontal from "./SuperComponent";
export default {
  name: "chart",
  data() {
    return superHorizontal.rootComponent.data();
  },
  props: superHorizontal.rootComponent.props,
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart: function() {
      console.log("XXXXSSSS", this.chartId);
      // Step 1: 创建 Chart 对象
      const chart = new Chart({
        container: this.chartId, // 指定图表容器 ID
        autoFit: true,
        height: 400,
        padding: [40, 40]
      });

      // Step 2: 载入数据源
      chart.data(this.chartData);

      // Step 3: 创建图形语法，绘制柱状图
      chart.interval().position("genre*sold");

      // Step 4: 渲染图表
      chart.render();
    }
  }
};
</script>

<style scoped>
</style>