<!-- 水平方向的柱状图 -->
<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,
        padding: [40, 40]
      });
      // Step 2: 载入数据源
      this.chart.data(this.chartData);

      this.chart.legend({
        position: "bottom"
      });
      this.chart.axis("genre", {
        labels: {
          autoRotate: false, // 文本是否允许自动旋转
          label: {
            textAlign: "center", // 文本对齐方向，可取值为： left center right
            fill: "#404040", // 文本的颜色
            fontSize: "12", // 文本大小
            fontWeight: "bold" // 文本粗细
          }
        }
      });
      this.chart.tooltip({
        shared: true,
        showMarkers: false
      });
      this.chart.interaction("active-region");
      // Step 3: 创建图形语法，绘制柱状图
      this.chart
        .interval()
        .adjust("stack")
        .position("genre*sold");

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

<style scoped>
</style>
