<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
      var dataAxis = [];
      var data2 = [];
      this.data.forEach(x=>{
        dataAxis.push(x.Month+'月')
        data2.push(x.SaleMoney)
      })
      let option = {
        title: {
          show: false
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            textStyle: {
              color: "#DADADA",
              fontSize: 12
            },
            margin: 10,
            interval: 0,
            show: true
          },
          type: "category",
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: ["#12397C"]
            }
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: ["#12397C"]
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#DADADA",
              fontSize: 12
            },
            show: true
          },
          splitLine: {
            show: false
          },
          scale: true
        },
        grid: {
          left: "68",
          right: "0",
          top: "10",
          bottom: "25"
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "none",
            snap: true,
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4487F0" },
                  { offset: 0.3, color: "#4487F0" },
                  { offset: 1, color: "#B0D0F8" }
                ])
              }
            },
            barWidth: 18,
            data: data2,
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>