@ued_fpi/data-visual/dist/es/aims/src/PollutionSourceAnalysis/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 '../common/BasicEcharts/index.mjs';
import _sfc_main$1 from '../common/BasicEcharts/index.vue.mjs';
import '../common/BasicEcharts/index.vue2.mjs';

const clsfix = "dv-aims-pollution-source-analysis";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    isUseBuiltInApi: { type: Boolean, default: false },
    apiParams: { default: () => ({}) },
    data: {}
  },
  setup(__props) {
    const props = __props;
    const chartsFullOptions = ref({ options: null });
    const generateOption = (list) => {
      return {
        options: {
          tooltip: {
            trigger: "item",
            padding: 8,
            background: "rgba(1, 11, 18, 0.6)",
            formatter: (params) => {
              const { marker, name, value } = params;
              return `
                        <div>${marker} ${name}  ${value}%</div>
                    `;
            }
          },
          legend: {
            top: "center",
            left: "50%",
            itemHeight: 10,
            itemWidth: 10,
            itemGap: 10,
            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: 100
                  // 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"
                }
              }
            },
            formatter: (f_name) => {
              const { name, value } = list.find((item) => item.name === f_name);
              return `{name| ${name}}{value|${value}%}`;
            }
          },
          series: [
            {
              name: "",
              type: "pie",
              center: ["25%", "50%"],
              avoidLabelOverlap: false,
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              data: list
            }
          ]
        }
      };
    };
    const fetchData = (list) => {
      const colors = [
        "#0062FF",
        "#0AAEFF",
        "#2AC94F",
        "#FF792E",
        "#F84439",
        "#FFB443",
        "#A162F7",
        "#F95EB1"
      ];
      if (list) {
        chartsFullOptions.value = generateOption(list.map((item, index) => ({
          name: item.name,
          value: item.rate,
          itemStyle: {
            color: colors[index]
          }
        })));
        return;
      }
      const data = [{
        name: "生活源",
        code: "1",
        rate: "20.5"
      }, {
        name: "农业源",
        code: "2",
        rate: "12.2"
      }, {
        name: "扬尘源",
        code: "3",
        rate: "10.2"
      }, {
        name: "燃煤",
        code: "4",
        rate: "8.2"
      }, {
        name: "工艺过程源",
        code: "5",
        rate: "7.8"
      }, {
        name: "移动源",
        code: "6",
        rate: "7"
      }, {
        name: "生物质源",
        code: "7",
        rate: "6.9"
      }, {
        name: "其他",
        code: "8",
        rate: "5.3"
      }];
      chartsFullOptions.value = generateOption(data.map((item, index) => ({
        name: item.name,
        value: item.rate,
        itemStyle: {
          color: colors[index]
        }
      })));
    };
    onMounted(() => {
      fetchData();
    });
    watch(() => props.apiParams, () => {
      fetchData();
    });
    watch(() => props.data, () => {
      if (!props.isUseBuiltInApi && props.data)
        fetchData(props.data);
    });
    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 };