<template>
  <div id="node9"/>
</template>

<script>
import G2 from "@antv/g2";

export default {
  mounted() {
    this.rander();
  },
  methods: {
    rander() {
      var data = [
        {
          type: "公告",
          sales: 500
        },
        {
          type: "活动",
          sales: 400
        },
        {
          type: "话题",
          sales: 1000
        }
      ];
      var chart = new G2.Chart({
        container: "node9",
        forceFit: true,
        height: 282,
        padding: [80, 20, 30, 40]
      });
      chart.source(data);
      chart.scale("", {
        tickInterval: 200
      });
      chart.guide().html({
        position: ["5%", "-35%"],
        html:
          '<div class="chart9-title"><p class="title">已发布内容统计</p></div>'
      });
      chart.guide().html({
        position: ["1%", "-22%"],
        html: '<div class="chart4-title"><p class="title">数量（个）</p></div>'
      });

      chart.axis("sales", {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: "#a4b6c5" // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            textAlign: "end", // 文本对齐方向，可取值为： start middle end
            fill: "#a4b6c5", // 文本的颜色
            fontSize: "12", // 文本大小
            textBaseline: "middle" // 文本基准线，可取 top middle bottom，默认为middle
          }
        }
      });
      chart.axis("type", {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: "#a4b6c5" // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            fill: "#a4b6c5", // 文本的颜色
            fontSize: "12" // 文本大小
          }
        }
      });
      chart
        .interval()
        .position("type*sales")
        .color("type", function(val) {
          if (val === "公告") {
            return "#53F9FF";
          } else if (val === "活动") {
            return "#FF6666";
          }
          return "#3F688D";
        })
        .label(
          "type*sales",
          function(type, sales) {
            return sales;
          },
          {
            textStyle: {
              fill: "#fff",
              fontSize: 12
            }
          }
        );
      chart.render();
    }
  }
};
</script>

<style lang="scss">
.chart9-title {
  .title {
    font-size: 13px;
    color: #a4b6c5;
  }
}
.chart-right-btn {
  font-size: 13px;
  color: #a4b6c5;
}
</style>
