<template>
  <div :id="id" style="height:50%"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "LineEchart",
  props: {
    title: {
      type: String,
    },
    id: {
      type: String,
      default: "main",
    },
    type: {
      type: String,
      default: "line",
    },
    color: {
      type: Array,
      default: function () {
        return ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF',"#005aff", "pink", "#08b551", "red", "#f0b551", "black"];
      },
    },
    param: {
      type: Object,
      default: function () {
        return {
          width: "1",
          legendData: ["Email", "Union Ads", "Video Ads"],
          xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          yData: [
            [120, 132, 101, 134, 90, 230, 210],
            [220, 232, 301, 434, 290, 230, 210],
            [920, 832, 501, 234, 590, 230, 210],
          ],
        };
      },
    },
  },
  data() {
    return {};
  },

  ready() {
    // this.initData();
  },
  watch:{
    'param'(val){
      if(val){
        this.initData();
      }
    }
  },
  methods: {
    //组织单个Series
    getSeries(name, width, color, data) {
      return {
        name: name,
        type: "line",
        lineStyle: {
          width: width,
          type: "line",
        },
        data: data,
      };
    },
    setSeries() {
      let arr = [];
      for (let i = 0; i < this.param.yData.length; i++) {
        let serie = this.getSeries(
          this.param.legendData[i],
          this.param.width,
          this.color[i],
          this.param.yData[i]
        );
        arr.push(serie);
      }
      return arr;
    },
    initData() {
      var chartDom = document.getElementById(this.id);
      var myChart = echarts.init(chartDom);
      this.option = {
        title: {
          text: this.title,
        },
        tooltip: {
          trigger: "axis",
          position: function (pos, params, dom, rect, size) {
            let yPos = '20%'
            let xPos = 0
            if (pos[0] < size.viewSize[0] / 2) {
              xPos = pos[0] + 10
            } else {
              xPos = pos[0] - dom.offsetWidth - 10
            }
            return [xPos, yPos]
          },
          trigger: 'axis',
          extraCssText: 'width:auto;height:auto;border:1px solid #015999;background:#032f53 ',
        },
        legend: {
          data: this.param.legendData,
          bottom: '0%',
          left: 'center',
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "13%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.param.xData,
        },
        yAxis: {
          type: "value",
        },
        series: this.setSeries(),
      };

      this.option && myChart.setOption(this.option);
    },
  },
};
</script>

<style scoped></style>
