<template>
  <div ref="chartDom" class="content-box"></div>
</template>

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

let chartDom = ref(null);
let myChart = null;

const valueModal = [
  10, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
  1, 1,
];

onMounted(() => {
  myChart = echarts.init(chartDom.value);
  myChart.setOption(options);
  //   initData();
});

// 数据模型
function pieValue(arr, name, color) {
  const list = arr.map((item) => {
    const colorStr = item > 1 ? color : ["transparent", "transparent"];
    return {
      value: item,
      name,
      itemStyle: {
        //颜色渐变
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: colorStr[0] },
          { offset: 1, color: colorStr[1] },
        ]),
        borderRadius: ["50%", "50%"],
      },
    };
  });
  return list;
}

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

//环形分割线模型
function gaugeModal(radius) {
  return {
    name: "分割线",
    type: "gauge",
    radius, //12
    clockwise: true,
    startAngle: "90",
    center: ["50%", "55%"],
    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,
    hoverAnimation: false,
    center: ["50%", "55%"],
    cursor: "auto",
    itemStyle: {
      color: borderColor,
    },
    data: [
      {
        value: 100,
      },
    ],
    labelLine: {
      show: false,
    },
    zlevel: 0,
  };
}

const options = {
  //   tooltip: {
  //     trigger: "item",
  //   },
  legend: {
    top: "5%",
    right: "center",
    itemHeight: 8,
    textStyle: {
      color: "#fff",
      fontSize: "12px",
    },
    data: [
      {
        name: "荔枝",
        icon:"image://orange_icon.png"
      },
      {
        name: "龙眼",
        icon:"image://blue_icon.png"
      },
      {
        name: "芒果",
        icon:"image://green_icon.png"
      },
    ],
  },
  graphic: {
    //图形中间图片
    elements: [
      {
        type: "image",
        style: {
          image: "pie_bg.png", //你的图片地址
          width: 150,
          height: 150,
        },
        left: "35.8%",
        top: "34.5%",
      },
    ],
  },
  series: [
    //第一层色块数据
    pieDataModal(
      "荔枝",
      ["46%", "51.5%"],
      pieValue(valueModal, "病虫预警", ["#FF653C", "#FFD3F3"])
    ),
    //第一层环形分割线
    gaugeModal("63%"),
    // 第一层环形边框
    pieBorder(["44%", "54%"], "#3b1007"),
    //第二层色块数据
    pieDataModal(
      "龙眼",
      ["59.5%", "65%"],
      pieValue(valueModal, "气象预警", ["#3CADFA", "#CCEBFF"])
    ),
    //第二层环形分割线
    gaugeModal("77%"),
    // 第二层环形边框
    pieBorder(["57.5%", "67.5%"], "#142745"),
    //第三层色块数据
    pieDataModal(
      "芒果",
      ["73%", "78.5%"],
      pieValue(valueModal, "生长预警", ["#79E773", "#AFFDD8"])
    ),
    //第三层环形分割线
    gaugeModal("90%"),
    // 第三层环形边框
    pieBorder(["71%", "81%"], "#112a23"),
  ],
};
function initData() {
  myChart.clear();
  options && myChart.setOption(options);
}
</script>

<style lang="scss" scoped>
.content-box {
  width: 100%;
  height: 370px;
}
</style>
