npmapps 1.0.3 → 1.0.5

package/README.md

@@ -1,4 +1,6 @@
 1.0.0 VSCodeUserSetup-x64-1.96.4.exe
 1.0.1 HeidiSQL_12.10.0.7000_Setup.7z
 1.0.2 v-fullScreen.browser.text
-1.0.3 ehcarts-3dpie
+1.0.3 ehcarts-3dpie
+1.0.4 EllTable
+1.0.5 dialogFnJsx

package/app/dialogFnJsx/DialogForm.vue

@@ -0,0 +1,51 @@
+<template>
+  <el-form ref="form" :model="formData" label-width="80px">
+    <el-form-item label="名称" prop="name">
+      <el-input 
+        v-model="formData.name"
+        placeholder="请输入名称"
+      />
+    </el-form-item>
+    <el-form-item label="邮箱" prop="email">
+      <el-input
+        v-model="formData.email"
+        placeholder="请输入邮箱"
+      />
+    </el-form-item>
+    <el-form-item label="描述" prop="description">
+      <el-input
+        type="textarea"
+        v-model="formData.description"
+        placeholder="请输入描述"
+        :rows="3"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'DialogForm',
+  data() {
+    return {
+      formData: {
+        name: '',
+        email: '',
+        description: ''
+      }
+    }
+  },
+  methods: {
+    getFormData() {
+      return this.formData
+    },
+    resetForm() {
+      this.formData = {
+        name: '',
+        email: '',
+        description: ''
+      }
+    }
+  }
+}
+</script>

package/app/dialogFnJsx/README.md

@@ -0,0 +1,98 @@
+# dialogFnJsx 组件文档
+
+## 组件介绍
+
+`dialogFnJsx` 是一个基于 Element UI 的 Dialog 组件封装的函数式对话框组件，使用 JSX 语法实现。它提供了一种更灵活的方式来创建和管理对话框，支持动态内容渲染和自定义插槽。
+
+## 特性
+
+- 函数式调用，无需在模板中声明
+- 支持 JSX 语法
+- 支持多个插槽（默认内容、标题、底部）
+- 自动管理对话框的生命周期
+- 支持所有 Element UI Dialog 的原生属性和事件
+
+## 基本用法
+
+```javascript
+import { dialogFn } from './dialogFnJsx';
+
+// 基础用法
+const { dialog, close } = dialogFn({
+  slots: {
+    default: <div>对话框内容</div>,
+    title: <h3>标题</h3>,
+    footer: (
+      <div>
+        <el-button onClick={() => close()}>取消</el-button>
+        <el-button type="primary" onClick={() => {}}>确定</el-button>
+      </div>
+    )
+  },
+  props: {
+    title: '标题',
+    width: '500px',
+    destroyOnClose: true
+  },
+  on: {
+    close: () => {
+      console.log('关闭');
+    }
+  }
+});
+```
+
+## 参数说明
+
+### options 配置对象
+
+| 参数 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| slots | Object | 否 | 插槽内容配置对象 |
+| props | Object | 否 | Dialog 组件的 props 配置 |
+| on | Object | 否 | Dialog 组件的事件监听配置 |
+
+### slots 配置对象
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| default | JSX.Element | 默认插槽内容 |
+| title | JSX.Element | 标题插槽内容 |
+| footer | JSX.Element | 底部插槽内容 |
+
+### props 配置对象
+
+支持所有 Element UI Dialog 组件的 props 配置，常用的有：
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| title | String | 对话框标题 |
+| width | String | 对话框宽度 |
+| top | String | 对话框距离顶部的距离 |
+| destroyOnClose | Boolean | 关闭时是否销毁内容 |
+| beforeClose | Function | 关闭前的回调函数 |
+
+### on 配置对象
+
+支持所有 Element UI Dialog 组件的事件监听配置，常用的有：
+
+| 事件名 | 说明 |
+|--------|------|
+| close | 对话框关闭时的回调函数 |
+| open | 对话框打开时的回调函数 |
+
+## 注意事项
+
+1. 组件使用 JSX 语法，确保项目已配置好相关的 Babel 插件支持。
+2. 关闭对话框时会自动销毁组件实例，无需手动处理。
+3. 所有的 Element UI Dialog 原生属性都可以通过 props 传入。
+4. 事件监听器通过 on 对象进行配置。
+5. 返回的 close 方法可以用于手动关闭对话框。
+
+## 与普通 Vue 组件的区别
+
+1. 采用函数式调用而非组件式声明
+2. 使用 JSX 语法替代模板语法
+3. 自动管理组件的挂载和销毁
+4. 更灵活的插槽内容配置
+5. 无需在父组件中注册即可使用

package/app/dialogFnJsx/com.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    {{ nameProps }}
+
+    <el-button type="primary" v-if="showBtn" @click="show">打开新弹窗</el-button>
+    <el-button v-if="showBtn" @click="close">关闭</el-button>
+    <el-button v-if="showBtn" @click="obj.a++">{{ obj.a  }}</el-button>
+    <slot />
+  </div>
+</template>
+<script>
+import { dialogFn } from "./index";
+import com11 from "./com11.vue";
+export default {
+  props: {
+    nameProps: {
+      type: String,
+      default: "111",
+    },
+    closeDialog: {
+      type: Function,
+      default: () => {
+      },
+    },
+    showBtn: {
+      type: Boolean,
+      default: false,
+    },
+    obj: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  created() {
+    console.log(this.nameProps, "nameProps");
+  },
+  methods: {
+    close() {
+      console.log(this.closeDialog, "dialog");
+      this.closeDialog();
+    },
+    beforeClose(d) {
+      d();
+    },
+    show() {
+      
+      const { close } = dialogFn({
+        slots: {
+          default: (
+            <com11
+              nameProps="内部defaultSlot"
+              closeDialog={() => close()}
+            />
+          ),
+        },
+        props: {
+          title: "内部弹窗标题",
+          width: "300px",
+          top: "100px",
+          beforeClose: this.beforeClose,
+          appendToBody: true,
+        },
+        on: {
+          close: () => {
+            console.log("内部关闭");
+          },
+        },
+      });
+    },
+  },
+};
+</script>

package/app/dialogFnJsx/com11.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    {{ nameProps }}
+    <el-button type="" @click="close">关闭</el-button>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    nameProps: {
+      type: String,
+      default: "111",
+    },
+    closeDialog: {
+      type: Function,
+      default: () => {
+      },
+    },
+  },
+  created() {
+    console.log(this.nameProps, "nameProps");
+  },
+  methods: {
+    close() {
+      console.log(this.closeDialog, "dialog");
+
+      this.closeDialog();
+    },
+  },
+};
+</script>

package/app/dialogFnJsx/examples.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="dialog-examples">
+    <!-- 基础用法示例 -->
+    <el-button @click="showBasicDialog">基础对话框</el-button>
+    
+    <!-- 自定义标题和内容示例 -->
+    <el-button @click="showCustomDialog" type="primary">自定义对话框</el-button>
+    
+    <!-- 表单验证示例 -->
+    <el-button @click="showFormDialog" type="success">表单对话框</el-button>
+    
+    <!-- 复杂功能示例 -->
+    <el-button @click="showComplexDialog" type="warning">复杂对话框</el-button>
+  </div>
+</template>
+
+<script>
+import DialogForm from './DialogForm.vue'
+
+export default {
+  components: {
+    DialogForm
+  },
+  name: 'DialogExamples',
+  data() {
+    return {
+      formData: {
+        name: '',
+        email: '',
+        description: ''
+      }
+    }
+  },
+  methods: {
+    // 基础对话框示例
+    showBasicDialog() {
+      this.$dialogFnByJsx({
+        props: {
+          title: '基础对话框',
+          width: '30%'
+        },
+        slots: {
+          default: '这是一个基础的对话框示例，展示最简单的用法。'
+        },
+        on: {
+          open: () => console.log('对话框打开了'),
+          close: () => console.log('对话框关闭了')
+        }
+      })
+    },
+
+    // 自定义对话框示例
+    showCustomDialog() {
+      this.$dialogFnByJsx({
+        props: {
+          width: '40%',
+          'custom-class': 'custom-dialog'
+        },
+        slots: {
+          title: <div style="color: #409EFF">自定义标题样式</div>,
+          default: (
+            <div class="custom-content">
+              <el-alert
+                title="自定义内容示例"
+                type="success"
+                description="这里展示了如何使用JSX语法自定义对话框内容"
+                show-icon
+              />
+              <div style="margin-top: 20px">
+                可以在这里放置任何自定义的内容组件
+              </div>
+            </div>
+          ),
+          footer: (
+            <div class="custom-footer">
+              <el-button>取消</el-button>
+              <el-button type="primary">确定</el-button>
+            </div>
+          )
+        }
+      })
+    },
+
+    // 表单对话框示例
+    showFormDialog() {
+      let formRef = null
+      const config = {
+        props: {
+          title: '表单对话框',
+          width: '50%'
+        },
+        slots: {
+          default: (
+            <DialogForm ref={ref => formRef = ref} />
+          ),
+          footer: (
+            <div>
+              <el-button onClick={() => close()}>取消</el-button>
+              <el-button
+                type="primary"
+                onClick={() => {
+                  const formData = formRef.getFormData()
+                  console.log('表单数据：', formData)
+                  close()
+                }}
+              >
+                提交
+              </el-button>
+            </div>
+          )
+        }
+      }
+      let { close } = this.$dialogFnByJsx(config)
+    },
+
+    // 复杂功能示例
+    showComplexDialog() {
+        const config={
+            props: {
+          title: '复杂功能示例',
+          width: '60%',
+          'close-on-click-modal': false,
+          'custom-class': 'complex-dialog'
+        },
+        slots: {
+          default: (
+            <div class="complex-content">
+              <el-tabs type="border-card">
+                <el-tab-pane label="基本信息">
+                  <el-descriptions title="用户信息" border>
+                    <el-descriptions-item label="用户名">张三</el-descriptions-item>
+                    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+                    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
+                    <el-descriptions-item label="备注">
+                      <el-tag size="small">学校</el-tag>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="联系地址">
+                      江苏省苏州市吴中区吴中大道 1188 号
+                    </el-descriptions-item>
+                  </el-descriptions>
+                </el-tab-pane>
+                <el-tab-pane label="操作记录">
+                  <el-timeline>
+                    <el-timeline-item
+                      timestamp="2023/4/12"
+                      placement="top"
+                    >
+                      <el-card>
+                        <h4>更新 Github 模板</h4>
+                        <p>王小虎 提交于 2023/4/12 20:46</p>
+                      </el-card>
+                    </el-timeline-item>
+                    <el-timeline-item
+                      timestamp="2023/4/3"
+                      placement="top"
+                    >
+                      <el-card>
+                        <h4>更新 Github 模板</h4>
+                        <p>王小虎 提交于 2023/4/3 20:46</p>
+                      </el-card>
+                    </el-timeline-item>
+                  </el-timeline>
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+          ),
+          footer: (
+            <div class="complex-footer">
+              <el-button onClick={() => close()}>取消</el-button>
+              <el-button type="primary" onClick={() => close()}>确定</el-button>
+            </div>
+          )
+        },
+        on: {
+          open: () => console.log('复杂对话框打开'),
+          close: () => console.log('复杂对话框关闭')
+        }
+        }
+      const { close } = this.$dialogFnByJsx(config)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog-examples {
+  padding: 20px;
+}
+
+.dialog-examples .el-button {
+  margin-right: 10px;
+}
+
+.custom-content {
+  padding: 20px 0;
+}
+
+.complex-content {
+  padding: 20px 0;
+}
+
+:global(.complex-dialog) {
+  min-height: 400px;
+}
+</style>

package/app/dialogFnJsx/index.js

@@ -0,0 +1,59 @@
+import { Dialog } from "element-ui";
+import Vue from "vue";
+
+const DialogConstructor = Vue.extend(Dialog);
+
+export function dialogFn(options = {}) {
+  const {
+    slots = {},
+    props = {},
+    on = {},
+  } = options;
+
+  const dialog = new DialogConstructor({
+    el: document.createElement("div"),
+    render() {
+      const dialogProps = {
+        props: {
+          visible: true,
+          ...props,
+        },
+        on: {
+          "update:visible": (val) => {
+            dialog.visible = val;
+            if (!val) {
+              close();
+            }
+          },
+          ...on,
+        },
+      };
+
+      return (
+        <Dialog {...dialogProps}>
+          {slots.default && <template slot="default">{slots.default}</template>}
+          {slots.title && <template slot="title">{slots.title}</template>}
+          {slots.footer && <template slot="footer">{slots.footer}</template>}
+        </Dialog>
+      );
+    },
+  });
+
+  const close = () => {
+    on.close && on.close();
+    if (dialog && dialog.$el && dialog.$el.parentNode) {
+      dialog.$el.parentNode.removeChild(dialog.$el);
+      dialog.$destroy();
+      
+    }
+  };
+
+  Vue.nextTick(() => {
+    document.body.appendChild(dialog.$el);
+    on.open && on.open();
+  });
+
+  return { dialog, close };
+}
+
+Vue.prototype.$dialogFnByJsx = dialogFn;

package/app/dialogFnJsx/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <el-button @click="show">案例1jsx</el-button>
+    <el-button @click="show1">案例2jsx</el-button>
+    <span>{{ obj.a }}</span>
+  </div>
+</template>
+
+<script>
+import com from "./com.vue";
+
+export default {
+  name: "DialogFn",
+  components: {
+    com,
+  },
+  data() {
+    return {
+      obj: {  
+        a: 1,
+      }
+    };
+  },
+  methods: {
+    beforeClose(done) {
+      console.log("beforeClose");
+      done();
+    },
+    show() {
+      // 确保在打开新对话框前关闭旧的
+      const dialogConfig = {
+        slots: {
+          default: (
+            <com
+              nameProps="defaultSlot"
+              closeDialog={() => close()}
+              obj={this.obj}
+              showBtn={true}
+            >  <el-button type='text'>anniu</el-button></com>
+          ),
+          title: <com nameProps="标题titleSlot" />,
+          footer: (
+            <div>
+              <el-button onClick={() => close()}>取消</el-button>
+              <el-button type="primary" onClick={() => {}}>
+                确定
+              </el-button>
+            </div>
+          ),
+        },
+
+        props: {
+          title: "标题",
+          width: "500px",
+          top: "100px",
+          beforeClose: this.beforeClose,
+          destroyOnClose: true, // 关闭时销毁内容
+        },
+        on: {
+          close: () => {
+            console.log("关闭close");
+          },
+          open: () => {
+            console.log("打开opened");
+          }
+        },
+      };
+
+      const { close } = this.$dialogFnByJsx(dialogConfig);
+    },
+    show1() {
+      const dialogConfig = {
+        slots: {
+          default: (
+            <com
+              nameProps="简单案例"
+              closeDialog={() => close()}
+              showBtn={true}
+            >  </com>
+          ),
+        },
+        props: {
+          title: "标题",
+        },
+      }
+      const { close } = this.$dialogFnByJsx(dialogConfig);
+
+    }
+  },
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "npmapps",
-    "version": "1.0.3",
+    "version": "1.0.5",
     "main": "index.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"

package/app/pei3d.vue

@@ -1,579 +0,0 @@
-<template>
-  <!-- 3D饼图容器组件 -->
-  <div class="mff-main" style="position: relative;">
-   <div style="display: flex;
-   justify-content: center;
-   position: absolute;
-   z-index: 1;
-   left: 50%;
-   transform: translateX(-50%);
-   " v-if="isShowBtn">
-    <el-button
-      type="text"
-      size="small"
-      @click="toggleEqualHeight">{{ isEqualHeight ? "不等高" : "等高" }}</el-button>
-      <el-button
-      type="text"
-      size="small"
-      @click="toggleRotate">{{ isRotate ? '停止旋转' : '开始旋转' }}</el-button>
-   </div>
-    <!-- echarts图表容器 -->
-    <div class="mff-charts" :id="`mff-charts-${id}`"></div>
-  </div>
-</template>
-<script>
-// 引入echarts核心库
-import * as  echarts from "echarts";
-// 引入echarts-gl插件以支持3D图表
-import "echarts-gl";
-
-/**
- * @description 3D饼图组件
- * 该组件基于echarts-gl实现了一个可交互的3D饼图
- * 支持鼠标悬停高亮、点击选中等交互效果
- */
-export default {
-  name: "MffCharts",
-  props: {
-    // 饼图数据
-    optionData: {
-      type: Array,
-      default: () => [],
-    },
-    id: {
-      type: String,
-      default: "",
-      required: true,
-    },
-    isShowBtn: {
-      type: Boolean,
-      default: true, 
-    }
-  },
-  data() {
-    return {
-      // 控制所有扇区是否等高，true表示所有扇区高度相同
-      isEqualHeight: false,
-      // 是否旋转
-      isRotate: false,
-     
-    };
-  },
-  mounted() {
-    // 组件挂载后初始化3D饼图
-    this.init();
-  },
-  methods: {
-
-    // 切换所有扇区是否等高
-    toggleEqualHeight() {
-      this.isEqualHeight = !this.isEqualHeight;
-      this.init(false);
-    },
-
-    // 切换是否旋转
-    toggleRotate() {
-      this.isRotate =!this.isRotate;
-      this.init(true);
-    },
-
-    /**
-     * @description 初始化3D饼图
-     * 创建echarts实例，生成3D饼图配置，添加标签引导线
-     */
-    init(isInit = false) {
-        console.log(1111);
-        
-      // 初始化echarts实例
-      let myChart = echarts.init(
-        document.getElementById(`mff-charts-${this.id}`)
-      );
-      // 生成3D饼图配置，0.8为内部空心比例
-      this.option = this.getPie3D(this.optionData, 0.8);
-    //   myChart.setOption(this.option,isInit);
-      // 添加透明2D饼图用于显示标签引导线
-      // 通过调整起始角度和方向使引导线与3D饼图对齐
-      const data = this.optionData.map((item) => {
-        return {
-          value: item.value,
-          name: item.name,
-        };
-      });
-      this.option.series.push({
-        name: "pie2d",
-        type: "pie",
-        itemStyle: {
-        //   opacity: 0,
-          color: 'rgba(0,0,0,0)',
-        },
-        labelLine: {
-          show: !this.isRotate,
-          length: 20,
-          length2: 10,
-        },
-        label: {
-          show: true,
-          color: "#fff",
-          fontSize: 12,
-          formatter: function (params) {
-            return `${params.name}\n${params.value}\n${params.percent}%`;
-          },
-        },
-        startAngle: -40, //起始角度，支持范围[0, 360]。
-        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-        radius: ["20%", "50%"],
-        center: ["50%", "50%"],
-        data,
-       
-        
-      });
-      myChart.setOption(this.option, isInit);
-      this.bindListen(myChart);
-    },
-
-    /**
-     * @description 生成3D饼图的配置项
-     * @param {Array} pieData 饼图数据数组
-     * @param {number} internalDiameterRatio 内部空心占比(0-1)
-     * @returns {Object} echarts配置项
-     */
-    getPie3D(pieData, internalDiameterRatio) {
-      //internalDiameterRatio:透明的空心占比
-      let that = this;
-      let series = [];
-      let sumValue = 0;
-      let startValue = 0;
-      let endValue = 0;
-      let legendData = [];
-      let legendBfb = [];
-      let k = 1 - internalDiameterRatio;
-      pieData.sort((a, b) => {
-        return b.value - a.value;
-      });
-      // 为每一个饼图数据，生成一个 series-surface 配置
-      for (let i = 0; i < pieData.length; i++) {
-        sumValue += pieData[i].value;
-        let seriesItem = {
-          name:
-            typeof pieData[i].name === "undefined"
-              ? `series${i}`
-              : pieData[i].name,
-          type: "surface",
-          parametric: true,
-          wireframe: {
-            show: false,
-          },
-          pieData: pieData[i],
-          pieStatus: {
-            selected: false,
-            hovered: false,
-            k: k,
-          },
-          center: ["10%", "50%"],
-        };
-
-        if (typeof pieData[i].itemStyle != "undefined") {
-          let itemStyle = {};
-          typeof pieData[i].itemStyle.color != "undefined"
-            ? (itemStyle.color = pieData[i].itemStyle.color)
-            : null;
-          typeof pieData[i].itemStyle.opacity != "undefined"
-            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
-            : null;
-          seriesItem.itemStyle = itemStyle;
-        }
-        series.push(seriesItem);
-      }
-
-      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
-      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-      legendData = [];
-      legendBfb = [];
-      for (let i = 0; i < series.length; i++) {
-        endValue = startValue + series[i].pieData.value;
-        series[i].pieData.startRatio = startValue / sumValue;
-        series[i].pieData.endRatio = endValue / sumValue;
-        series[i].parametricEquation = this.getParametricEquation(
-          series[i].pieData.startRatio,
-          series[i].pieData.endRatio,
-          false,
-          false,
-          k,
-          series[i].pieData.value
-        );
-        startValue = endValue;
-        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
-        legendData.push({
-          name: series[i].name,
-          value: bfb,
-        });
-        legendBfb.push({
-          name: series[i].name,
-          value: bfb,
-        });
-      }
-      let boxHeight = this.getHeight3D(series, 26);
-      //通过传参设定3d饼/环的高度，26代表26px
-      // 准备待返回的配置项，把准备好的 legendData、series 传入。
-      let option = {
-        legend: {
-          show: false,
-        },
-        labelLine: {
-          show: false,
-        },
-
-        tooltip: {
-          formatter: (params) => {
-            if (
-              params.seriesName !== "mouseoutSeries" &&
-              params.seriesName !== "pie2d"
-            ) {
-              let bfb = (
-                (option.series[params.seriesIndex].pieData.endRatio -
-                  option.series[params.seriesIndex].pieData.startRatio) *
-                100
-              ).toFixed(2);
-              return (
-                `${params.seriesName}<br/>` +
-                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
-                this.formatNumberWithCommas(option.series[params.seriesIndex].pieData.value)
-              );
-            }
-          },
-        },
-        xAxis3D: {
-          min: -1,
-          max: 1,
-        },
-        yAxis3D: {
-          min: -1,
-          max: 1,
-        },
-        zAxis3D: {
-          min: -1,
-          max: 2,
-        },
-        grid3D: {
-          show: false,
-          boxHeight: boxHeight, //圆环的高度
-          viewControl: {
-            //3d效果可以放大、旋转等，请自己去查看官方配置
-            alpha: 44, //角度
-            distance: 280, //调整视角到主体的距离，类似调整zoom
-            rotateSensitivity: 0, //设置为0无法旋转
-            zoomSensitivity: 0, //设置为0无法缩放
-            panSensitivity: 0, //设置为0无法平移
-            autoRotate: this.isRotate, //自动旋转
-          },
-        },
-        series: series,
-      };
-      return option;
-    },
-
-    //获取3d丙图的最高扇区的高度
-    /**
-     * @description 计算3D饼图的高度
-     * @param {Array} series 系列数据
-     * @param {number} height 基础高度
-     * @returns {number} 计算后的高度
-     */
-    getHeight3D(series, height) {
-      // if(this.isEqualHeight) return height * 3;
-      series.sort((a, b) => {
-        return b.pieData.value - a.pieData.value;
-      });
-      return (height * 25) / series[0].pieData.value;
-    },
-
-    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
-    /**
-     * @description 生成3D扇形的参数方程
-     * @param {number} startRatio 起始比例
-     * @param {number} endRatio 结束比例
-     * @param {boolean} isSelected 是否被选中
-     * @param {boolean} isHovered 是否被悬停
-     * @param {number} k 内外径比例
-     * @param {number} h 高度
-     * @returns {Object} 参数方程对象
-     */
-    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
-      if (this.isEqualHeight) {
-        if(this.id === "1") {
-          h = 20000;
-        }
-        if(this.id === "2") {
-          h = 1500; 
-        }
-        // // 添加缩放因子，使大数值的柱子间距更合理
-      }
-      k = k * 1.3;
-
-      // 计算
-      let midRatio = (startRatio + endRatio) / 2;
-      let startRadian = startRatio * Math.PI * 2;
-      let endRadian = endRatio * Math.PI * 2;
-      let midRadian = midRatio * Math.PI * 2;
-      // 如果只有一个扇形，则不实现选中效果。
-      if (startRatio === 0 && endRatio === 1) {
-        isSelected = false;
-      }
-      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
-      k = typeof k !== "undefined" ? k : 1 / 3;
-      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
-      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
-      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
-      // 计算高亮效果的放大比例（未高亮，则比例为 1）
-      let hoverRate = isHovered ? 1.05 : 1;
-      // 返回曲面参数方程
-      return {
-        u: {
-          min: -Math.PI,
-          max: Math.PI * 3,
-          step: Math.PI / 32,
-        },
-        v: {
-          min: 0,
-          max: Math.PI * 2,
-          step: Math.PI / 20,
-        },
-        x: function (u, v) {
-          if (u < startRadian) {
-            return (
-              offsetX +
-              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
-            );
-          }
-          if (u > endRadian) {
-            return (
-              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
-            );
-          }
-          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
-        },
-        y: function (u, v) {
-          if (u < startRadian) {
-            return (
-              offsetY +
-              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
-            );
-          }
-          if (u > endRadian) {
-            return (
-              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
-            );
-          }
-          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
-        },
-        z: function (u, v) {
-          if (u < -Math.PI * 0.5) {
-            return Math.sin(u);
-          }
-          if (u > Math.PI * 2.5) {
-            return Math.sin(u) * h * 0.1;
-          }
-          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
-        },
-      };
-    },
-
-    /**
-     * @description 格式化浮点数
-     * @param {number} num 需要格式化的数字
-     * @param {number} n 保留小数位数
-     * @returns {string} 格式化后的字符串
-     */
-    fomatFloat(num, n) {
-      var f = parseFloat(num);
-      if (isNaN(f)) {
-        return false;
-      }
-      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
-      var s = f.toString();
-      var rs = s.indexOf(".");
-      //判定如果是整数，增加小数点再补0
-      if (rs < 0) {
-        rs = s.length;
-        s += ".";
-      }
-      while (s.length <= rs + n) {
-        s += "0";
-      }
-      return s;
-    },
-
-    /**
-     * @description 绑定图表交互事件
-     * @param {Object} myChart echarts实例
-     * 实现饼图的选中效果（单选）和高亮（放大）效果
-     */
-    bindListen(myChart) {
-    //   // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
-    //   let that = this;
-    //   let selectedIndex = "";
-    //   let hoveredIndex = "";
-      // 监听点击事件，实现选中效果（单选）
-      myChart.on("click", function (params) {
-        console.log('click');
-        
-        return
-        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
-        let isSelected =
-          !that.option.series[params.seriesIndex].pieStatus.selected;
-        let isHovered =
-          that.option.series[params.seriesIndex].pieStatus.hovered;
-        let k = that.option.series[params.seriesIndex].pieStatus.k;
-        let startRatio =
-          that.option.series[params.seriesIndex].pieData.startRatio;
-        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
-        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
-        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
-          that.option.series[selectedIndex].parametricEquation =
-            that.getParametricEquation(
-              that.option.series[selectedIndex].pieData.startRatio,
-              that.option.series[selectedIndex].pieData.endRatio,
-              false,
-              false,
-              k,
-              that.option.series[selectedIndex].pieData.value
-            );
-          that.option.series[selectedIndex].pieStatus.selected = false;
-        }
-        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
-        that.option.series[params.seriesIndex].parametricEquation =
-          that.getParametricEquation(
-            startRatio,
-            endRatio,
-            isSelected,
-            isHovered,
-            k,
-            that.option.series[params.seriesIndex].pieData.value
-          );
-        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
-        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
-        isSelected ? (selectedIndex = params.seriesIndex) : null;
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(that.option);
-      });
-
-      return
-      // 监听 mouseover，近似实现高亮（放大）效果
-      myChart.on("mouseover", function (params) {
-        // 准备重新渲染扇形所需的参数
-        let isSelected;
-        let isHovered;
-        let startRatio;
-        let endRatio;
-        let k;
-        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
-        if (hoveredIndex === params.seriesIndex) {
-          return;
-          // 否则进行高亮及必要的取消高亮操作
-        } else {
-          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
-          if (hoveredIndex !== "") {
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
-            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
-            isHovered = false;
-            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
-            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
-            k = that.option.series[hoveredIndex].pieStatus.k;
-            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-            that.option.series[hoveredIndex].parametricEquation =
-              that.getParametricEquation(
-                startRatio,
-                endRatio,
-                isSelected,
-                isHovered,
-                k,
-                that.option.series[hoveredIndex].pieData.value
-              );
-            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
-            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-            hoveredIndex = "";
-          }
-          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
-          if (
-            params.seriesName !== "mouseoutSeries" &&
-            params.seriesName !== "pie2d"
-          ) {
-            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-            isSelected =
-              that.option.series[params.seriesIndex].pieStatus.selected;
-            isHovered = true;
-            startRatio =
-              that.option.series[params.seriesIndex].pieData.startRatio;
-            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
-            k = that.option.series[params.seriesIndex].pieStatus.k;
-            // 对当前点击的扇形，执行高亮操作（对 option 更新）
-            that.option.series[params.seriesIndex].parametricEquation =
-              that.getParametricEquation(
-                startRatio,
-                endRatio,
-                isSelected,
-                isHovered,
-                k,
-                that.option.series[params.seriesIndex].pieData.value + 5
-              );
-            that.option.series[params.seriesIndex].pieStatus.hovered =
-              isHovered;
-            // 记录上次高亮的扇形对应的系列号 seriesIndex
-            hoveredIndex = params.seriesIndex;
-          }
-          // 使用更新后的 option，渲染图表
-          myChart.setOption(that.option);
-        }
-      });
-      // 修正取消高亮失败的 bug
-      myChart.on("globalout", function () {
-        // 准备重新渲染扇形所需的参数
-        let isSelected;
-        let isHovered;
-        let startRatio;
-        let endRatio;
-        let k;
-        if (hoveredIndex !== "") {
-          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
-          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
-          isHovered = false;
-          k = that.option.series[hoveredIndex].pieStatus.k;
-          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
-          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
-          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
-          that.option.series[hoveredIndex].parametricEquation =
-            that.getParametricEquation(
-              startRatio,
-              endRatio,
-              isSelected,
-              isHovered,
-              k,
-              that.option.series[hoveredIndex].pieData.value
-            );
-          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
-          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
-          hoveredIndex = "";
-        }
-        // 使用更新后的 option，渲染图表
-        myChart.setOption(that.option);
-      });
-    },
-
-     formatNumberWithCommas(num) {
-    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-}
-  },
-};
-</script>
-
-<style scoped>
-.mff-main {
-  width: 100%;
-  height: 100%;
-  background-color: #000a3b;
-}
-.mff-charts {
-    width: 100%;
-    height: 100%;
-}
-</style>