<template>
  <div :id="ids" class="myLine"></div>
</template>

<script>
  export default {
    name: "hello",
    props:['ids','echartsData'],
    data() {
      return {
        y:[]
      };
    },
    created() {
      let echartsData = this.echartsData;
      let arr = [];
        arr.push(parseInt(echartsData.R1));
        arr.push(parseInt(echartsData.R2));
        arr.push(parseInt(echartsData.R3));
        arr.push(parseInt(echartsData.R4));
        arr.push(parseInt(echartsData.R5));
        arr.push(parseInt(echartsData.R6));
      this.y = arr;
    },
    mounted() {
      this.drawLine();
      let myLine = this.$echarts.init(document.getElementById(this.ids), 'chalk');
      this.initWidth = document.getElementById(this.ids).offsetWidth;
        let resize = {
            width: 500,
            height: 400
        };
         myLine.resize(resize);
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myLine = this.$echarts.init(document.getElementById(this.ids), 'chalk');

        // 指定图表的配置项和数据
        var option = {
           title: {
	              text: 'R1-R6作答曲线',
	              textStyle: {
	        	       align: 'center',
	                  color: '#333',
	                  fontSize: 14,
	              },
	              top: '3%',
	              left: '10%',
	          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            formatter: function (v) {
              return v[0].name + ':' + v[0].data + '%'
            }
          },
          legend: {
            textStyle: {
              color:"#e4eadb"
            }
          },
          gird: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              splitLine: {
                show: false,
                lineStyle: {
                   color: '#4c504a',
                }
              },
              axisLabel: {
                show: true, // 是否显示
                inside: false, // 是否朝内
                rotate: 0, // 旋转角度
                margin: 15, // 刻度标签与轴线之间的距离
                color: "#989898", // 默认取轴线的颜色,
                fontSize: 14
              },
              data:['R1','R2','R3','R4','R5','R6']
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                   color: '#ccc',
                }
              },
            }
          ],
          series: [
            {
              type: 'line',
              lineStyle: {
                color:"#66cc99"
              },
              itemStyle: {
                color: '#66cc99',
                borderColor: "#efefef",
                borderWidth:3
              },
              //areaStyle: {
              //  normal: {
              //      color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              //          offset: 0,
              //          color: 'rgba(37, 129, 27, 0.3)'
              //      }, {
              //          offset: 0.8,
              //          color: 'rgba(137, 119, 27, 0)'
              //      }], false),
              //      shadowColor: 'rgba(255, 255, 255, 0.2)',
              //      shadowBlur: 10
              //  }
              //},
              symbolSize: 10,
              data: this.y
            }
          ]
        };


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

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

  .myLine {
    width: 100%;
    height: 400px;
    margin: 20px auto;
    display: block;
  }
</style>
