useEcharts更加方便的使用echarts，echarts动态尺寸，

import { ref, unref, nextTick, onMounted } from "vue";
import empty from "@/assets/image/public/empty.png";
import type { Ref } from "vue";
import echarts from "@/libs/echarts";

// import { EChartsOption } from "echarts";
import { useResizeObserver } from "@vueuse/core";

export const useECharts = (
  elRef: Ref<HTMLDivElement>,
  params?: {
    theme?: "light" | "dark" | "default";
    loadingText?: string;
  }
): any => {
  let chartInstancec: echarts.ECharts | null = null;
  const cacheOptions = ref({}) as Ref<any>;
  // const cacheOptions = ref({}) as Ref;

  const initCharts = () => {
    const el = unref(elRef);
    if (!el || !unref(el)) {
      return;
    }
    chartInstancec = echarts.init(elRef.value, params?.theme || "default");
    chartInstancec?.showLoading({
      text: params?.loadingText || "正在加载数据",
    });
  };

  const setOptions = (options: any) => {
    chartInstancec?.clear(); //清除之前的echarts
    cacheOptions.value = options;
    nextTick(() => {
      if (!chartInstancec) return;
      chartInstancec?.hideLoading();
      chartInstancec?.setOption(unref(cacheOptions));
    });
  };

  //数据为空时候 (暂无数据)
  const setNotopt = () => {
    chartInstancec?.clear(); //清除之前的echarts
    const tempOpt = {
      title: {
        text: " {a|}",
        x: "center",
        y: "center",
        // subtext: "暂无数据",
        itemGap: 0,
        textStyle: {
          rich: {
            a: {
              color: "#000",
              fontSize: "16",
              height: elRef.value.offsetHeight / 1.5,
              width: elRef.value.offsetWidth / 4,
              backgroundColor: {
                image: empty,
                // image:
                // "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbFJ1bGU9ImV2ZW5vZGQiPg0KICAgIDxlbGxpcHNlIGZpbGw9IiNkZGQiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3IiAvPg0KICAgIDxnIGZpbGxSdWxlPSJub256ZXJvIiBzdHJva2U9IiM5OTkiPg0KICAgICAgPHBhdGgNCiAgICAgICAgZD0iTTU1IDEyLjc2TDQ0Ljg1NCAxLjI1OEM0NC4zNjcuNDc0IDQzLjY1NiAwIDQyLjkwNyAwSDIxLjA5M2MtLjc0OSAwLTEuNDYuNDc0LTEuOTQ3IDEuMjU3TDkgMTIuNzYxVjIyaDQ2di05LjI0eiIgLz4NCiAgICAgIDxwYXRoDQogICAgICAgIGQ9Ik00MS42MTMgMTUuOTMxYzAtMS42MDUuOTk0LTIuOTMgMi4yMjctMi45MzFINTV2MTguMTM3QzU1IDMzLjI2IDUzLjY4IDM1IDUyLjA1IDM1aC00MC4xQzEwLjMyIDM1IDkgMzMuMjU5IDkgMzEuMTM3VjEzaDExLjE2YzEuMjMzIDAgMi4yMjcgMS4zMjMgMi4yMjcgMi45Mjh2LjAyMmMwIDEuNjA1IDEuMDA1IDIuOTAxIDIuMjM3IDIuOTAxaDE0Ljc1MmMxLjIzMiAwIDIuMjM3LTEuMzA4IDIuMjM3LTIuOTEzdi0uMDA3eiINCiAgICAgICAgZmlsbD0iI2UxZTFlMSIgLz4NCiAgICA8L2c+DQogIDwvZz4NCjwvc3ZnPg==",
              },
            },
          },
        },
        // subtextStyle: {
        // fontSize: 12,
        // color: "#fff",
        // },
      },
    };
    setOptions(tempOpt);
  };

  //获取实例
  const getInstance = () => {
    if (!chartInstancec) {
      initCharts();
    }
    return chartInstancec;
  };

  useResizeObserver(elRef, () => {
    if (chartInstancec) chartInstancec?.resize();
  });

  onMounted(() => {
    initCharts();
  });
  return [setOptions, setNotopt, getInstance];
};

// libs/echarts"
import * as echarts from "echarts/core";

import {
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  PictorialBarChart,
  RadarChart,
  ScatterChart,
  SunburstChart,
  GaugeChart,
} from "echarts/charts";

import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  AriaComponent,
  ParallelComponent,
  LegendComponent,
  RadarComponent,
  ToolboxComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  GraphicComponent,
} from "echarts/components";

import { SVGRenderer } from "echarts/renderers";

echarts.use([
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  PolarComponent,
  AriaComponent,
  ParallelComponent,
  BarChart,
  LineChart,
  PieChart,
  MapChart,
  RadarChart,
  SVGRenderer,
  PictorialBarChart,
  RadarComponent,
  ToolboxComponent,
  DataZoomComponent,
  VisualMapComponent,
  TimelineComponent,
  CalendarComponent,
  GraphicComponent,
  ScatterChart,
  SunburstChart,
  GaugeChart,
]);

export default echarts;

使用：

import { useECharts } from "@/compositionAPI/useECharts";
const [setOptions, setNotopt] = useECharts(tempRef);

setOptions(option);// 需要能获取到dom的地方调用，option就是echats数据
setNotopt();// 空状态，比如异步获取的数据，接口异常等等时候执行