<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
  </div>
</template>
<script>
export default {
  props: ["MYdata"],
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
      var dataAxis = [];
      var data2 = [];
      this.MYdata.forEach((x) => {
        dataAxis.push(x.StartTime);
        data2.push(x.DueInMoney);
      });
      let option = {
        title: {
          show: false,
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            textStyle: {
              color: "#79778a",
              fontFamily: "DIN",
            },
            margin: 10,
            interval: 0,
            show: false,
          },
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#272938",
              fontFamily: "DIN",
            },
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "none",
            snap: true,
            label: {
              backgroundColor: "#FAB6B6",
            },
          },
        },
        series: [
          {
            name: "未收款",
            type: "bar",
            smooth: false,
            symbol: "circle",
            barBorderRadius: [10, 10, 10, 10],
            barWidth: 14,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "##409efe",
                },
                areaStyle: {
                  color: "#00C5C8",
                },
                color: "#409efe",
              },
            },
            data: data2,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>
