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

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

export default {
  mounted() {
    this.rander();
  },
  methods: {
    rander() {
      var data = [
        {
          type: "户主",
          sales: 500
        },
        {
          type: "家属",
          sales: 1000
        },
        {
          type: "租客",
          sales: 300
        }
      ];
      var chart = new G2.Chart({
        container: "node7",
        forceFit: true,
        height: 282,
        padding: [80, 20, 30, 40]
      });
      chart.source(data);
      chart.scale("", {
        tickInterval: 200
      });
      chart.scale("sales", {
        alias: "行数(万)"
      });
      chart.guide().html({
        position: ["5%", "-35%"],
        html:
          '<div class="chart7-title"><p class="title">注册用户总数</p></div>'
      });
        chart.guide().html({
        position: ["1%", "-22%"],
        html:
          '<div class="chart4-title"><p class="title">数量（个）</p></div>'
      });
   
      // chart.guide().html({
      //   position: ["90%", "-15%"],
      //   html: `<div class="chart-right-btn"><span>发布数量</span>&nbsp;<i class='el-icon-arrow-down'></i></div>`
      // });
      chart.axis("sales", {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: "#a4b6c5" // 设置线的颜色
        },
        title: {}, //

        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 "#6699FF";
          } else if (val === "家属") {
            return "#30e0e0";
          }
          return "#3cb371";
        })
        .label(
          "type*sales",
          function(type, sales) {
            return sales;
          },
          {
            textStyle: {
              fill: "#fff",
              fontSize: 12
            }
          }
        );
      chart.render();
    }
  }
};
</script>
<style lang="scss">
.chart7-title {
  .title {
    font-size: 13px;
    color: #a4b6c5;
  }
}
</style>

