@ued_fpi/data-visual/dist/es/wgms/src/FactorTopThreeRanking/index.vue.mjs

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

import { defineComponent, ref, watch, onMounted, nextTick, computed, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode } from 'vue';
import _sfc_main$1 from '../../utils/echarts/BaseECharts.vue.mjs';
import { getTopThreeData } from './api/index.mjs';

const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "DvWgmsFactorTopThreeRanking",
    title: "排名前三关联因子"
  },
  __name: "index",
  props: {
    height: { default: "200px" },
    params: { default: () => {
      return {
        dataType: "1",
        startTime: 1694016e6,
        endTime: 1694620799999,
        factorCode: "w01016",
        factorGroupCode: "ALGAE_ANALYSE_FACTOR",
        siteCode: "",
        stationCode: "1",
        timeType: "day"
      };
    } },
    data: { default: null },
    isLazy: { type: Boolean, default: false }
  },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const chartRef = ref();
    const option = ref(void 0);
    watch([() => props.params, () => props.data, () => props.isLazy], () => {
      !props.isLazy && getData();
    }, { deep: true });
    onMounted(async () => {
      await nextTick();
      !props.isLazy && getData();
    });
    async function getData() {
      if (props.data) {
        initChart(props.data || []);
        return;
      }
      const res = await getTopThreeData(props.params);
      initChart(res.data || []);
    }
    const initChart = (res) => {
      console.log(res, "dfkflkld", props.data);
      const resData = res ?? [];
      const upData = resData.map((item) => {
        if (item.factorValue >= 0)
          return item.factorValue === 0 ? 0 : item.factorValue;
        else
          return "";
      });
      const downData = resData.map((item) => {
        if (item.factorValue < 0)
          return item.factorValue;
        else
          return "";
      });
      const xData = resData.map((item) => item.factorName);
      option.value = getAlgaeBarOptions(xData, upData, downData);
    };
    __expose({
      reload: getData
    });
    const getHeight = computed(() => {
      if (typeof props.height === "string")
        return props.height;
      else if (typeof props.height === "number")
        return `${props.height}px`;
      else
        return "100%";
    });
    const getAlgaeBarOptions = (Xdata, dataUp, dataDown) => {
      return {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: Xdata,
            axisLine: {
              show: true,
              lineStyle: {
                color: "var(--dv-color-fill-lighter)"
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              fontSize: "var(--dv-text-body1)",
              color: "var(--dv-color-text-primary)"
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: Xdata
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            stack: "Total",
            barWidth: 24,
            color: "var(--dv-color-success)",
            label: {
              normal: {
                show: true,
                position: "top",
                offset: [0, -4],
                formatter: "{c}",
                textStyle: {
                  color: "var(--dv-color-success)",
                  fontFamily: "var(--dv-font-family-number)",
                  fontSize: "var(--dv-text-number1)"
                }
              }
            },
            emphasis: {
              focus: "series"
            },
            data: dataUp
            // [320, 302, 341, 374, 390, 450, 420]
          },
          {
            name: "",
            type: "bar",
            stack: "Total",
            barWidth: 24,
            color: "var(--dv-color-warning)",
            label: {
              normal: {
                show: true,
                position: "top",
                offset: [0, -4],
                formatter: "{c}",
                textStyle: {
                  color: "var(--dv-color-warning)",
                  fontFamily: "var(--dv-font-family-number)",
                  fontSize: "var(--dv-text-number1)"
                }
              }
            },
            emphasis: {
              focus: "series"
            },
            data: dataDown
            // [-120, -132, -101, -134, -190, -230, -210]
          }
        ]
      };
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "dv-wgms-chlorophyll-a-change-rate",
        style: normalizeStyle({ "--height": getHeight.value })
      }, [
        createElementVNode("div", {
          id: "dv-wgms-linkFactorChart",
          ref_key: "chartRef",
          ref: chartRef,
          class: "dv-wgms-chart"
        }, [
          createVNode(_sfc_main$1, { options: option.value }, null, 8, ["options"])
        ], 512)
      ], 4);
    };
  }
});

export { _sfc_main as default };