<template>
  <chart :options="graph()" class="graph" />
</template>

<script>
import { graphic } from "echarts/lib/export";
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          legend: {
            data: []
          },
          data: [],
          series: [{ data: [] }, { data: [] }]
        };
      }
    }
  },
  watch: {},
  data: () => ({}),
  mounted() {},
  methods: {
    graph() {
      let self = this;
      console.log(this.data.legend.data);
      console.log(this.data.data);
      return {
        color: ["#274fee", "#ef9433"],
        legend: {
          bottom: 0,
          left: "center",
          icon: "roundRect",
          itemWidth: 10,
          itemHeight: 10,
          data: self.data.legend.data||[],
          orient: "horizontal",
          backgroundColor: "#f4f7fc"
        },
        grid: {
          left: 20,
          right: 32,
          bottom: 25,
          top: 25,
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: self.data.data||[],
            axisLine: {
              lineStyle: {
                color: "#f2f2f2"
              }
            },
            axisLabel: {
              margin: 20,
              color: "#0d1847",
              textStyle: {
                fontSize: 12
              }
            },
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            },
            minInterval: 1,
            axisLine: {
              lineStyle: {
                color: "rgba(0, 0, 0, 0)"
              }
            },
            axisLabel: {
              color: "#a9aec0",
              textStyle: {
                fontSize: 12
              }
            },
            splitLine: {
              lineStyle: {
                color: "#f2f2f2",
                type: "solid"
              }
            }
          }
        ],
        series: [
          {
            name: self.data.series[0].name||'',
            type: "line",
            data: self.data.series[0].data||[],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: "#274fee",
              shadowColor: "rgb(39, 79, 238, 0.4)",
              shadowBlur: 5,
              shadowOffsetY: 8
            }
          },
          {
            name: self.data.series[1].name||'',
            type: "line",
            data: self.data.series[1].data||[],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color: "#ef9433",
              shadowColor: "rgb(239, 148, 51, 0.4)",
              shadowBlur: 5,
              shadowOffsetY: 8
            }
          }
        ]
      };
    }
  }
};
</script>
<style scoped>
.graph {
  width: 100%;
  height: calc(100% - 20px);
}
</style>