<template>
  <div style="width: 100%; height: 100%"></div>
</template>
<script>
// import { deepClone } from "@/utils/js/common.js";
// import lodash from "lodash";
export default {
  props: {
    info: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => {},
    },
  },
  watch:{
	  info(){
		  this._initEcharts();
	  }
  },
  mounted() {
    this._initEcharts();
  },
  methods: {
    _initEcharts() {
      const NAME = [];
      const VALUE = [];
      const myChart = this.$echarts.init(this.$el);
      const echarts = this.$echarts;
      this.info.forEach((item) => {
        NAME.push(item.dateStr);
        VALUE.push(item.nums);
      });
      let option = {
        legend: {
          icon: "circle",
          bottom: "5%",
          right: "center",
          itemWidth: 10,
          itemGap: 10,
          textStyle: {
            color: "#556677",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          top: "15%",
          bottom: "15%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              // color: "rgba(50, 216, 205, 1)",
              color: "#A1A7B3",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: 1,
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#A1A7B3",
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },

            data: NAME,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            padding: 5,
            // max: 1000,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#A1A7B3",
                type: "dashed",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: "#A1A7B3",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            // name: "预约次数",
            type: "line",
            symbolSize: 5,
            // smooth: true,
            // showSymbol: false,
            itemStyle: {
              normal: {
                color: "#6093F9",
                lineStyle: {
                  color: "#6093F9",
                  width: 2,
                },
              },
            },
            areaStyle: {
              normal: {
                color: "#BDD2FD",
              },
            },
            // data: [140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240],
            data: VALUE,
          },
        ],
      };

      // if (this.option) {
      //   option = lodash.defaultsDeep(deepClone(this.option), option);
      // }
      myChart.setOption(option, true);
    },
  },
};
</script>