<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);
      let dataAxis = [];
      let data2 = [];
      let textName = this.$t('pun.month')
      this.data.forEach(x=>{
        dataAxis.push(x.Month+textName)
        data2.push(x.GuestNum)
      })
      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
          }
        },
        yAxis: {
          axisLine: {
            show: true
          },
          axisTick: {
            show: true
          },
          axisLabel: {
            textStyle: {
              color: "#DADADA",
              fontSize: 12
            },
            show: true
          },
          splitLine: {
            show: false
          }
        },
        grid: {
          left: "38",
          right: "0",
          top: "10",
          bottom: "25"
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "none",
            snap: true,
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        series: [
          {
            type: "line",
            smooth: true,
            symbol: "none",
            left: "0",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#FD397A"
                },
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#CE448D" },
                    { offset: 1, color: "#CE448D00" }
                  ])
                },
                color: "#FD397A"
              }
            },
            data: data2
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>
