@ued_fpi/data-visual/dist/es/aims/src/MulGridCieqContributionMonthRatio/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, onMounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, unref } from 'vue';
import { BASE_FACTOR } from 'fpi-tg-factor-tools';
import dayjs from 'dayjs';
import '../common/BasicEcharts/index.mjs';
import '../common/BasicNoData/index.mjs';
import { getCieqRate } from './api/index.mjs';
import _sfc_main$1 from '../common/BasicEcharts/index.vue.mjs';
import '../common/BasicEcharts/index.vue2.mjs';
import _BasicNoData from '../common/BasicNoData/index.vue.mjs';

const clsfix = "dv-aims-mul-grid-cieq-contribution-month-ratio";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    apiParams: { default: () => ({
      time: dayjs().subtract(1, "h").valueOf(),
      gridCode: "0100000000",
      timeType: "year"
    }) }
  },
  setup(__props) {
    const props = __props;
    const chartsFullOptions = ref({ options: null });
    const generateOption = (xData, series) => {
      return {
        options: {
          grid: {
            left: 10,
            bottom: 30,
            right: 10,
            top: 30,
            containLabel: true
          },
          tooltip: {
            trigger: "axis",
            padding: 8,
            background: "rgba(1, 11, 18, 0.6)",
            formatter: (params) => {
              const title = params[0] ? params[0].name : "";
              const cieq = params[0] ? params[0].data.cieq : "";
              const strArr = params.map((item) => {
                return `<div>
                            ${item.marker}
                            <span style="display: inline-block;width: 60px;">${item.seriesName}</span>
                            <span style="display: inline-block;text-align: right;width: 30px;margin-right:10px;">${Number.isNaN(Number(item.data.value)) ? "--" : `${item.data.value}`}</span>
                            <span style="display: inline-block;text-align: right;width: 40px;">${typeof item.data.rate === "number" ? `${item.data.rate}%` : "--%"}</span>
                        </div>`;
              });
              const str = strArr.join("");
              return `<div>
                        <div>${title}</div>
                        <div><span style="display: inline-block;width: 60px;">综合指数</span><span>${cieq}</span></div>
                        ${str}
                    </div>`;
            }
          },
          xAxis: {
            type: "category",
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: "var(--dv-color-text-primary)",
              fontFamily: "var(--dv-font-family-number)",
              fontSize: "var(--dv-text-number2)"
            },
            data: xData
          },
          yAxis: {
            type: "value",
            nameTextStyle: {
              color: "var(--dv-color-text-secondary)",
              padding: [0, 30, 0, 0]
            },
            splitNumber: 3,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              color: "var(--dv-color-text-secondary)",
              fontFamily: "var(--dv-font-family-number)",
              fontSize: "var(--dv-text-number2)"
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["var(--dv-color-border-light)"]
              }
            }
          },
          legend: {
            show: true,
            bottom: 0,
            itemGap: 10,
            textStyle: {
              color: "var(--dv-color-text-primary)",
              fontSize: 12
            },
            itemWidth: 12,
            itemHeight: 12,
            icon: "circle",
            itemStyle: {
              borderWidth: 0
            }
          },
          series
        }
      };
    };
    const fetchData = () => {
      const colors = [
        "#0062FF",
        "#0AAEFF",
        "#2AC94F",
        "#FF792E",
        "#F84439",
        "#FFB443"
      ];
      getCieqRate(props.apiParams).then((res) => {
        if (res.data && res.data.length) {
          const data = res.data;
          const xData = data.map((c) => c.name);
          const list = BASE_FACTOR.filter((item) => item.code !== "aqi").map((item, index) => {
            const values = data.map((c) => {
              const obj = c.icieqs.find((o) => o.factorName === item.name);
              return {
                ...obj,
                cieq: c.cieq
              };
            });
            return {
              name: item.name,
              type: "bar",
              stack: "x",
              data: values,
              color: colors[index],
              barWidth: 15
            };
          });
          chartsFullOptions.value = generateOption(xData, list);
        }
      });
    };
    onMounted(() => {
      fetchData();
    });
    watch(() => props.apiParams, () => {
      fetchData();
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`${clsfix}-container`)
      }, [
        createElementVNode("div", {
          class: normalizeClass(`${clsfix}-echarts`)
        }, [
          Boolean(chartsFullOptions.value.options) ? (openBlock(), createBlock(unref(_sfc_main$1), {
            key: 0,
            height: "100%",
            "full-options": chartsFullOptions.value,
            loading: false
          }, null, 8, ["full-options"])) : (openBlock(), createBlock(unref(_BasicNoData), { key: 1 }))
        ], 2)
      ], 2);
    };
  }
});

export { _sfc_main as default };