@ued_fpi/data-visual/dist/lib/aims/src/AirQualityLevelYearRatio2/index.vue.js

<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" />

'use strict';

Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });

const vue = require('vue');
const fpiTgFactorTools = require('fpi-tg-factor-tools');
const dayjs = require('dayjs');
require('../common/BasicEcharts/index.js');
const index = require('./api/index.js');
const index_vue_vue_type_script_setup_true_lang = require('../common/BasicEcharts/index.vue.js');
require('../common/BasicEcharts/index.vue2.js');

const clsfix = "dv-aims-air-quality-level-year-ratio2";
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "index",
  props: {
    apiParams: { default: () => ({
      time: dayjs().subtract(1, "h").valueOf(),
      code: "0101000000",
      codeType: "grid"
    }) }
  },
  setup(__props) {
    const props = __props;
    const chartsFullOptions = vue.ref({ options: null });
    const generateOption = (list, total) => {
      return {
        options: {
          tooltip: {
            trigger: "item",
            padding: 8,
            background: "rgba(1, 11, 18, 0.6)",
            formatter: (params) => {
              const { marker, name, value, data } = params;
              return `
                        <div>总天数 ${total}</div>
                        <div>${marker} ${name}  ${value}天 ${data.rate}%</div>
                    `;
            }
          },
          legend: {
            top: "center",
            left: "50%",
            itemHeight: 10,
            itemWidth: 10,
            itemGap: 12,
            orient: "vertical",
            icon: "circle",
            textStyle: {
              fontFamily: "var(--dv-font-family-number)",
              fontSize: "var(--dv-text-number1)",
              color: "var(--dv-color-text-primary)",
              rich: {
                name: {
                  fontSize: "var(--dv-text-body1)",
                  color: "var(--dv-color-text-primary)",
                  align: "left",
                  width: 80
                  // padding: [0, 30, 0, -5],
                },
                value: {
                  fontFamily: "var(--dv-font-family-number)",
                  fontSize: "var(--dv-text-number1)",
                  color: "var(--dv-color-index)",
                  width: 36,
                  align: "right"
                },
                split: {
                  fontFamily: "var(--dv-font-family-number)",
                  fontSize: "var(--dv-text-number1)",
                  color: "var(--dv-color-text-secondary)"
                }
              }
            },
            formatter: (f_name) => {
              const { name, value, rate } = list.find((item) => item.name === f_name);
              return `{name| ${name}}{value|${value}天}{split|/}${rate}%`;
            }
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["55%", "80%"],
              center: ["25%", "50%"],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: "center",
                formatter: "{name|等级占比}",
                rich: {
                  name: {
                    fontSize: "var(--dv-text-headline1)",
                    fontWeight: 500,
                    color: "var(--dv-color-text-primary)"
                  }
                }
              },
              labelLine: {
                show: false
              },
              data: list
            }
          ]
        }
      };
    };
    const listConfig = [
      {
        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 = () => {
      index.getAirQualityStatis(props.apiParams).then((res) => {
        if (res?.data?.airQualityLevel) {
          const values = res.data.airQualityLevel.levelYearSum;
          const rates = res.data.airQualityLevel.levelYearSumRate;
          const total = values.total;
          const renderData = listConfig.map((item) => ({
            name: item.name,
            value: values[item.key],
            rate: rates[item.key],
            itemStyle: {
              color: fpiTgFactorTools.FACTOR_LEVEL_TEXT.find((c) => item.name.includes(c.label))?.color
            }
          }));
          chartsFullOptions.value = generateOption(renderData, total);
        }
      });
    };
    vue.onMounted(() => {
      fetchData();
    });
    vue.watch(() => props.apiParams, () => {
      fetchData();
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(`${clsfix}-container`)
      }, [
        vue.createElementVNode("div", {
          class: vue.normalizeClass(`${clsfix}-echarts`)
        }, [
          vue.createVNode(vue.unref(index_vue_vue_type_script_setup_true_lang.default), {
            height: "100%",
            "full-options": chartsFullOptions.value,
            loading: false
          }, null, 8, ["full-options"])
        ], 2)
      ], 2);
    };
  }
});

exports.default = _sfc_main;