<!-- 物资使用情况排名 -->

<template>
  <div class="box">
    <div ref="wzqk" class="charts"></div>
    <div class="title">物资使用情况排名</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>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const wzqk = ref(null);
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(wzqk.value);
  let option = {
    backgroundColor: "",
    color: ["#0C65F6", "#00FFA6", "#F4DF58"],
    grid: {
      left: "20%",
      // right: '35%',
      width: "70%",
      height: "46%",
      bottom: "18%"
      // top: '30%',
    },
    // legend: {
    //    icon: 'rect',
    //    x: 'center',
    //    y: '23%',
    //    orient: 'horizontal',
    //    itemWidth: 12,
    //    itemHeight: 12,
    //    formatter: ['{a|{name}}'].join('\n'),
    //    textStyle: {
    //       color: '#fff',
    //       height: 8,
    //       rich: {
    //          a: {
    //             verticalAlign: 'bottom',
    //          },
    //       },
    //    }, 1000
    //    data: ['税收收入', '同比增长'],
    // },
    tooltip: {
      confine: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      },
      textStyle: {
        color: "#fff",
        fontSize: 12,
        lineHeight: 24
      },
      padding: [5, 10],
      backgroundColor: "rgba(0, 0, 0, 0.50)",
      formatter(params) {
        // 根据条件修改
        let unit = "个";
        let relVal = params[0].name;
        for (let i = 0; i < params.length; i++) {
          if (i === 1) {
            unit = "%";
          }
          if (params[i].seriesName) {
            if (typeof params[i].color === "string") {
              relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`;
            } else {
              relVal += `<div style="display:flex;align-items:center"><div style="width: 13px;height: 5px; margin-right: 5px; background: ${params[i].color.colorStops[0].color}"></div><div style="padding-right: 20px">${params[i].seriesName}</div>${params[i].value} ${unit}</div>`;
            }
          }
        }
        return relVal;
      }
    },
    xAxis: {
      type: "category",
      data: ["棉被", "床具", "用具", "帐篷", "抢险物料", "救生器材", "抢险机具", "排水设备", "供水器具"],
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.45)"
        }
      },
      // textStyle:{
      //     fontSize:12
      // },
      axisLabel: {
        color: "#fff",
        interval: 0,
        rotate: 45
        // fontSize:12,
        // padding:0
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [
      {
        type: "value",
        min: 0,
        max: 400,
        // minInterval: 1,
        splitArea: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.15)"
            // type: 'dashed', // dotted 虚线
          }
        },
        axisLabel: {
          color: "#fff"
        }
      },
      {
        type: "value",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          formatter: "{value}%", // 右侧Y轴文字显示
          color: "#fff"
        },
        splitArea: {
          show: false
        }
      }
    ],
    series: [
      {
        // 柱底圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [16.1, 9], // 调整截面形状
        z: 1,
        symbolOffset: [0, 3],
        itemStyle: {
          color: "#00ABFF"
        },
        data: [319, 333, 333, 198, 222, 1, 2, 2, 1]
      },
      {
        name: "税收收入",
        type: "bar",
        z: 2,
        barWidth: 16,
        barMinHeight: 10,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#00D5FF" },
            { offset: 1, color: "#00ABFF" }
          ])
        },
        data: [319, 333, 333, 198, 222, 1, 2, 2, 1]
      },
      {
        // 柱顶圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [16, 9], // 调整截面形状
        symbolOffset: [0, -4],
        z: 3,
        symbolPosition: "end",
        itemStyle: {
          color: "#008FDF"
        },
        data: [319, 333, 333, 198, 222, 1, 2, 2, 1]
      }
      // {
      //    name: '同比增长',
      //    type: 'line',
      //    yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用quanmei
      //    z: 4,
      //    smooth: false, // 平滑曲线显示
      //    symbol: 'circle', // 标记的图形为实心圆
      //    symbolSize: 8, // 标记的大小
      //    data: [20, 12, 52, 40, 25],
      //    itemStyle: { color: '#FFCF5F' },
      // },
    ]
  };

  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});
</script>

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

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

.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;
}

.btn1 {
  width: 60px;
  height: 25px;
  background: pink;
  position: absolute;
  right: 8%;
  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;
  right: 24%;
  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%;
}
</style>
