@ued_fpi/data-visual/dist/es/ipes/src/EmergencyManage/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, reactive, openBlock, createElementBlock, createVNode, unref, createElementVNode } from 'vue';
import _sfc_main$1 from '../common/Echarts.vue.mjs';
import '../common/Echarts.vue2.mjs';
import { getCssValue, getFontFamily } from '../../utils/tools.mjs';

const _hoisted_1 = { class: "emergencyManage" };
const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "chartBg" }, null, -1);
const __default__ = {
  name: "DvIpesEmergencyManage",
  title: "应急管理 or 应急事件"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    emergencyData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  setup(__props) {
    const props = __props;
    const total = props.emergencyData.reduce((accumulator, current) => accumulator + current.value, 0);
    const chartOption = reactive({
      options: {
        title: {
          show: true,
          text: total,
          textStyle: {
            color: getCssValue("--dv-color-text-primary"),
            fontSize: 24,
            fontFamily: getFontFamily("--dv-font-family-number"),
            fontWeight: 400
          },
          top: "17%",
          left: "19%",
          textAlign: "center"
        },
        tooltip: {
          confine: true,
          // 不让超出显示
          trigger: "item",
          formatter: (item) => {
            return `<div class="tool-tips__row">${item.percent.toFixed(1)}%</div>`;
          }
        },
        legend: {
          selectedMode: true,
          // 图例点击事件
          left: "40%",
          top: "4%",
          icon: "circle",
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 8,
          // 图例之间的间距
          formatter: (value) => {
            const flag = props.emergencyData.find((items) => {
              return items.name === value;
            });
            let arr = [];
            arr = [`{a|${value}}`, `{b|${flag?.value}}`];
            return arr.join("");
          },
          textStyle: {
            rich: {
              a: {
                width: 100,
                fontSize: 14,
                color: getCssValue("--dv-color-text-primary")
              },
              b: {
                width: 24,
                fontSize: 14,
                color: getCssValue("--dv-color-index"),
                fontFamily: getFontFamily("--dv-font-family-number"),
                align: "left"
              }
            }
          }
        },
        series: [
          {
            type: "pie",
            radius: ["46px", "58px"],
            center: ["20%", "22%"],
            data: props.emergencyData,
            animationEasing: "cubicInOut",
            animationDuration: 1e3,
            itemStyle: {
              borderRadius: 3,
              borderColor: "rgba(6,37,56,0.6)",
              borderWidth: 0
            },
            color: [
              "#0AAEFF",
              "#A162F7",
              "#34EAE3",
              "#E9BB1D",
              "#C0C4CC",
              "#5470c6",
              "#91cc75",
              "#fac858",
              "#ee6666",
              "#73c0de",
              "#3ba272",
              "#fc8452",
              "#9a60b4",
              "#ea7ccc"
            ],
            labelLine: {
              show: false
            },
            label: {
              show: false
            }
          }
        ]
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(_sfc_main$1, {
          class: "echartsBox",
          "full-options": unref(chartOption),
          loading: false
        }, null, 8, ["full-options"]),
        _hoisted_2
      ]);
    };
  }
});

export { _sfc_main as default };