shalu-dashboard-ui/components/charts/hooks/useChartOptions.ts

import type { EChartsOption } from "echarts";
import { computed, watch, ref } from "vue";
import { omit, defaultsDeep } from "lodash";
import { useRequest } from "vue-hooks-plus";
import { DataSourceType } from "../chartEnum";
import { message } from "ant-design-vue";
import { cllJsCode } from "../utils";

export const useChartOptions = (chartProps: Record<string, any>) => {
  const dataSource = chartProps.dataSource || {};
  const xAxis = ref<EChartsOption["xAxis"]>({ data: dataSource?.data?.xData });
  const yAxis = ref<EChartsOption["yAxis"]>({ data: dataSource?.data?.yData });
  const series = ref<EChartsOption["series"]>(dataSource?.data?.series);

  const server = computed(() => {
    return async () =>
      await fetch(chartProps.dataSource.url, {
        method: chartProps.dataSource.method,
      })
      .then((res) => res.json());
  });

  // 请求数据
  const { run, refresh, cancel, data, loading } = useRequest(server.value, {
    defaultParams: chartProps.dataSource.params,
    manual: true,
    pollingInterval: (chartProps.dataSource?.refreshTime || 0) * 1000, // 刷新时间
    onError: (error) => {
      console.error(error);
      message.error(chartProps.dataSource.url + "请求失败");
    }
  });

  /* 初始请求 */
  if (chartProps.dataSource.sourceType === DataSourceType.API) {
    run();
  }

  watch(
    () => data.value,
    async (val) => {
      if (val && chartProps.dataSource.sourceType === DataSourceType.API) {
        let res = val;
        if(chartProps.dataSource.dataProcess) {
          res = await cllJsCode(chartProps.dataSource.dataProcess, JSON.stringify(val));
        }
    
        xAxis.value = res.xAxis || { data: res.xData };
        yAxis.value = res.yAxis || { data: res.yData };
        series.value = res.series;
      }
    },
    {
      deep: true,
    }
  );

  watch(
    () => [
      chartProps.dataSource.sourceType,
      chartProps.dataSource.method
    ],
    () => {
      if (chartProps.dataSource.sourceType === DataSourceType.API) {
        refresh();
      } else {
        cancel();
        const dataSource = chartProps.dataSource || {};
        xAxis.value = { data: dataSource?.data?.xData };
        yAxis.value = { data: dataSource?.data?.yData };
        series.value = dataSource?.data?.series;
      }
    },
    {
      deep: true,
    }
  );

  const options = computed((): EChartsOption => {
    const opt = omit(chartProps, [
      "width",
      "height",
      "dataSource",
    ]) as EChartsOption;

    const result = defaultsDeep(
      {
        xAxis: xAxis.value,
        yAxis: yAxis.value,
        series: series.value,
      },
      opt
    );

    return result;
  });

  return {
    options,
    loading,
  };
};