<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
  </div>
</template>
<script>
export default {
  props:{
    data:{
      type:Array,
      default:[]
    }
  },
  watch:{
    data:{
      handler: function (val, oldVal) {
        if (val) {
          this.init()
        }
      }
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
      var dataAxis = [];
      var data = [];
      this.data.forEach(x => {
        let name=x.lineName.replace(/出境/g,"")
        dataAxis.push(name)
        data.push(x.guestNum)
      });
      for (let j = 0; j < dataAxis.length; j++) {
        const x = dataAxis[j];
        let name = "";
        for (let i = 0; i < x.length; i++) {
          if (i != x.length - 1) name += x[i] + "\n";
          else name += x[i];
        }
        dataAxis[j] = name;
      }
      var yMax = 100;
      var dataShadow = [];
      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      let option = {
        title: {
          text: "",
          subtext: "",
          show: false
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            textStyle: {
              color: "#79778a",
              fontFamily:'pingfang'
            },
            margin:10,
            interval:0
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#272938"
            }
          },
          splitLine: {
            lineStyle:{
              color:'#272938',
              type :'dotted'
            }
          }
        },
        grid: {
          left: "30",
          right: "0",
          top: "10"
        },
        series: [
          {
            // For shadow
            type: "bar",
            itemStyle: {
              normal: { color: "#11172f", barBorderRadius: [5, 5, 0, 0] }
            },
            barGap: "-100%",
            barCategoryGap: "40%",
            data: dataShadow,
            animation: false,
            barWidth: 5
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4e5afd" },
                  { offset: 1, color: "#44c4ed" }
                ]),
                barBorderRadius: [5, 5, 0, 0]
              },
              emphasis: {
                color: "#44c4ed"
              }
            },
            barWidth: 5,
            data: data,
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>
