lgp-admin-plus/packages/business/universal-ui/src/dashboard/dashboard.vue

<script lang="ts" setup>
import type { CardItem, ChartItem } from './typings';
defineOptions({ name: 'Dashboard' });
import Card from './card.vue';
import ChartTab from './chartTab.vue';
import ChartCard from './chartCard.vue';
import { ref } from 'vue';

interface Props {
  cardList: CardItem[];
  chartTabs: ChartItem[];
}
const itemA = ref({
  title: '玫瑰图',
  option: {
    legend: {
      top: 'bottom',
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 200],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          { value: 40, name: 'rose 1' },
          { value: 38, name: 'rose 2' },
          { value: 32, name: 'rose 3' },
          { value: 30, name: 'rose 4' },
          { value: 28, name: 'rose 5' },
          { value: 26, name: 'rose 6' },
          { value: 22, name: 'rose 7' },
          { value: 18, name: 'rose 8' },
        ],
      },
    ],
  },
});
const itemB = ref({
  title: '雷达图',
  option: {
    legend: {
      data: ['Allocated Budget', 'Actual Spending'],
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: 'Sales', max: 6500 },
        { name: 'Administration', max: 16000 },
        { name: 'Information Technology', max: 30000 },
        { name: 'Customer Support', max: 38000 },
        { name: 'Development', max: 52000 },
        { name: 'Marketing', max: 25000 },
      ],
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: 'Allocated Budget',
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: 'Actual Spending',
          },
        ],
      },
    ],
  },
});
const itemC = ref({
  title: '饼图',
  option: {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' },
        ],
      },
    ],
  },
});

withDefaults(defineProps<Props>(), {
  cardList: () => [],
  chartTabs: () => [],
});
</script>

<template>
  <div>
    <div class="grid grid-cols-4 gap-4 p-2">
      <Card v-for="item in cardList" :key="item.title" :item="item" />
    </div>
    <div class="p-2"><ChartTab :items="chartTabs" /></div>
    <div class="grid grid-cols-3 gap-2 p-2">
      <ChartCard :item="itemA" />
      <ChartCard :item="itemB" />
      <ChartCard :item="itemC" />
    </div>
  </div>
</template>