1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495 |
- <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(() => {});
- const { isDark } = useDark();
- let theme = computed(() => {
- return isDark.value ? "dark" : "default";
- });
- 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>
|