<template>
  <div :id="id" style="width:100%;height:100%;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    id: String,
    EchartsData: {},
    title: String,
    title: String
  },
  data() {
    return {
      option: {
        title: {
          text: "",
          top: "15",
          left: "5%",
          padding: 0,
          textStyle: {
            color: "#000",
            fontStyle: "normal",
            fontSize: 14
          }
        },
        color: [],
        tooltip: {
          // extraCssText:  'box-shadow: 3px 3px 20px rgba(15,118,188,1)',
          trigger: "axis",
          backgroundColor: "#fff",
          textStyle: {
            color: "#333333"
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            shadowStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(5,61,120,0.5)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(24,61,133,0.5)" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          },
          extraCssText: "box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);",
          confine: true
        },
        legend: {
          show: false,
          data: [],
          top: 12,
          textStyle: {
            color: "#606264"
          },
          itemWidth: 12,
          itemHeight: 10
        },
        grid: {
          left: "5%",
          top: "10%",
          bottom: "5%",
          right: "5%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: true
            },
            axisLine: {
              lineStyle: {
                color: "#1056A0"
              }
            },
            triggerEvent: "true",
            data: [],
            splitLine: { show: false },
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 0,
              textStyle: {
                color: "#606264",
                fontSize: 12
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          splitLine: {
            show: false
          },
          name: "",
          show: true,
          nameTextStyle: {
            show: true
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#606264"
            }
          }
        },

        series: []
      }
    };
  },
  methods: {
    initEchart(response) {
      let xTitle = this.sortXdata(response.xtitle);
      let data = response.data;
      let newData = this.exchangeData(data, xTitle);
      this.option.series = [];

      this.option.yAxis.min = parseInt((Math.min.apply(null, newData) - 20) / 10) * 10

      this.option.series = [
        {
          name: "",
          type: "line",
          data: newData,
          lineStyle: {
            color: "#5AD8A6"
          },
          itemStyle: {
            color: "#5AD8A6"
          }
        }
      ];

      this.option.title.text = this.title;
      this.option.xAxis[0].data = xTitle;
      var chartsDiv = document.getElementById(this.id);
      var Charts = echarts.init(chartsDiv);
      Charts.clear();
      Charts.setOption(this.option);
      Charts.resize();
    },
    //转数据格式
    exchangeData(data, xTitle) {
      let newData = [];
      //直方图的数据格式转换
      xTitle.forEach((items, index) => {
        newData.push(Object.values(Object.values(data[index][items])[0])[0]);
      });

      return newData;
    },
    //x轴转年份
    textExMonth(list) {
      let newlist = [];
      list.forEach((items, index) => {
        switch (items) {
          case "1.0":
            newlist[index] = "一月";
            break;
          case "2.0":
            newlist[index] = "二月";
            break;
          case "3.0":
            newlist[index] = "三月";
            break;
          case "4.0":
            newlist[index] = "四月";
            break;
          case "5.0":
            newlist[index] = "五月";
            break;
          case "6.0":
            newlist[index] = "六月";
            break;
          case "7.0":
            newlist[index] = "七月";
            break;
          case "8.0":
            newlist[index] = "八月";
            break;
          case "9.0":
            newlist[index] = "九月";
            break;
          case "10.0":
            newlist[index] = "十月";
            break;
          case "11.0":
            newlist[index] = "十一月";
            break;
          case "12.0":
            newlist[index] = "十二月";
            break;
        }
      });
      return newlist;
    },
    //对数据进行排序处理
    sortData(list) {
      let newlist = [];
      list.forEach((items, index) => {
        if (Object.keys(items)[0] == "1.0") {
          newlist[0] = items;
        } else if (Object.keys(items)[0] == "2.0") {
          newlist[1] = items;
        } else if (Object.keys(items)[0] == "3.0") {
          newlist[2] = items;
        } else if (Object.keys(items)[0] == "4.0") {
          newlist[3] = items;
        } else if (Object.keys(items)[0] == "5.0") {
          newlist[4] = items;
        } else if (Object.keys(items)[0] == "6.0") {
          newlist[5] = items;
        } else if (Object.keys(items)[0] == "7.0") {
          newlist[6] = items;
        } else if (Object.keys(items)[0] == "8.0") {
          newlist[7] = items;
        } else if (Object.keys(items)[0] == "9.0") {
          newlist[8] = items;
        } else if (Object.keys(items)[0] == "10.0") {
          newlist[9] = items;
        } else if (Object.keys(items)[0] == "11.0") {
          newlist[10] = items;
        } else if (Object.keys(items)[0] == "12.0") {
          newlist[11] = items;
        }
      });
      return newlist;
    },
    //x轴排除
    sortXdata(list) {
      let newlist = [];
      list.forEach((items, index) => {
        if (items == "1.0") {
          newlist[0] = items;
        } else if (items == "2.0") {
          newlist[1] = items;
        } else if (items == "3.0") {
          newlist[2] = items;
        } else if (items == "4.0") {
          newlist[3] = items;
        } else if (items == "5.0") {
          newlist[4] = items;
        } else if (items == "6.0") {
          newlist[5] = items;
        } else if (items == "7.0") {
          newlist[6] = items;
        } else if (items == "8.0") {
          newlist[7] = items;
        } else if (items == "9.0") {
          newlist[8] = items;
        } else if (items == "10.0") {
          newlist[9] = items;
        } else if (items == "11.0") {
          newlist[10] = items;
        } else if (items == "12.0") {
          newlist[11] = items;
        }
      });
      return newlist
    }
  },
  mounted() { },
  watch: {
    EchartsData(newValue, oldValue) {
      this.initEchart(newValue);
    }
  }
};
</script>
