<template>
  <el-row>
    <div id="index2" ref="echartD" style="width:100%;height:100%"></div>
  </el-row>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: ["resData"],
  data() {
    return {};
  },
  watch: {
    resData() {
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let myChart = echarts.init(document.getElementById("index2"));
      let data = this.resData;
      console.log(this.resData)
      let series = []; //定义一个数组变量用于存放配置
      for (var i = 0; i < data.length -1; i++) {
        series.push({
          name: data[i].name,
          type: "line",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(111,153,250,0.3)"
                  },
                  {
                    offset: 1,
                    color: "rgba(111,153,250,0)"
                  }
                ],
                false
              ),
              shadowColor: "rgba(111,153,250, 0.9)",
              shadowBlur: 20
            }
          },
          data: data[i].data
        });
      }
      let option = {
        legend: {
          itemGap: 20, // 图例每项之间的间隔。
          icon: "stack",
          padding: 0, // 图例内边距
          textStyle: {
            color: "#ccc",
            align: "center"
          }
        },
        color: ["#FF5801" , "#37FF01" ],
        grid: {
          bottom: "0",
          right: "10",
          left: "10",
          top: "35",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          confine: true,
          textStyle: {
            fontSize: 12
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data[2],
          axisLabel: {
            color: "#ccc"
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,130,255,.2)"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#ccc"
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "rgba(0,130,255,.2)"
            }
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)"
            }
          }
        },
        series: series
      };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    }
  }
};
</script>

<style lang="scss" scoped></style>
