<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;
      // let name1 = data[0].name
      // let name2 = data[1].name
      // console.log(name1,name2)
       let series = [
         {
            name: this.resData[0].name,
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

                 {
                    offset: 0,
                    color: 'rgb(255, 0, 135)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(135, 0, 157)'
                  }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: data[0].data
          },
          {
            name: this.resData[1].name,
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                    offset: 0,
                    color: 'rgb(128, 255, 165)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 191, 236)'
                  }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: data[1].data
          }
       ]; //定义一个数组变量用于存放配置
      // 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: "red"
      //             },
      //             {
      //               offset: 1,
      //               color: "blue"
      //             }
      //           ],
      //           false
      //         ),
      //         shadowColor: "rgba(111,153,250, 0.9)",
      //         shadowBlur: 20
      //       }
      //     },
      //     data: data[i].data
      //   });
      // }
      let option = {
        legend: {
          itemGap: 20, // 图例每项之间的间隔。
          icon: "stack",
          right: 20,
          top:6,
          padding: 0, // 图例内边距
          textStyle: {
            color: "#ccc",
            align: "center"
          }
        },
        title: {
          x:'center',
          text: data[3].name,
          textStyle:{ //设置主标题风格
            color:data[3].color,//设置主标题字体颜色
          },
        },
        color: ["#FF0087" , "#80FFA5" ],
        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: ["12：00", "13：00", "14：00", "15：00", "16：00", "17：00"],
          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>
