<template>
  <div class="box-pie">
    <img src="@/assets/img/znxy/pie_bg.png" alt="" />
    <div ref="chartDom" class="content-box"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

let chartDom = ref(null);
let myChart = null;
var dataList = [13, 21, 39, 14, 22];
var nameList = ["货船", "杂船", "渔船", "集装箱船", "其他"];
var colorList = [
  "#7b55d8",
  "#366ccc",
  "#46b1ce",
  "#6fd8c9",
  "#efc97b",
  "#374e90",
  "#77a4ef",
  "#ef9f77",
  "#89e645",
  "#e67645",
];
var lengthList = [];
var seriesList = [];
var valList = [];
onMounted(async () => {
  nameList.forEach(function (item) {
    lengthList.push({ name: item.toString(), icon: "circle" });
  });
  var totalNum = dataList.reduce((prev, curr) => {
    return prev + curr;
  });
  dataList.forEach(function (item, index) {
    var obj = {
      value: Math.floor((((item / totalNum) * 10000) / 10000) * 100),
      value2: item,
    };
    if (index == dataList.length - 1) {
      var total = valList.reduce((prev, curr) => {
        return prev + curr;
      });
      obj.value = Number((100 - total).toFixed(2));
      valList.push(obj.value);
    } else {
      valList.push(obj.value);
    }
    seriesList.push({
      name: nameList[index],
      type: "bar",
      data: [obj],
      stack: "one",
      coordinateSystem: "polar",
      roundCap: true,
      zlevel: 20,
      itemStyle: {
        normal: {
          color: colorList[index],
          borderWidth: 2,
          borderColor: colorList[index],
        },
      },
    });
  });
  myChart = echarts.init(chartDom.value);
  myChart.setOption(options);
  // bhInit()
});
const valueModal = [
  1, 1, 1, 1, 1, 1, 1, 1, 1, 1.01, 1, 1, 1, 1, 1, 1, 1, 1.01, 1, 1, 1, 1, 1, 1,
];

// 数据模型
function pieValue(arr, name, color) {
  const list = arr.map((item) => {
    const colorStr = item > 1 ? color : "transparent";
    return {
      value: item,
      name,
      itemStyle: { color: colorStr },
    };
  });
  return list;
}

// 色块数据模型
function pieDataModal(name, radius, data) {
  return {
    name: name,
    type: "pie",
    radius: radius,
    center: ["50%", "50%"],
    hoverAnimation: false,
    label: {
      normal: {
        show: false,
      },
      emphasis: {
        show: false,
      },
    },
    zlevel: 1,
    labelLine: {
      normal: {
        show: false,
      },
    },
    data: data,
  };
}

//环形分割线模型
function gaugeModal(radius) {
  return {
    name: "分割线",
    type: "gauge",
    radius, //12
    clockwise: true,
    startAngle: "90",
    center: ["50%", "50%"],
    endAngle: "-269.9999",
    splitNumber: 24,
    zlevel: 2,
    detail: {
      offsetCenter: [10, 20],
      formatter: " ",
    },
    pointer: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: true,
      length: 3,
      lineStyle: {
        color: "#fff",
        width: 1,
      },
    },
    axisLabel: {
      show: false,
    },
  };
}

// 环形边框模型
function pieBorder(radius, borderColor) {
  return {
    type: "pie",
    radius, //2
    hoverAnimation: false,
    center: ["50%", "50%"],
    cursor: "auto",
    itemStyle: {
      color: {
        type: "radial",
        x: 0.5,
        y: 0.5,
        r: 0.5,
        colorStops: [
          {
            offset: 0,
            color: "transparent",
          },
          {
            offset: 0.96,
            color: "transparent",
          },
          {
            offset: 1,
            color: borderColor,
          },
        ],
      },
    },
    data: [
      {
        value: 100,
      },
    ],
    labelLine: {
      show: false,
    },
    zlevel: 3,
  };
}

const options = {
  //   tooltip: {
  //     trigger: "item",
  //   },
  //   legend: {
  //     top: "-1%",
  //     right: "0",
  //     icon: "rich",
  //     itemWidth: 24,
  //     itemHeight: 9,
  //     textStyle: {
  //       color: "#fff",
  //       fontSize: "11px",
  //     },
  //     data: ["病虫预警", "气象预警"],
  //   },
  series: [
    //第一层色块数据
    pieDataModal(
      "红色",
      ["37.5%", "51%"], //13.5
      pieValue(valueModal, "病虫预警", "#FF3000")
    ),
    //第一层环形分割线
    gaugeModal("63%"), //12
    // 第一层环形边框
    pieBorder(["50%", "52%"], "#ea3323f0"), //2
    //第二层色块数据
    pieDataModal(
      "绿色",
      ["51%", "64.5%"],
      pieValue(valueModal, "气象预警", "#05E505")
    ),
    //第二层环形分割线
    gaugeModal("77%"),
    // 第二层环形边框
    pieBorder(["64%", "66%"], "#51b247f0"),
    //第三层色块数据
    pieDataModal(
      "橙色",
      ["64.5%", "78%"],
      pieValue(valueModal, "生长预警", "#FF8500")
    ),
    //第三层环形分割线
    gaugeModal("90%"),
    // 第三层环形边框
    pieBorder(["77%", "79%"], "#FF8500f0"),
    {
      angleAxis: {
        max: 100,
        clockwise: true, // 逆时针
        show: false,
      },
      radiusAxis: {
        type: "category",
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      polar: {
        center: ["78%", "91.5%"],
        radius: ["50%", "50%"],
      },
      zlevel: 1,
      series: seriesList,
    },
  ],
};
function bhInit() {
  myChart.clear();
  options && myChart.setOption(options);
}
</script>

<style lang="scss" scoped>
.box-pie {
  position: relative;
  img {
    position: absolute;
    left: 34.5%;
    top: 31.6%;
  }
  .content-box {
    width: 100%;
    height: 350px;
  }
}
</style>
