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

<script>
  export default {
    props:['echartData'],
    data() {
      return {
      };
    },
    mounted() {
      this.drawLine();

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

        // 指定图表的配置项和数据
        var option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            textStyle: {
              color: "#e4eadb"
            }
          },
          toolbox: {
            feature: {
              magicType: { show: true, type: ['line', 'bar'] },
              saveAsImage: {}
            }
          },
          grid: {
            top: 'middle',
            left: '3%',
            right: '4%',
            bottom: '3%',
            height: '80%',
            containLabel:true
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: "#999"
              }
            },
            data:this.echartData.map(item => item.name)
          },
          yAxis: {
            type: 'value',
            splitNumber: 5,
            nameGap:55,
            max: 100,
            min:0,
            splitLine: {
              show:true,
              lineStyle: {
                color: '#595959'
              }
            },
            nameTextStyle: {
              color: "#999"
            },
            splitArea: {
              show: false
            },
          },
          series: [
            {
              name: '进线率',
              type: 'line',
              color: "#42beda",
              itemStyle: {
                color: '#42beda',
                borderColor: "#efefef",
                borderWidth:3
              },
              symbolSize: 10,
              lineStyle: {
                normal: {
                  width: 5,
                  color: "#42beda",
                  shadowColor: 'rgba(245,128,128, 0.5)',
                  shadowBlur: 10,
                  shadowOffsetY: 7
                }
              },
              data:this.echartData.map(item => item.entryRate),
              smooth: true
            },
          ]
        };


        // 绘制图表
        myLine.setOption(option);
        window.addEventListener("resize", function () {
          myLine.resize();
        });
      }
    }
  };
</script>

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

  #myEntryLine {
    width: 100%;
    height: 600px;
    margin: 0 auto;
    display: block;
    padding-top:20px;
  }
</style>
