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(),
      chart: null
    };
  },
  props: superHorizontal.rootComponent.props,
  mounted() {
    this.drawChart();
  },
  watch: {
    chartData: function(val) {
      this.chart.changeData(val); // 动态更新数据
    }
  },
  methods: {
    drawChart: function() {
      console.log("XXXXSSSS", this.chartId);
      // Step 1: 创建 Chart 对象
      this.chart = new Chart({
        container: this.chartId, // 指定图表容器 ID
        autoFit: true,
        height: 400
      });

      this.chart.data(this.chartData);
      this.chart.scale("sold", { nice: true });
      this.chart.coordinate().transpose();
      this.chart.tooltip({
        showMarkers: false
      });
      this.chart.interaction("active-region");
      this.chart.interval().position("genre*sold");
      this.chart.render();
    }
  }
};
</script>

<style scoped>
</style>