<template>
  <div class="data-all-wrap">
    <div class="chart" id="distributeChart" ref="distributeChart"></div>
    <div class="chart" id="recordChart" ref="recordChart"></div>
    <div class="chart" id="durationChart" ref="durationChart"></div>
    <div class="chart" id="certificateChart" ref="certificateChart"></div>
  </div>
</template>
<script>
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import echarts from "echarts";
import { setTimeout } from "timers";
let vm = null;
export default {
  props: {
    formInline: {
      type: Object
    },
    activeName: {
      type: String
    },
    organizationNum: {
      type: Number
    },
    organizationList: {
      type: Array
    }
  },
  data() {
    return {
      projectId: "",
      echartsData: {
        chart0: {},
        chart1: {},
        chart2: {},
        chart3: {},
      }
    };
  },
  created() {
    vm = this;
    vm.projectId = vm.getUrlSearch(window.location.href, "id");
    setTimeout(function() {
      vm.setDistributeChart();
      vm.setRecordChart();
      vm.setDurationChart();
      vm.setCertificateChart();
    }, 20);
  },
  mounted: function() {},
  methods: {
    updateResize() {
      this.$nextTick(function() {
        window.onresize = function() {
          vm.echartsData.chart0.resize();
          vm.echartsData.chart1.resize();
          vm.echartsData.chart2.resize();
          vm.echartsData.chart3.resize();
        };
      });
    },
    setDistributeChart() {
      let myChart = echarts.init(this.$refs.distributeChart);
      let option = {
        title: {
          text: "证书分布情况",
          x: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "horizontal",
          top: "",
          data: ["未获证人数占比", "获优秀人数占比", "获及格人数占比"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            data: [
              { value: 2200, name: "未获证人数占比" },
              { value: 1900, name: "获优秀人数占比" },
              { value: 1500, name: "获及格人数占比" },
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart0 = myChart;
      vm.updateResize();
    },
    setRecordChart() {
      let myChart = echarts.init(this.$refs.recordChart);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            let relVal = params[0].name + "人数：";
            let value = 0;
            for (let i = 0, l = params.length; i < l; i++) {
              value += params[i].value;
            }
            relVal += value + "人";
            for (let j = 0, l = params.length; j < l; j++) {
              relVal +=
                "<br/>" +
                params[j].seriesName +
                "占比： " +
                (
                  (100 * parseFloat(params[j].value)) /
                  parseFloat(value)
                ).toFixed(2) +
                "%";
            }
            return relVal;
          }
        },
        legend: {
          data: ["未获证人数", "获优秀人数", "获及格人数"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["博士", "硕士", "本科", "大专", "中专及以下", "其他"]
        },
        yAxis: {
          type: "value",
          name: "人数 (个)"
        },
        series: [
          {
            name: "未获证人数",
            type: "bar",
            stack: "总量",
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: [1, 302, 301, 334, 390, 330]
          },
          {
            name: "获优秀人数",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: [120, 132, 101, 134, 90, 230]
          },
          {
            name: "获及格人数",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideRight"
              }
            },
            data: [220, 182, 191, 234, 290, 330]
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart1 = myChart;
      vm.updateResize();
    },
    setDurationChart() {
      let myChart = echarts.init(this.$refs.durationChart);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        dataZoom: {
          show: true,
          start: 0,
          end: 30
        },
        xAxis: [
          {
            axisLabel: {
              interval: 0,
              rotate: 45
            },
            type: "category",
            data: [
              "北京市",
              "天津市",
              "河北省",
              "山西省",
              "内蒙古自治区",
              "辽宁省",
              "吉林省",
              "黑龙江省",
              "上海市",
              "江苏省",
              "浙江省",
              "安徽省",
              "福建省",
              "江西省",
              "山东省",
              "河南省",
              "湖北省",
              "湖南省",
              "广东省",
              "广西壮族自治区",
              "海南省",
              "重庆市",
              "四川省",
              "贵州省",
              "云南省",
              "西藏自治区",
              "陕西省",
              "甘肃省",
              "青海省",
              "宁夏回族自治区",
              "新疆维吾尔自治区"
            ],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "完成时长 (天)"
          }
        ],
        series: [
          {
            name: "时长",
            type: "bar",
            barWidth: "60%",
            data: [
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390
            ],
            label: {
              show: true,
              position: "top",
              formatter: "{c}" //这是关键，在需要的地方加上就行了
            }
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart2 = myChart;
      vm.updateResize();
    },
    setCertificateChart() {
      let myChart = echarts.init(this.$refs.certificateChart);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          },
          formatter: function(params) {
            let relVal = "";
            for (let j = 0, l = params.length; j < l; j++) {
              relVal += params[j].seriesName + "： " + params[j].value;
              if (j === 2) {
                relVal += "%";
              } else {
                relVal += "<br/>";
              }
            }
            return relVal;
          }
        },
        dataZoom: {
          show: true,
          start: 0,
          end: 30
        },
        legend: {
          data: ["参与人数", "完成人数", "完成比例"]
        },
        xAxis: [
          {
            axisLabel: {
              interval: 0,
              rotate: 45
            },
            type: "category",
            data: [
              "北京市",
              "天津市",
              "河北省",
              "山西省",
              "内蒙古自治区",
              "辽宁省",
              "吉林省",
              "黑龙江省",
              "上海市",
              "江苏省",
              "浙江省",
              "安徽省",
              "福建省",
              "江西省",
              "山东省",
              "河南省",
              "湖北省",
              "湖南省",
              "广东省",
              "广西壮族自治区",
              "海南省",
              "重庆市",
              "四川省",
              "贵州省",
              "云南省",
              "西藏自治区",
              "陕西省",
              "甘肃省",
              "青海省",
              "宁夏回族自治区",
              "新疆维吾尔自治区"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "人数",
            axisLabel: {
              formatter: "{value} "
            }
          },
          {
            type: "value",
            name: "比例",
            min: 0,
            max: 100,
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            name: "参与人数",
            type: "bar",
            data: [
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390,
              330,
              220,
              10,
              52,
              200,
              334,
              390
            ],
            label: {
              show: true,
              position: "top",
              formatter: "{c}" //这是关键，在需要的地方加上就行了
            }
          },
          {
            name: "完成人数",
            type: "bar",
            data: [9, 8, 100, 200, 200, 55, 10],
            label: {
              show: true,
              position: "top",
              formatter: "{c}" //这是关键，在需要的地方加上就行了
            }
          },
          {
            name: "完成比例",
            type: "line",
            yAxisIndex: 1,
            data: [2, 22, 32, 41, 61, 10, 20, 23, 55, 67, 91, 6],
            label: {
              show: true,
              position: "top",
              formatter: "{c}%" //这是关键，在需要的地方加上就行了
            }
          }
        ]
      };
      myChart.setOption(option);
      vm.echartsData.chart3 = myChart;
      vm.updateResize();
    }
  }
};
</script>
<style lang="scss">
.data-all-wrap {
  background: #fff;
  overflow: hidden;
  padding: 10px;
  .chart {
    position: relative;
    margin: 20px auto 0 auto;
    width: 100%;
    height: 350px;
    border: 1px solid #dedede;
  }
}
</style>