<!-- 应急物资大类 -->

<template>
  <div class="yjwzdl-box">
    <div ref="yjwzdl" class="charts-yjwzdl"></div>
    <div v-if="PriceBtnState == false" class="PriceBtn btn1 btnno" @click="PriceBtn">价值</div>
    <div v-if="PriceBtnState == true" class="PriceBtn btn1 btnok" @click="PriceBtn">价值</div>
    <div v-if="NumberBtnState == false" class="NumberBtn btn2 btnno" @click="NumberBtn">数量</div>
    <div v-if="NumberBtnState == true" class="NumberBtn btn2 btnok" @click="NumberBtn">数量</div>
    <div class="title">应急物资分类</div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const yjwzdl = ref(null);
let dataList = [
  { name: "被服", value: "38" },
  { name: "床具", value: "18" },
  { name: "用具", value: "10" },
  { name: "帐篷", value: "10" },
  { name: "抢险物资", value: "5" },
  { name: "救生器材", value: "4" }
];
const color1 = ["#323042", "#323042"];
const color = [
  ["#00FFFF", "#0088CC"],
  ["#00FF80", "#009933"],
  ["#FFEA00", "#996100"],
  ["#FF7300", "#CC3A00"],
  ["#9500B3", "#550080"],
  ["#3377FF", "#243CB3"]
];
let data = [];
let legendDate = [];
// 循环添加数据
for (let i = 0; i < dataList.length; i++) {
  let tag = i % 5;
  data.push({
    name: dataList[i].name,
    value: dataList[i].value,
    itemStyle: {
      //borderRadius: "50%",
      //颜色渐变
      color: {
        x: 0,
        y: 0,
        x2: 1,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: color[tag][0] // 0% 处的颜色
          },
          {
            offset: 1,
            color: color[tag][1] // 100% 处的颜色
          }
        ]
      }
    }
  });
  legendDate.push(dataList[i].name);
}

let PriceBtnState = ref(false);
let NumberBtnState = ref(false);
//价值
function PriceBtn() {
  PriceBtnState.value = true;
  NumberBtnState.value = false;
}
//数量
function NumberBtn() {
  PriceBtnState.value = false;
  NumberBtnState.value = true;
  // NumberBtnState.value =  !NumberBtnState.value
}
onMounted(() => {
  let myChart = echarts.init(yjwzdl.value);
  let option: any;
  option = {
    backgroundColor: "",
    tooltip: {
      trigger: "item"
    },
    //右边的数据
    legend: {
      icon: "circle",
      //   top: 'center',
      right: "10%",
      top: "30%",
      padding: 0,
      width: "100%",
      height: "100%",
      font: "12px Microsoft YaHei",

      orient: "vertical",
      itemGap: 17,
      data: legendDate,
      // textStyle:{
      //       color:'#ffffff',
      //       fontSize:12,
      //    },
      textStyle: {
        // 个
        color: "#BBBBBB",
        rich: {
          name: {
            verticalAlign: "right",
            align: "left",
            width: 60,
            fontSize: 12,
            color: "#BBBBBB"
          },
          percent: {
            padding: [0, 0, 0, 8],
            fontSize: 12,
            color: "#BBBBBB"
          }
        },
        borderWidth: 33 // 间距的宽度
      },
      formatter: (name) => {
        console.log(name);
        const item = dataList.find((i) => {
          return i.name === name;
        });
        const p = item.value;
        return "{name|" + name + "：}" + "{percent|" + p + "}" + "万元";
      }
    },
    //中心
    //    graphic: [{
    //       type: 'text',
    //       z: 100,
    //       left: '30%',
    //       top: 'center',
    //       style: {
    //          fill: '#FFFF',
    //          text: 8888,
    //          font: '12px Microsoft YaHei'
    //       }
    //    }, {
    //       type: 'text',
    //       z: 100,
    //       left: '35%',
    //       top: '55%',
    //       style: {
    //          fill: '#BBBBBB',
    //          text: '共计/次',
    //          // text: [
    //          //     '横轴表示温度，单位是°C',
    //          //     '纵轴表示高度，单位是km',
    //          //     '右上角有一个图片做的水印',
    //          //     '这个文本块可以放在图中各',
    //          //     '种位置'
    //          // ].join('\n'),
    //          font: '30px Microsoft YaHei'
    //       }
    //    }],
    series: [
      //   {
      //      name: '小环',
      //      type: 'gauge',
      //      splitNumber: 24,
      //      radius: '50%',
      //      center: ['40%', '50%'],
      //      startAngle: 0,
      //      endAngle: 360,
      //      axisLine: {
      //         show: false
      //      },
      //      axisTick: {
      //         show: true,
      //         lineStyle: {
      //            color: color1[1],
      //            width: 3,
      //            shadowBlur: 1,
      //            shadowColor: color1[1],
      //         },
      //         length: 20,
      //         splitNumber: 3
      //      },
      //      splitLine: {
      //         show: false
      //      },
      //      axisLabel: {
      //         show: false
      //      },
      //      detail: {
      //         show: false
      //      },
      //      data: 0
      //   },
      {
        name: "",
        type: "pie",
        radius: ["50%", "70%"],
        center: ["40%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 0
        },
        //圆形设置
        top: "25%",
        left: "5%",
        label: {
          show: false,
          formatter: "{b}：{d}%" // 用来换行
        },
        width: "80%",
        height: "80%",
        emphasis: {
          label: {
            show: false,
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: data
      }
    ],
    layoutCenter: ["20%", "45%"],
    layoutSize: 1550
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

<style scoped>
.yjwzdl-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.yjwzdl-box .charts-yjwzdl {
  width: 100%;
  height: 100%;
  /* background: pink; */
}

.btn1 {
  width: 60px;
  height: 25px;
  background: pink;
  position: absolute;
  left: 12%;
  top: 21%;
  /* border-radius: 30px; */
  /* background: url('@/assets/DataVisualization/bg-sl.png') no-repeat; */
  /* background-size: 100% 100%; */
  color: white;
  opacity: 0.6;
  font-size: 12px;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
}
.btn2 {
  width: 60px;
  height: 25px;
  background: pink;
  position: absolute;
  left: 28%;
  top: 21%;
  /* border-radius: 30px; */
  /* background: url('@/assets/DataVisualization/bg-sl.png') no-repeat; */
  /* background-size: 100% 100%; */
  color: white;
  opacity: 0.6;
  font-size: 12px;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
}

.btnok {
  background: url("@/assets/DataVisualization/bg-jz.png") no-repeat;
  background-size: 100% 100%;
  color: rgb(238, 238, 133);
}
.btnno {
  background: url("@/assets/DataVisualization/bg-sl.png") no-repeat;
  background-size: 100% 100%;
}
.title {
  font-size: 20px;
  color: red;
  position: absolute;
  left: 14%;
  top: 6%;
  font-weight: 700;
  background: linear-gradient(to bottom, #ffffff, rgb(29, 233, 234));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
