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

<script>
import G2 from "@antv/g2";
import DataSet from "@antv/data-set";
export default {
  data () {
    return {}
  },
  mounted() {
    this.rander();
  },
  props:['data'],
  watch: {
    data() {
      this.rander();
    }
  },
  methods: {
    rander() {
      var chart = new G2.Chart({
        container: "node5",
        forceFit: true,
        height: 282,
        padding: [80, 40, 30, 40]
      });
      chart.source(this.data);

      chart.axis("value", {
        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("day", {
        line: {
          lineWidth: 1, // 设置线的宽度
          stroke: "#a4b6c5" // 设置线的颜色
        },
        grid: null,
        label: {
          textStyle: {
            fill: "#a4b6c5", // 文本的颜色
            fontSize: "12", // 文本大小
            textBaseline: "middle" // 文本基准线，可取 top middle bottom，默认为middle
          }
        }
      });
      chart.tooltip({
        crosshairs: true
      });

      chart
        .line()
        .position("day*value")
        .color("type", function(val) {
          return "#da70d6";
        })
        .size(2)
        .shape("smooth");
      chart
        .point()
        .position("day*value")
        .size(3)
        .shape("circle")
        .label(
          "day*value",
          function(day, value) {
            return value;
          },
          {
            textStyle: {
              fill: "#fff",
              fontSize: 12,
              textAlign: "left"
            }
          }
        )
        .style({
          fill: "#eee",
          fontSize: 12,
          stroke: "#da70d6",
          lineWidth: 1
        });

      chart.guide().html({
        position: ["5%", "-35%"],
        html:
          '<div class="chart5-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: ["102%", "100%"],
        html:
          '<div class="chart4-title"><p class="title">日期</p></div>'
      });
      chart.render();
    }
  }
};
</script>

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