mschool/src/views/home/component/Subjects.tsx

import {
  PropType,
  defineComponent,
  nextTick,
  onMounted,
  ref,
  toRefs,
  watch
} from 'vue';
import styles from '../index.module.less';
import icons from '../icons.json';
import { Badge, Image, Skeleton, SkeletonParagraph } from 'vant';
import * as echarts from 'echarts';
import { ISubjectDistribution } from '../type';
import icon_2 from '../image/icon_2.png';

type EChartsOption = echarts.EChartsOption;

const colors = [
  '#5B8FF9',
  '#F6BD16',
  '#5AD8A6',
  '#E8684A',
  '#5D7092',
  '#6DC8EC'
];

export default defineComponent({
  name: 'Subjects',
  props: {
    list: {
      type: Array as PropType<ISubjectDistribution[]>,
      default: () => []
    }
  },
  setup(props) {
    const firstInit = ref(false);
    const echratsRef = ref();
    const { list } = toRefs(props);
    watch(
      () => list.value,
      () => {
        firstInit.value = true;
        nextTick(() => {
          handleInit();
        });
      }
    );
    let myChart: echarts.ECharts;
    const handleInit = () => {
      if (!list.value.length) return;
      if (myChart) {
        myChart.dispose();
      }

      myChart = echarts.init(echratsRef.value);
      const option: EChartsOption = {
        grid: {
          left: 8,
          top: 16,
          right: 5,
          bottom: 5,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#333',
            fontSize: 10,
            rotate: 30
          },
          axisLine: {
            lineStyle: {
              color: '#F2F2F2'
            }
          },
          data: list.value.map(item => item.subjectName)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: list.value.map(item => item.studentNum),
            type: 'bar',
            label: {
              show: true,
              position: 'top'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FFD1A9' },
                { offset: 1, color: '#FFCAD0' }
              ])
            },
            barWidth: 20
          }
        ]
      };

      option && myChart.setOption(option);
    };

    return () => (
      <div class={styles.item}>
        <div class={styles.itemTop}>
          <Image class={styles.icon} src={icons[2]} />
          <div class={styles.title}>声部分布</div>
          <div class={styles.des}>(单位：人)</div>
        </div>

        {!firstInit.value && (
          <div class={[styles.subjectContainer, styles.itemEmtry]}>
            <Skeleton loading={true}>
              {{
                template: () => (
                  <div class={styles.subjectEcharts}>
                    <SkeletonParagraph />
                    <SkeletonParagraph />
                    <SkeletonParagraph />
                    <SkeletonParagraph />
                    <SkeletonParagraph />
                    <SkeletonParagraph />
                  </div>
                )
              }}
            </Skeleton>
          </div>
        )}
        <div
          style={{ display: list.value.length ? '' : 'none' }}
          class={styles.subjectContainer}>
          <div class={styles.subjectEcharts} ref={echratsRef}></div>
        </div>

        {firstInit.value && !list.value.length && (
          <div class={[styles.gradeContainer, styles.itemEmtry]}>
            <Image src={icon_2} />
          </div>
        )}
      </div>
    );
  }
});