<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
      var dataAxis = [
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19"
      ];
      var data = [220, 182, 191, 234, 290, 330, 310, 100, 30, 60, 650];
      var data2 = [130, 202, 101, 500, 10, 220, 310, 98, 17, 52, 360];
      var yMax = 500;
      var dataShadow = [];
      for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }
      let option = {
        title: {
          show: false
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            textStyle: {
              color: "#79778a",
              fontFamily: "DIN"
            },
            margin: 10,
            interval: 0
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: "#272938",
              fontFamily: "DIN"
            }
          },
          splitLine: {
            show: false
          },
          interval: 350
        },
        grid: {
          left: "30",
          right: "0",
          top: "10",
          bottom: "25"
        },
        legend: {
          tooltip: {
            show: true
          },
          itemWidth:10,
          symbol: "none",
          textStyle:{
            fontSize:'12px',
            color:'#272938'
          },
          selectedMode:false
        },
        series: [
          {
            name: "同行登录",
            type: "line",
            smooth: true,
            symbol: "none",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#d32f62",
                  shadowBlur: 10,
                  shadowColor: "#d32f62"
                }
              }
            },
            data: data
          },
          {
            name: "同行浏览与分享",
            type: "line",
            smooth: true,
            symbol: "none",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#2a9e9e",
                  shadowBlur: 10,
                  shadowColor: "#2a9e9e"
                }
              }
            },
            data: data2
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>
