<!--
 * @Author: wuhao930406 1148547900@qq.com
 * @Date: 2023-08-08 09:18:08
 * @LastEditors: wuhao930406 1148547900@qq.com
 * @LastEditTime: 2023-08-17 14:01:18
 * @FilePath: /vue3portal/src/viewsCN/dashboardC/portlet/echart-sunburst.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import { http } from "@/api/request";
var colorList = [
  "rgba(211, 68, 53, 1)",
  "rgba(228, 133, 48, 1)",
  "rgba(231, 185, 44, 1)",
  "rgba(23, 165, 213, 1)",
  "rgba(23, 165, 213, 1)",

  "rgba(23, 165, 213, 1)",

  "rgba(23, 165, 213, 1)",

  "rgba(23, 165, 213, 1)",
  "rgba(23, 165, 213, 1)",
  "rgba(23, 165, 213, 1)",
  "rgba(23, 165, 213, 1)",

];

const state = reactive({
  chartOption: {},
});


const processOption = (datas) => {
  const maxvalue = Math.max(...datas.map(i => i.value))

  let maxArr = new Array(datas.length).fill(maxvalue);


  state.chartOption = {
    update: true,
    tooltip: {
      show: false,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: '16px',
      right: '16px',
      bottom: 20,
      containLabel: true,
    },
    xAxis: {
      show: true,
      type: "value",
      axisLine: {
        show: true,
        lineStyle: {
          color: ["rgba(62, 113, 157, 0.5)"],
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(62, 113, 157, 0.5)",
        },
      },
      axisLabel: {
        color: "rgba(62, 113, 157, 1)",
      },
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisPointer: {
          label: {
            show: true,
          },
        },
        data: datas.map((item) => item.label),
        axisLabel: {
          margin: 0,
          fontSize: 12,
          color: "#fff",
          rich: {
            a1: {
              color: "#fff",
              backgroundColor: colorList[0],
              width: 20,
              height: 20,
              align: "center",
              borderRadius: 10,
            },
            a2: {
              color: "#fff",
              backgroundColor: colorList[1],
              width: 20,
              height: 20,
              align: "center",
              borderRadius: 10,
            },
            a3: {
              color: "#fff",
              backgroundColor: colorList[2],
              width: 20,
              height: 20,
              align: "center",
              borderRadius: 10,
            },
            b: {
              color: "#fff",
              backgroundColor: colorList[3],
              width: 20,
              height: 20,
              align: "center",
              borderRadius: 10,
            },
          },
          formatter: function (params) {
            var index = datas.map((item) => item.label).indexOf(params);
            index = index + 1;
            if (index - 1 < 3) {
              return ["{a" + index + "|" + index + "}" + "  " + params].join(
                "\n"
              );
            } else {
              return ["{b|" + index + "}" + "  " + params].join("\n");
            }
          },
        },
      },
    ],
    series: [
      {
        z: 2,
        name: "value",
        type: "bar",
        barWidth: 8,
        zlevel: 1,
        data: datas.map((item, i) => {
          let itemStyle = {};
          itemStyle.color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgba(24, 103, 222, 0.4)",
            },
            {
              offset: 1,
              color: i < 3 ? colorList[i] : colorList[3],
            },
          ]);
          return {
            value: item.value,
            itemStyle: itemStyle,
          };
        }),
        label: {
          show: true,
          position: "right",
          color: "#fff",
          fontSize: 14,
        },
        itemStyle: {
          barBorderRadius: [0, 15, 15, 0],
        },
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 24,
        barGap: "-200%",
        itemStyle: {
          normal: {
            color: "rgba(0, 64, 128, 0.19)",
          },
        },
        data: maxArr,
      },
    ],
  };
};

onMounted(() => {
  //processOption();

  http("POST", "/index/statistics/schoolVisit", {}).then((res) => {
    let result = res?.data?.dataList?.map?.((it,i)=>{
      return {
        ...it,
        label:it?.label?.substring(0,10)
      }
    });
    console.log(result);
    processOption(result);
  });
});
</script>
<template>
  <echartsInit :chartOption="state.chartOption"></echartsInit>
</template>
<style lang="less"></style>
