@ued_fpi/data-visual/dist/es/aims/src/AirQualityLevelYearRatio/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, createVNode, unref } from 'vue';
import { FACTOR_LEVEL_TEXT } from 'fpi-tg-factor-tools';
import dayjs from 'dayjs';
import '../common/BasicEcharts/index.mjs';
import { getAirQualityStatis } from './api/index.mjs';
import _sfc_main$1 from '../common/BasicEcharts/index.vue.mjs';
import '../common/BasicEcharts/index.vue2.mjs';

const clsfix = "dv-aims-cieq-contributio-ratio";
const noDataColor = "var(--dv-color-text-secondary)";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    apiParams: { default: () => ({
      time: dayjs().subtract(1, "h").valueOf(),
      code: "0101000000",
      codeType: "grid"
    }) }
  },
  setup(__props) {
    const props = __props;
    const chartsFullOptions = ref({ options: null });
    const generateOption = (list2) => {
      return {
        options: {
          legend: {
            show: true,
            bottom: -4,
            itemGap: 4,
            textStyle: {
              color: "var(--dv-color-text-primary)",
              fontSize: 12
            },
            icon: "circle",
            itemWidth: 12,
            itemHeight: 12
          },
          tooltip: {
            trigger: "item",
            padding: 8,
            background: "rgba(1, 11, 18, 0.6)",
            formatter: (params) => {
              return `${params.marker} ${params.name}  ${params.data.value2}天 ${params.value}%`;
            }
          },
          series: [
            {
              type: "pie",
              radius: "60%",
              center: ["50%", "44%"],
              data: list2,
              label: {
                position: "outer",
                color: "var(--dv-color-text-primary)",
                overflow: "none",
                formatter: (params) => {
                  const { name, value, value2 } = params.data;
                  return `${name}  ${value2}天  ${value}%`;
                },
                fontSize: "var(--dv-text-number1)",
                fontFamily: "var(--dv-font-family-number)"
              }
            }
          ]
        }
      };
    };
    const list = [
      {
        name: "优",
        key: "veryGood",
        value: 0
      },
      {
        name: "良",
        key: "good",
        value: 0
      },
      {
        name: "轻度污染",
        key: "mild",
        value: 0
      },
      {
        name: "中度污染",
        key: "medium",
        value: 0
      },
      {
        name: "重度污染",
        key: "serious",
        value: 0
      },
      {
        name: "严重污染",
        key: "verySerious",
        value: 0
      }
    ];
    const fetchData = () => {
      getAirQualityStatis(props.apiParams).then((res) => {
        if (res.data && res.data.airQualityLevel) {
          const data1 = res.data.airQualityLevel.levelYearSumRate;
          const data2 = res.data.airQualityLevel.levelYearSum;
          chartsFullOptions.value = generateOption(list.map((item) => {
            const obj = FACTOR_LEVEL_TEXT.find((c) => item.name.includes(c.label));
            const value = data1[item.key];
            const value2 = data2[item.key];
            return {
              ...item,
              value,
              value2,
              itemStyle: {
                color: obj ? obj.color : noDataColor
              }
            };
          }));
        }
      });
    };
    onMounted(() => {
      fetchData();
    });
    watch(() => props.apiParams, () => {
      fetchData();
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(`${clsfix}-container`)
      }, [
        createElementVNode("div", {
          class: normalizeClass(`${clsfix}-echarts`)
        }, [
          createVNode(unref(_sfc_main$1), {
            height: "100%",
            "full-options": chartsFullOptions.value,
            loading: false
          }, null, 8, ["full-options"])
        ], 2)
      ], 2);
    };
  }
});

export { _sfc_main as default };