<template>
  <el-row>
    <div
      id="line"
      style="width:100%;height:160px;"
    ></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("line"));
      let data = this.resData;
      let series = []; //定义一个数组变量用于存放配置
      let colorShown = [
        {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#4DB5EB",
            },
            {
              offset: 1,
              color: "#FBFEFF",
            },
          ]),
        },
      ];
      series.push(
        {
          name: "人流量",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 2,
          },
          showSymbol: false,
          areaStyle: colorShown[0],
          emphasis: {
            focus: "series",
          },
        data: data[1],
      });
      let option = {
        color: "#4DB5EB",
        grid: {
          bottom: "0",
          right: "10",
          left: "10",
          top: "35",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          confine: true,
          textStyle: {
            fontSize: 10,
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data[0],
          axisLabel: {
            color: "#DDDDDD",
          },
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
            },
          },
          axisTick: {
            show: false,
          },
          textStyle: {
            fontSize: 10,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#DDDDDD",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#DDDDDD",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
          textStyle: {
            fontSize: 10,
          },
        },
        series: series,
      };
      option && myChart.setOption(option);
      setTimeout(function() {
        window.onresize = function() {
          myChart.resize();
        };
      }, 200);
    },
  },
};
</script>

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