<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: {
        backgroundColor: "#fff",
        title: {
          text: "",
          left: 20,
          textStyle: {
            fontSize: 16,
            fontWeight: 500,
            color: "#414957"
          },
          top: 12
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff",
          textStyle: {
            color: "#333333"
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: false // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: "box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);",
          confine: true,
          formatter: ""
        },
        legend: {
          top: 12,
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10,
          data: []
        },
        color: [],
        grid: {
          x: 50,
          x2: 30,
          y2: 5,
          containLabel: true
        },
        xAxis: {
          show: false
        },
        yAxis: [
          {
            type: "category",
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              interval: "0",
              textStyle: {
                fontSize: 12,
                color: "#687284"
              }
            },
            data: []
          }
        ],
        series: [
          {
            name: "",
            type: "funnel",
            barWidth: 12,
            x : '50%',//旋转？ 可以调成金字塔
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "left",
                color: "#687284",
                fontSize: "10",
                formatter: function(params) {
                  return params.data * -1;
                }
              }
            },
            data: [],
            percent: [],
            itemStyle: {
              color: "#5B8FF9"
            }
          },
          {
            name: "",
            type: "funnel",
            barWidth: 12,
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#687284",
                fontSize: "10"
              }
            },
            data: [],
            itemStyle: {
              color: "#5AD8A6"
            },
            percent: []
          }
        ]
      }
    };
  },
  methods: {
    initEchart(response) {
      let xTitle = response.xtitle;
      let data = response.data;
      //提取x轴
      let temXdata = [];
      xTitle.forEach(items => {
        temXdata.push(items.split("::")[0]);
      });
      let newXtitle = this.removeRepeatForArr(temXdata);
      //提取分组
      let temMdata = [];
      xTitle.forEach(items => {
        temMdata.push(items.split("::")[1]);
      });
      let newMtitle = this.removeRepeatForArr(temMdata);
      //组装数据
      let newdata = [];
      let newPercentage = [];
      newMtitle.forEach((items, index) => {
        newdata[index] = [];
        newPercentage[index] = [];
        data.forEach(ite => {
          if (Object.keys(ite)[0].split("::")[1] == items) {
            newdata[index].push(Object.values(ite)[0]["例数"]);
            newPercentage[index].push(Object.values(ite)[0]["比例"]);
          }
        });
      });
      //设置提示框
      this.option.tooltip.formatter = function(params) {
        let str = "";
        str = params[0].axisValueLabel + "<br/>";
        for (let i = 0; i < params.length; i++) {
          str +=
            params[i].seriesName +
            "：" +
            Math.abs(params[i].data) +
            "例(" +
            (newPercentage[i][params[i].dataIndex] * 100).toFixed(2) +
            "%)" +
            "<br/>";
        }
        return str;
      };

      this.option.series[0].data = [];
      this.option.series[1].data = [];
      this.option.yAxis[0].data = newXtitle;
      this.option.series[0].data = this.exchangeNegative(newdata[0]);
      this.option.series[1].data = newdata[1];
      this.option.series[0].percent = newPercentage[0];
      this.option.series[1].percent = newPercentage[1];
      this.option.series[0].name = newMtitle[0];
      this.option.series[1].name = newMtitle[1];

      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();
    },
    //数据去重
    removeRepeatForArr(arr) {
      return arr.filter((item, index) => {
        return arr.indexOf(item) === index;
      });
    },
    //转化成负数
    exchangeNegative(arr) {
      let newarr = [];
      arr.forEach(items => {
        newarr.push(-items);
      });
      return newarr;
    }
  },
  mounted() {
    
  },
  watch: {
    EchartsData(newValue, oldValue) {
      this.initEchart(newValue);
    }
  }
};
</script>
