<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="home-bg card">
          <div class="home-bg-title">
            <div></div>
            <div>学生性别</div>
          </div>
          <div class="home-bg-content">
            <div ref="chart1" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="home-bg card">
          <div class="home-bg-title">
            <div></div>
            <div>学生年龄</div>
          </div>
          <div class="home-bg-content">
            <div ref="chart2" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="home-bg card">
          <div class="home-bg-title">
            <div></div>
            <div>地理位置</div>
          </div>
          <div class="home-bg-content">
            <div ref="chart5" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
        <div class="home-bg card">
          <div class="home-bg-title">
            <div></div>
            <div>标签属性</div>
          </div>
          <div class="home-bg-content handleBox">
            <div ref="chart4" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="home">
import * as echarts from "echarts";
import { portraitSummaryApi } from "@/api";
const chart1 = ref(null);
const chart2 = ref(null);
const chart4 = ref(null);
const chart5 = ref(null);
onMounted(() => {
  getDataChart();
});
const getDataChart = async () => {
  /* 获取学生性别 */
  let sex: any = await portraitSummaryApi.getStudentSex();
  getCharts1(sex.data.label, sex.data.value);
  /* 获取学生年龄 */
  let age: any = await portraitSummaryApi.getStudentAge();
  getCharts2(age.data.label, age.data.value);
  /* 获取属性标签 */
  let attr: any = await portraitSummaryApi.getStudentAttr();
  getCharts4(attr.data.label, attr.data.value);
  /* 获取地理位置 */
  let address: any = await portraitSummaryApi.getAddress();
  getCharts5(address.data.label, address.data.value);
};

const handleDate = (label: any, value: any, key: any = "") => {
  let data: any = [];
  label.forEach((item: any, index: number) => {
    data.push({
      value: value[index],
      name: item + key
    });
  });
  return data;
};
/* 性別 */
function getCharts1(label: any, value: any) {
  const chart = echarts.init(chart1.value);
  const data = handleDate(label, value);
  const option = {
    tooltip: {
      confine: true
    },
    legend: {
      show: true,
      right: "0%",
      top: "center",
      orient: "vertical",
      data: label
    },
    series: [
      {
        type: "pie",
        radius: "80%",
        center: ["50%", "50%"],
        roseType: "area",
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            label: {
              show: true,
              // position:'inside',
              formatter: "{b} : {c}人"
            }
          },
          labelLine: {
            show: true
          }
        },
        data: data
      }
    ]
  };

  chart.setOption(option);
  window.addEventListener("resize", function () {
    chart.resize();
  });
}
/* 年齡 */
function getCharts2(label: any, value: any) {
  const chartstation = echarts.init(chart2.value);
  const data = handleDate(label, value, "岁");
  const labelArr: any = [];
  label.map((item: any) => labelArr.push(item + "岁"));
  const option = {
    legend: {
      show: true,
      right: "0%",
      top: "center",
      orient: "vertical",
      data: labelArr
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    calculable: true,
    series: [
      {
        name: "年龄分布",
        type: "pie",
        radius: [50, 140],

        roseType: "area",
        data: data,
        itemStyle: {
          normal: {
            label: {
              show: true,
              // position:'inside',
              formatter: "{b} : {c}人"
            }
          },
          labelLine: {
            show: true
          }
        }
      }
    ]
  };

  chartstation.setOption(option);
  window.addEventListener("resize", function () {
    chartstation.resize();
  });
}
/* 兴趣爱好 */
function getCharts4(categoryData: any, dataArr: any) {
  const chartstation = echarts.init(chart4.value);
  var spaceLength = 5,
    fixedData = [],
    end = 0,
    max = 300;
  // var categoryData =  ys.超市品牌;
  let xhao: any = [];
  for (var i = 0; i < dataArr.length; i++) {
    xhao.push(i + 1);
  }

  var data1 = dataArr.map((item: any) => {
    fixedData.push(spaceLength);
    return item - spaceLength;
  });
  if (categoryData.length < 5) {
    end = categoryData.length - 1;
  } else {
    end = 5;
  }
  const option = {
    xAxis: [{ show: false }],

    yAxis: [
      {
        splitLine: {
          show: false
        },
        axisLine: {
          //y轴
          show: false
        },
        type: "category",
        inverse: true,
        axisTick: {
          show: false
        },

        data: categoryData,
        axisLabel: {
          align: "left",
          margin: 170,
          formatter: function (value: any, index: any) {
            const num = ref<any>("");
            var str = "";
            num.value = xhao[categoryData.indexOf(value)];
            if (index === 0) {
              str = "{no1|" + "} {num1|" + num.value + "} {title| " + value + "}";
            } else if (index === 1) {
              str = "{no2|" + "} {num2|" + num.value + "} {title| " + value + "}";
            } else if (index === 2) {
              str = "{no3|" + "} {num3|" + num.value + "} {title| " + value + "}";
            } else {
              str = " {num|" + num.value + "} {title| " + value + "}";
            }

            return str;
          },
          rich: {
            num: {
              color: "#387ec1",
              backgroundColor: "#112b67",
              width: 10,
              height: 10,
              fontSize: 14,
              padding: [6, 5, 3, 5],
              align: "center",
              shadowColor: "#3374ba",
              borderColor: "#3374ba",
              borderWidth: 1
            },
            num1: {
              color: "#51aff8",
              backgroundColor: "#112b67",
              width: 10,
              height: 10,
              fontSize: 14,
              padding: [7, 5, 3, 5],
              align: "center",
              shadowColor: "#4db2ff",
              borderColor: "#4db2ff",
              borderWidth: 1
            },
            num2: {
              color: "#51aff8",
              backgroundColor: "#112b67",
              width: 10,
              height: 10,
              fontSize: 14,
              padding: [7, 5, 3, 5],
              align: "center",
              shadowColor: "#4db2ff",
              borderColor: "#4db2ff",
              borderWidth: 1
            },
            num3: {
              color: "#51aff8",
              backgroundColor: "#112b67",
              width: 10,
              height: 10,
              fontSize: 14,
              padding: [7, 5, 3, 5],
              align: "center",
              shadowColor: "#4db2ff",
              borderColor: "#4db2ff",
              borderWidth: 1
            },
            title: {
              color: "#000"
            }
          }
        }
      }
    ],
    dataZoom: [
      {
        show: false,
        type: "slider",
        yAxisIndex: 0,
        zoomLock: false,
        width: 8,
        showDetail: false,
        startValue: 0, // 从头开始。
        endValue: end, // 一次性展示五个。
        borderWidth: 0,
        borderColor: "transparent",
        backgroundColor: "#343F4B",
        fillerColor: "#4291CE",
        showDataShadow: false,
        brushSelect: false,
        height: "88%",
        handleStyle: {
          color: "#4291CE"
        },
        handleIcon: "path://M512 512m-320 0a320 320 0 1 0 640 0 320 320 0 1 0-640 0Z"
      }
    ],
    grid: {
      right: "14%",
      left: "35%",
      top: "4%",
      bottom: "1%"
    },
    series: [
      {
        name: "",
        type: "bar",
        barWidth: 12, // 柱子宽度
        itemStyle: {
          normal: {
            color: function (params: any) {
              // var colorList = [
              //     '#7711AF', '#CF77FF', '#AE004F', '#F35872', '#FA7729',
              //     '#FFC526', '#F8E71C', '#34ADAE', '#3DDFD2', '#A0FFFF'
              // ];
              var colorListr = [
                "#8A64B8",
                "#7575D3",
                "#5F85DD",
                "#6FABE8",
                "#7ED3F4",
                "#8CD8C0",
                "#9CDF8D",
                "#BFED6B",
                "#EAFE4F",
                "#FFFD47",
                "#FFEA55",
                "#FFCF63",
                "#FFA069",
                "#fce38a",
                "#eaffd0",
                "#95e1d3",
                "#e3fdfd",
                "#749f83",
                "#ca8622"
              ];
              return colorListr[params.dataIndex];
            },

            shadowBlur: 20,
            shadowColor: "rgba(40, 40, 40, 0.5)"
          }
        },
        label: {
          formatter: function (parms: any) {
            return parms.value + spaceLength;
          },
          show: true,
          position: "right", // 位置
          color: "#1CD8A8",
          fontSize: 14,
          fontWeight: "bold", // 加粗
          distance: 10 // 距离
        },

        data: data1
      }
    ]
  };

  chartstation.setOption(option);
  window.addEventListener("resize", function () {
    chartstation.resize();
  });
}

/* 标签、地理位置 */
function getCharts5(nameArr: any, valueArr: any) {
  const chartstation5 = echarts.init(chart5.value);
  const option = {
    grid: {
      top: "10%",
      left: "8%",
      right: "5%",
      bottom: "20%"
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "#3A4667",
      borderColor: "#3A4667",
      textStyle: {
        color: "#fff"
      },
      formatter: "{b} : {c}",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    legend: {
      icon: "rect",
      top: 10,
      right: 5,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 12, // 字体大小
        color: "#B3CFFF" // 字体颜色
      }
    },
    xAxis: {
      type: "category",
      axisPointer: {
        type: "shadow"
      },
      axisLine: {
        lineStyle: {
          color: "rgba(112, 138, 198, 1)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "#333", // x轴文本颜色
          fontSize: 12
        }
        // rotate:30,
      },
      axisTick: {
        show: false
      },
      data: nameArr
    },
    yAxis: {
      type: "value",
      splitLine: {
        show: true,
        lineStyle: {
          color: "#162647",
          type: "solid"
        }
      },
      axisLabel: {
        formatter: "{value}",
        textStyle: {
          color: "#333", // x轴文本颜色
          fontSize: 12
        }
      },
      name: "",
      nameTextStyle: {
        color: "#B3CFFF",
        fontSize: 12
      }
    },
    series: [
      {
        type: "bar",
        name: "",
        barWidth: 16,
        emphasis: {
          itemStyle: {
            color: "#7fb7e9"
          },
          label: {
            textStyle: {
              color: "#7fb7e9"
            }
          }
        },
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "rgba(147, 157, 223, 1)",
            padding: [0, 10]
          }
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 1,
                color: "rgba(147, 157, 223, 1)"
              },
              {
                offset: 0,
                color: "rgba(147, 157, 223, 0)"
              }
            ])
          }
        },
        data: valueArr
      },
      {
        name: "",
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: "rgba(147, 157, 223, 1)"
          }
        },
        symbolRotate: 0,
        symbolSize: ["16", "3"],
        symbolPosition: "end",
        data: valueArr,
        z: 3
      }
    ]
  };
  chartstation5.setOption(option);
  window.addEventListener("resize", function () {
    chartstation5.resize();
  });
}
</script>


<style scoped lang="scss">
@import "../../home/index.scss";
</style>
