hospital-project/src/components/echarts/barDim.vue

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import { getPersonDimensionChartsRanking } from "@/api/draw";
import { reactive } from "vue";
const props = defineProps({
  title: {
    type: String
  }
});
const dataProp = reactive({
  title: "",
  data: {}
});
onMounted(() => {});
// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});
// 初始化ECharts
const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });
const dataList = reactive({
  title: [],
  data: []
});
const init = async (item?: any, type?: number) => {
  dataList.title = [];
  dataList.data = [];
  const { data, code } = await getPersonDimensionChartsRanking({
    ...item,
    type
  });
  let dataListInit;
  if (code === 200) {
    dataListInit = data.sort((a, b) => a.ranking - b.ranking);
    dataListInit.map((it, id) => {
      if (id < 10) {
        dataList.title.push(it.assessmentObjectName);
        dataList.data.push(it.totalScore);
      }
    });
  }
  setOptions({
    title: {
      text: `${props.title}Top10`
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: dataList.title,
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: "value"
      }
    ],
    series: [
      {
        name: "Direct",
        type: "bar",
        barWidth: props.title == "总得分" ? "30%" : "40%",
        data: dataList.data
      }
    ]
  });
};
nextTick(() => {
  init();
});
defineExpose({
  init
});
</script>

<template>
  <div ref="chartRef" class="w-full h-full" />
</template>