<template>
  <div class="myEntryLine"></div>
</template>

<script>
  export default {
    name: "hello",
    props: ["poperData", "lineColor", "isLoad"],
    data() {
      return {
        isLoadLine:false
      };
    },

    methods: {
      drawLine(datas) {
        // 基于准备好的dom，初始化echarts实例
        let myLine = this.$echarts.init(document.getElementsByClassName("myEntryLine")[0], 'chalk');

        // 指定图表的配置项和数据
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          xAxis: {
            type: 'category',
            show: true,
            axisLabel:{
              show:false
            },
            axisLine: {
              symbol: ['none', 'arrow'],
              symbolSize: 5,
              lineStyle: {
                color:"#808080"
              }
            }
          },
          yAxis: {
            type: 'value',
            show: true,
            axisLabel:{
              show:false
            },
            axisLine: {
              symbol: ['none', 'arrow'],
              symbolSize: 5,
              lineStyle: {
                color:"#808080"
              }
            }
          },
          grid: {
            //height:100,
            //width:100,
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel:true
          },
          series: [{
            name:"得分",
            data: datas,
            type: 'line',
            smooth: true,
            itemStyle: {
                color: this.lineColor,
                borderColor: "#efefef",
                borderWidth:2
              },
              symbolSize: 5,
          }]
        };



        // 绘制图表
        myLine.setOption(option);
        window.addEventListener("resize", function () {
          myLine.resize();
        });
      }
    },
    mounted() {
      if (this.isLoad) {
        this.isLoadLine = true;
        this.drawLine(this.poperData);
      }

    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .myEntryLine {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: block;
  }
</style>
