<template>
  <el-row>
    <div :id="time" ref="echartD" style="width:100%;height:300px;margin-left:-2%;"></div>
  </el-row>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: ["resData1","resData2"],
  data() {
    return {
      time:undefined
    };
  },
  watch: {
    resData1() {
      this.getData();
    }
  },
  created(){
    this.time = "index" + Date.parse(new Date())
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let myChart = echarts.init(document.getElementById(this.time));
      let data = this.resData1;
      console.log(this.resData1)
      let series = []; //定义一个数组变量用于存放配置
      for (var i = 0; i < data.length -1; i++) {
        series.push({
            name: data[0].name,
            type: "line",
            smooth: true,
            // 单独修改当前线条的样式
            lineStyle: {
                color: this.resData2.color1,
                width: 2,
            },
            areaStyle: {
                // 渐变色，只需要复制即可
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, [{
                            offset: 0,
                            color: this.resData2.color2, // 渐变色的起始颜色
                        },
                        {
                            offset: 0.8,
                            color: this.resData2.color3, // 渐变线的结束颜色
                        },
                    ],
                    false
                ),
                // 影子效果
                shadowColor: "rgba(0, 0, 0, 0.1)",
            },
            // 设置拐点形状
            symbol: "circle",
            // 拐点大小
            symbolSize: 8,
            // 刚开始时不显示拐点，鼠标经过才显示
            showSymbol: false,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: this.resData2.color1,
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
            },
            data: data[0].data
        });

      }
      let option = {
        tooltip: {
            trigger: "axis",
        },
        legend: {
            data: data[0].name,
            bottom: "0",
            textStyle: {
                color: this.resData2.color1,
                fontSize: "12",
            },
        },
        grid: {
            left: "10",
            right: "10",
            top: "30",
            bottom: "30",
            containLabel: true,
        },
        xAxis: [{
            type: "category",
            boundaryGap: false,
            data: data[1],
            axisLabel: {
                textStyle: {
                    color: "rgba(255, 255, 255, .3)",
                    fontSize: 12,
                },
                axisLine: {
                    lineStyle: {
                        color: "#000",
                    },
                },
            },
        }, ],
        yAxis: [{
            type: "value",
            // 去除刻度线
            axisTick: {
                show: false,
            },
            // y轴的线颜色
            axisLine: {
                lineStyle: {
                    color: "#444",
                    opacity: .3
                },
            },
            // 文字的颜色
            axisLabel: {
                textStyle: {
                    color: "rgba(255, 255, 255, .6)",
                    fontSize: 12,
                },
            },
            // 修改分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "#aaa", // 分割线颜色
                    opacity: .5
                }
            },
        }, ],
        series: series,
    };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    }
  }
};
</script>

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