<!-- 水平方向的柱状图 -->
<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,
        autoFit: true,
        height: 500
      });
      this.chart.data(this.chartData);

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

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

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

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

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

<style scoped>
</style>
