<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
  },
  data() {
    return {
      option: {
        title: {
          text: "",
          left: "5%",
          textStyle: {
            color: "#000",
            fontStyle: "normal",
            fontSize: 14,
            fontWeight: 540
          }
        },
        grid: {
          left: "5%",
          top: "10%",
          bottom: "5%",
          right: "5%",
          z: 22,
          containLabel: true
        },
        legend: {
          y: "10%",
          data: []
        },
        tooltip: {
          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,
          formatter: ""
        },
        xAxis: {
          type: "category",
          data: [],
          boundaryGap: true,
          nameGap: 30,
          splitArea: {
            show: true
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          name: "",
          splitArea: {
            show: false
          },
          min:30
        },
        series: []
      }
    };
  },
  methods: {
    initEchart(response) {
      let xTitle = response.xtitle;
      let data = response.data;

      let showData = [];
      data.forEach((items, index) => {
        showData[index] = [];
        let obj = Object.values(items)[0];
        for (let i in obj) {
          if (i == "5分位值") {
            showData[index][0] = obj[i];
          } else if (i == "25分位值") {
            showData[index][1] = obj[i];
          } else if (i == "中位值") {
            showData[index][2] = obj[i];
          } else if (i == "75分位值") {
            showData[index][3] = obj[i];
          } else if (i == "95分位值") {
            showData[index][4] = obj[i];
          }
        }
      });

      let datas = showData.join(",").split(",");


      this.option.series = [];
      this.option.series.push({
        name: "",
        type: "boxplot",
        data: showData,
        itemStyle: {
          borderColor: "#5AD8A6"
        }
      });

      this.option.tooltip.formatter = function(param) {
        let ar = "";
        let paramtext = [
          "5分位值",
          "25分位值",
          "中位值",
          "75分位值",
          "95分位值"
        ];
        ar = param[0].axisValueLabel + "<br/>";
        let paramdata = param[0].data;
        paramdata.forEach((items, index) => {
          if (index != 0) {
            ar += paramtext[index - 1] + ":" + items + "<br/>";
          }
        });

        return ar;
      };
      this.option.xAxis.data = xTitle;
      this.option.title.text = this.title;
      var chartsDiv = document.getElementById(this.id);
      var Charts = echarts.init(chartsDiv);
      Charts.clear();
      Charts.setOption(this.option);
      Charts.resize();
    }
  },
  mounted() {},
  watch: {
    EchartsData(newValue, oldValue) {
      this.initEchart(newValue);
    }
  }
};
</script>
