shalu-bigscreen-desiner/packages/shalu-dashboard-ui/components/charts/Charts.vue

<!-- charts基础组件 -->
<template>
  <Spin :spinning="loading" :indicator="indicator">
    <div ref="chartRef" :style="{width: width + 'px', height: height + 'px'}"></div>
  </Spin>
</template>

<script setup lang="ts">
import { ref, Ref, defineProps, watch, nextTick, h } from "vue";
import { Spin } from "ant-design-vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useEcharts } from "./hooks/useEcharts";
import type { EChartsOption } from "echarts";
import { throttle } from "lodash-es";

const props = defineProps<{
  echartsOptions: EChartsOption;
  width: number;
  height: number;
  loading?: boolean;
}>();
const chartRef: Ref<null | HTMLDivElement> = ref(null);
const { setOptions, resize } = useEcharts(chartRef as Ref<HTMLDivElement>);

const indicator = h(LoadingOutlined, {
  style: {
    fontSize: "24px",
  },
});

watch(
  () => [props.width, props.height],
  throttle(async () => {
    resize();
  }, 200)
);

watch(
  () => props,
  async () => {
    await nextTick();
    const { echartsOptions } = props;

    setOptions(echartsOptions);
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style scoped></style>