npmapps 1.2.0 → 1.3.1

package/app/wujie-wk/wujie-vue2-child/src/views/echarts/pei3d.vue

@@ -1,658 +0,0 @@
-<template>
-  <!-- 3D饼图容器组件 -->
-  <div class="pei3d-page">
-    <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 style=" height: 100%;position: relative;">
-        <div class="mff-charts" :id="`mff-charts-${id}`"></div>
-        <div class="mff-charts" :id="`mff-charts-copy-${id}`" style="position: absolute;top: 0;height: 100%; width: 100%;"></div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-// 引入echarts核心库
-import * as  echarts from "echarts";
-// 引入echarts-gl插件以支持3D图表
-import "echarts-gl";
-import _ from "lodash";
-/**
- * @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}`)
-      );
-      let myChartCopy = echarts.init(
-        document.getElementById(`mff-charts-copy-${this.id}`)
-      );
-      // 生成3D饼图配置，0.8为内部空心比例
-      this.option = this.getPie3D(this.optionData, 0.8);
-      this.optionCopy = 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,
-          rich: {
-            name: {
-              fontSize: 14,
-              fontWeight: 'bold',
-              padding: [0, 0, 5, 0]
-            },
-            value: {
-              fontSize: 12
-            },
-            percent: {
-              fontSize: 12,
-              color: '#42f59e'
-            }
-          },
-          formatter: function (params) {
-            return [
-              '{name|' + params.name + '}',
-              '{value|' + params.value + '}',
-              '{percent|' + params.percent + '%}'
-            ].join('\n');
-          }
-        },
-        startAngle: -40, //起始角度，支持范围[0, 360]。
-        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-        radius: ["20%", "70%"],
-        center: ["50%", "50%"],
-        data,
-       
-        
-      });
-      this.optionCopy.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,
-          rich: {
-            name: {
-              fontSize: 14,
-              fontWeight: 'bold',
-              padding: [0, 0, 5, 0]
-            },
-            value: {
-              fontSize: 12
-            },
-            percent: {
-              fontSize: 12,
-              color: '#42f59e'
-            }
-          },
-          formatter: function (params) {
-            return [
-              '{name|' + params.name + '}',
-              '{value|' + params.value + '}',
-              '{percent|' + params.percent + '%}'
-            ].join('\n');
-          }
-        },
-        startAngle: -40, //起始角度，支持范围[0, 360]。
-        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-        radius: ["20%", "70%"],
-        center: ["50%", "50%"],
-        data,
-       
-      })
-      myChart.setOption(this.option, isInit);
-      myChartCopy.setOption(this.optionCopy, isInit);
-      this.bindListen(myChart);
-      this.bindListen(myChartCopy);
-    },
-
-    /**
-     * @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: 190, //调整视角到主体的距离，类似调整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>
-.pei3d-page {
-  width: 100%;
-  height: 100%;
-}
-.mff-main {
-  width: 100%;
-  height: 100%;
-  background-color: #000a3b;
-}
-.mff-charts {
-    width: 100%;
-    height: 100%;
-}
-</style>

package/app/wujie-wk/wujie-vue2-child/src/views/element/bpmn/index.vue

@@ -1,15 +0,0 @@
-<template>
-    <div>
-      <Diagram class="home" />
-    </div>
-  </template>
-
-  <script>
-  import Diagram from '@/components/diagram'
-
-  export default {
-    components: {
-      Diagram
-    }
-  }
-  </script>