surveyMaker/src/components/HistogramHorizontals.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,
        autoFit: true,
        height: 500
      });
      chart.data(this.chartData);

      chart.axis("time", {
        tickLine: null
      });

      // chart.legend({
      //   position: "bottom"
      // });

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

      chart
        .interval()
        .adjust("stack")
        .position("time*value")
        .color("type", ["#F3CC1C", "#1890ff", "#6190FF", "#36CFAA"]);

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

<style scoped>
</style>