<template>
  <div class="market-linechart">
    <e-charts
      :options="deptChartOption"
      style="width:100%;height:100%"
    ></e-charts>
  </div>
</template>

<script>
import ECharts from "vue-echarts/components/ECharts";
require("echarts/lib/chart/line");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legendScroll");
export default {
  components: { ECharts },
  props: {
    chartlist: Array
  },

  data() {
    return {
      deptChartOption: {},

      dateList: [],
      valueList: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  watch: {
    chartlist(value) {
      console.log(value);
      this.init();
    }
  },
  methods: {
    init() {
      this.dateList = this.chartlist.map(item => {
        return item.split("|")[5] - 0;
      });
      this.valueList = this.chartlist.map(item => {
        return item.split("|")[3] - 0;
      });

      this.deptChartOption = {
        // Make gradient line here

        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            dimension: 0,
            min: 0,
            max: this.dateList.length - 1
          }
        ],

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            data: this.dateList,
            show: false
          }
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            show: false
          }
        ],
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: false
        },

        series: [
          {
            type: "line",
            animation: false,
            symbol: "none",
            lineStyle: {
              width: 1
            },
            color: "#357ce1",
            areaStyle: {
              color: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#90b3f4"
                },
                {
                  offset: 1,
                  color: "#f1f3fd"
                }
              ])
            },
            data: this.valueList
          }
        ]
      };
    }
  }
};
</script>

<style lang="scss">
.market-line-chart {
}
</style>