<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.dataStr)
        data2.push(x.preferPrice)
      })
      let option = {
        backgroundColor: "#0abb87", //"#19133e6e",
        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: -45,
          right: -45,
          top: 0,
          bottom: 0
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "none",
            snap: true,
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        series: [
          {
            name: this.$t('fnc.shoukuan'),
            type: "line",
            smooth: false,
            symbol: "circle",
            symbolSize: 4,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#1EA87F"
                },
                areaStyle: {
                  color: "#20CC99"
                },
                color:"#1EA87F"
              }
            },
            data: data2
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>