Merge remote-tracking branch 'origin/master'

package.json

@@ -38,6 +38,7 @@
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "echarts": "5.4.0",
+    "echarts-gl": "^2.0.9",
     "element-ui": "2.15.12",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

src/api/kanban/dailyoutput.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// 获取工厂下拉列表
+export function getBoardFactory(data) {
+	return request({
+		url: '/mes/wcsInterface/getBoardFactory',
+		method: 'post',
+		data: data
+	});
+}
+// 获取产量数据
+export function getMesBoardEquProductionToday(data) {
+	return request({
+		url: '/mes/wcsInterface/getMesBoardEquProductionToday',
+		method: 'post',
+		data: data
+	});
+}

src/components/itemSelect/single.vue

@@ -215,7 +215,7 @@ export default {
     },
     // 单选选中数据
     handleRowChange(row) {
-      debugger;
+      // debugger;
       if(row){
         this.selectedRows = row;
       }

src/main.js

@@ -4,7 +4,9 @@ import Cookies from 'js-cookie'
 
 import Element from 'element-ui'
 import './assets/styles/element-variables.scss'
-
+import * as echarts from 'echarts'
+import 'echarts-gl' // 3d图表库
+ 
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/open-platform.scss' // OpenPlatform css
 import App from './App'
@@ -41,6 +43,7 @@ import DictData from '@/components/DictData'
 import Print from 'print-js'
 
 // 全局方法挂载
+Vue.prototype.$echarts = echarts
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
 Vue.prototype.parseTime = parseTime

src/router/index.js

@@ -87,7 +87,19 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
-  }
+  },
+  // 看板路由
+  {
+    path: "/kanban/dailyoutput",
+    component: () => import("@/views/kanban/dailyoutput/index"),
+    hidden: true,
+  },
+   // 看板路由
+   {
+    path: "/kanban/3decharts",
+    component: () => import("@/views/kanban/3decharts/index"),
+    hidden: true,
+  },
 ]
 
 // 动态路由，基于用户权限动态去加载

src/utils/echart.js

@@ -0,0 +1,280 @@
+/**
+ * 绘制3d图
+ * @param pieData 总数据
+ * @param internalDiameterRatio:透明的空心占比
+ * @param distance 视角到主体的距离
+ * @param alpha 旋转角度
+ * @param pieHeight 立体的高度
+ * @param opacity 饼或者环的透明度
+ */
+const getPie3D = (pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) => {
+  if(pieData.length <0){
+    return
+  }
+  console.log(pieData)
+  const series = []
+  let sumValue = 0
+  let startValue = 0
+  let endValue = 0
+  let legendData = []
+  let legendBfb = []
+  const 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
+    const 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') {
+      const itemStyle = {}
+      itemStyle.color =
+        typeof pieData[i].itemStyle.color !== 'undefined'
+          ? pieData[i].itemStyle.color
+          : opacity
+      itemStyle.opacity =
+        typeof pieData[i].itemStyle.opacity !== 'undefined'
+          ? pieData[i].itemStyle.opacity
+          : opacity
+      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 = getParametricEquation(
+      series[i].pieData.startRatio,
+      series[i].pieData.endRatio,
+      false,
+      false,
+      k,
+      series[i].pieData.value
+    )
+    startValue = endValue
+    const bfb = fomatFloat(series[i].pieData.value / sumValue, 4)
+    legendData.push({
+      name: series[i].name,
+      value: bfb
+    })
+    legendBfb.push({
+      name: series[i].name,
+      value: bfb
+    })
+  }
+  const boxHeight = getHeight3D(series, pieHeight) // 通过pieHeight设定3d饼/环的高度，单位是px
+  // 准备待返回的配置项，把准备好的 legendData、series 传入。
+  const option = {
+    legend: {
+      show: false,
+      data: legendData,
+      orient: 'vertical',
+      left: 10,
+      top: 10,
+      itemGap: 10,
+      textStyle: {
+        color: '#A1E2FF'
+      },
+      icon: 'circle',
+      formatter: function (param) {
+        const item = legendBfb.filter(item => item.name === param)[0]
+        const bfs = fomatFloat(item.value * 100, 2) + '%'
+        return `${item.name}  ${bfs}`
+      }
+      
+    },
+    labelLine: {
+      show: true,
+      lineStyle: {
+        color: '#fff'
+      }
+    },
+    label: {
+      show: true,
+      position: 'outside',
+      formatter: '{b} \n{c} {d}%'
+    },
+    tooltip: {
+      backgroundColor: '#033b77',
+      borderColor: '#21f2c4',
+      textStyle: {
+        color: '#fff',
+        fontSize: 13
+      },
+      formatter: params => {
+        if (
+          params.seriesName !== 'mouseoutSeries' &&
+          params.seriesName !== 'pie2d'
+        ) {
+          const 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>` +
+            `${bfb}%`
+          )
+        }
+      }
+    },
+    xAxis3D: {
+      min: -1,
+      max: 1
+    },
+    yAxis3D: {
+      min: -1,
+      max: 1
+    },
+    zAxis3D: {
+      min: -1,
+      max: 1
+    },
+    grid3D: {
+      show: false,
+      boxHeight: boxHeight,
+      // boxWidth:180,  // 圆环的高度
+      viewControl: {
+        // 3d效果可以放大、旋转等，请自己去查看官方配置
+        alpha, // 角度
+        distance, // 调整视角到主体的距离，类似调整zoom
+        rotateSensitivity: 0, // 设置为0无法旋转
+        zoomSensitivity: 0, // 设置为0无法缩放
+        panSensitivity: 0, // 设置为0无法平移
+        autoRotate: false // 自动旋转
+      }
+    },
+    series: series
+  }
+  return option
+}
+
+/**
+ * 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+ */
+const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h) => {
+  // 计算
+  const midRatio = (startRatio + endRatio) / 2
+  const startRadian = startRatio * Math.PI * 2
+  const endRadian = endRatio * Math.PI * 2
+  const 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）
+  const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
+  const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
+  // 计算高亮效果的放大比例（未高亮，则比例为 1）
+  const 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
+    }
+  }
+}
+
+/**
+ * 获取3d丙图的最高扇区的高度
+ */
+const getHeight3D = (series, height) => {
+  series.sort((a, b) => {
+    return b.pieData.value - a.pieData.value
+  })
+  return (height * 25) / series[0].pieData.value
+}
+
+/**
+ * 格式化浮点数
+ */
+const fomatFloat = (num, n) => {
+  let f = parseFloat(num)
+  if (isNaN(f)) {
+    return false
+  }
+  f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
+  let s = f.toString()
+  let rs = s.indexOf('.')
+  // 判定如果是整数，增加小数点再补0
+  if (rs < 0) {
+    rs = s.length
+    s += '.'
+  }
+  while (s.length <= rs + n) {
+    s += '0'
+  }
+  return s
+}
+
+export { getPie3D, getParametricEquation }

src/utils/request.js

@@ -56,7 +56,7 @@ service.interceptors.request.use(config => {
       if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
         const message = '数据正在处理，请勿重复提交';
         console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
+        // return Promise.reject(new Error(message))
       } else {
         cache.session.setJSON('sessionObj', requestObj)
       }
@@ -93,7 +93,7 @@ service.interceptors.response.use(res => {
       return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
     } else if (code === 500) {
       Message({ message: msg, type: 'error' })
-      return Promise.reject(new Error(msg))
+      // return Promise.reject(new Error(msg))
     } else if (code === 601) {
       Message({ message: msg, type: 'warning' })
       return Promise.reject('error')

src/views/dashboard/LineChart.vue

@@ -53,7 +53,7 @@
       }
     },
     mounted() {
-      debugger
+      // debugger
       this.$nextTick(() => {
         this.initChart()
       })

src/views/kanban/3decharts/index.vue

@@ -0,0 +1,543 @@
+<template>
+  <div class="chart-container">
+    <div class="chart" ref="chart"></div>
+    <!-- 底座背景 -->
+    <div class="bg"></div>
+    <div style="margin: auto; width: 486px; height: 316px" ref="pie3d" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      optionData: [
+        {
+          code: "3",
+          name: "病区四",
+          cws: 80,
+          zcs: 20,
+          zcl: "25%",
+          value: 80,
+          startRatio: 0,
+          endRatio: 0.34782608695652173,
+        },
+        {
+          code: "0",
+          name: "病区一",
+          cws: 60,
+          zcs: 30,
+          zcl: "50%",
+          value: 60,
+          startRatio: 0.34782608695652173,
+          endRatio: 0.6086956521739131,
+        },
+        {
+          code: "2",
+          name: "病区三",
+          cws: 50,
+          zcs: 20,
+          zcl: "40%",
+          value: 50,
+          startRatio: 0.6086956521739131,
+          endRatio: 0.8260869565217391,
+        },
+        {
+          code: "1",
+          name: "病区二",
+          cws: 40,
+          zcs: 30,
+          zcl: "75%",
+          value: 40,
+          startRatio: 0.8260869565217391,
+          endRatio: 1,
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(this.$refs.pie3d);
+    this.setLabel()
+    this.init();
+  },
+  methods: {
+    //初始化构建
+    setLabel() {
+      const that = this;
+      this.optionData.forEach((item, index) => {
+        // item.itemStyle = {
+        //   color: that.color[index],
+        // };
+        item.label = {
+          normal: {
+            show: true,
+            // color: that.color[index],
+            formatter: ["{b|{b}}", "{c|{c}}{b|台}", "{d|{d}%}"].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                color: "#fff",
+                lineHeight: 25,
+                align: "left",
+              },
+              c: {
+                fontSize: 22,
+                color: "#fff",
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+              },
+              d: {
+                // color: that.color[index],
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            lineStyle: {
+              width: 1,
+              color: "rgba(255,255,255,0.7)",
+            },
+          },
+        };
+      });
+    },
+    init() {
+      // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+      this.option = this.getPie3D(this.optionData, 0.85);
+      //将配置项设置进去
+      this.myChart.setOption(this.option);
+      //鼠标移动上去特效效果
+      this.bindListen(this.myChart);
+    },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 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);
+      });
+      // 监听 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);
+      });
+    },
+    getPie3D(pieData, 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,
+          },
+        };
+        //曲面的颜色、不透明度等样式。
+        // 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, 15); //通过传参设定3d饼/环的高度
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        //图例组件
+        legend: {
+          data: legendData,
+          //图例列表的布局朝向。
+          orient: "horizontal",
+          left: "0%",
+          //图例文字每项之间的间隔
+          itemGap: 10,
+          textStyle: {
+            color: "#A1E2FF",
+            fontSize: "0.5rem",
+          },
+          show: true,
+          icon: "circle",
+          //格式化图例文本（我是数值什么显示什么）
+          // formatter: function (name) {
+          //   var target;
+          //   for (var i = 0, l = pieData.length; i < l; i++) {
+          //     if (pieData[i].name == name) {
+          //       target = pieData[i].value;
+          //     }
+          //   }
+          //   return `${name}: ${target}`;
+          // }
+          // 这个可以显示百分比那种（可以根据你想要的来配置）
+          //   formatter: function(param) {
+          //       let item = legendBfb.filter(item => item.name == param)[0];
+          //       let bfs = that.fomatFloat(item.value * 100, 2) + "%";
+          //       console.log(item.name)
+          //       return `${item.name} :${bfs}`;
+          //   }
+        },
+        //移动上去提示的文本内容
+        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>` +
+                `${bfb}`
+              );
+            }
+          },
+        },
+        //这个可以变形
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        //此处是修改样式的重点
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, //圆环的高度
+          //这是饼图的位置
+          top: "15%",
+          viewControl: {
+            //3d效果可以放大、旋转等，请自己去查看官方配置
+            alpha: 35, //角度(这个很重要 调节角度的)
+            distance: 165, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+            rotateSensitivity: 1, //设置为0无法旋转
+            zoomSensitivity: 0, //设置为0无法缩放
+            panSensitivity: 0, //设置为0无法平移
+            autoRotate: true, //自动旋转
+          },
+        },
+        series: series,
+      };
+      return option;
+    },
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return b.pieData.value - a.pieData.value;
+      });
+      return (height * 25) / series[0].pieData.value;
+    },
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      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;
+        },
+      };
+    },
+    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;
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .chart,.pie3d,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    z-index: -1;
+    width: 180px;
+    height: 73px;
+    background: no-repeat center;
+    background-image: url("https://ks3-cn-beijing.ksyun.com/sxjg-elevator/datav-platform-2.0/images/chart_opacity_bg.png");
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/kanban/dailyoutput/echarts3d.vue

@@ -0,0 +1,334 @@
+<template>
+  <div class="chart-container">
+    <div class="chart"  :class="{'activehide':isActive}" ref="chart"></div>
+    <!-- 底座背景 -->
+  </div>
+</template>
+ 
+<script>
+import { getPie3D, getParametricEquation } from "../../../utils/echart.js"; //工具类js，页面路径自己修改
+
+const color = ["#005aff", "#f8b551"];
+
+export default {
+  name: "chart",
+  props: ["list", "colorlist"],
+  data() {
+    return {
+      optionData: [],
+      statusChart: null,
+      option: {},
+      isActive:false,
+      // color:["#005aff", "#f8b551",'#7CDCAC'],
+    };
+  },
+  watch: {
+    list: function (newVal, oldVal) {
+      console.log(newVal, oldVal)
+      if(newVal.length < 0){
+        return
+      }
+      if(newVal.length == oldVal.length){
+        return
+      }
+      if (this.list.length > 0) {
+        this.setLabel();
+        this.isActive = false
+        setTimeout(() => {
+          this.initChart();
+        }, 1000);
+      }else{
+        this.optionData = []
+        this.isActive = true
+        // setTimeout(() => {
+        //   this.initChart();
+        // }, 1000);
+      }
+    },
+    colorlist: function (newVal, oldVal) {},
+  },
+  created() {
+    // console.log(this.list);
+    // this.color = this.colorlist
+  },
+  mounted() {
+    // this.setLabel();
+    // this.initChart();
+    //根据窗口变化自动调节图表大小
+    const that = this;
+    window.onresize = function () {
+      that.changeSize();
+    };
+  },
+  methods: {
+    // 初始化label样式
+    setLabel() {
+      const that = this;
+      this.optionData = this.list;
+      this.optionData.forEach((item, index) => {
+        // item.itemStyle = {
+        //   color: that.color[index],
+        // };
+        item.label = {
+          normal: {
+            show: true,
+            // color: that.color[index],
+            formatter: ["{b|{b}}:", "{d|{d}%}"].join(""), // 用\n来换行
+            rich: {
+              b: {
+                color: "#fff",
+                lineHeight: 25,
+                align: "left",
+              },
+              c: {
+                fontSize: 22,
+                color: "#fff",
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+              },
+              d: {
+                color: "#fff",
+                align: "left",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            lineStyle: {
+              width: 1,
+              color: "rgba(255,255,255,0.7)",
+            },
+          },
+        };
+      });
+    },
+    // 图表初始化
+    initChart() {
+      this.statusChart = this.$echarts.init(this.$refs.chart);
+      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
+      this.optionData = this.list;
+      this.option = getPie3D(this.optionData, 0.8, 240, 50, 26, 0.5);
+      this.statusChart.setOption(this.option);
+      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+      this.option.series.push({
+        // backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          // show: true,
+
+          opacity: 1,
+          alignTo: "labelLine",
+          color: "#FFFFFF",
+          fontSize: 12,
+          // lineHeight: 20,
+        },
+
+        labelLine: {
+          length: 30,
+          length2: 0,
+          maxSurfaceAngle: 100,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["50%", "70%"],
+        center: ["50%", "50%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      this.statusChart.setOption(this.option);
+      this.bindListen(this.statusChart);
+    },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
+    bindListen(myChart, optionName = "option") {
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", (params) => {
+        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+        const isSelected =
+          !this[optionName].series[params.seriesIndex].pieStatus.selected;
+        const isHovered =
+          this[optionName].series[params.seriesIndex].pieStatus.hovered;
+        const k = this[optionName].series[params.seriesIndex].pieStatus.k;
+        const startRatio =
+          this[optionName].series[params.seriesIndex].pieData.startRatio;
+        const endRatio =
+          this[optionName].series[params.seriesIndex].pieData.endRatio;
+        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
+          this[optionName].series[selectedIndex].parametricEquation =
+            getParametricEquation(
+              this[optionName].series[selectedIndex].pieData.startRatio,
+              this[optionName].series[selectedIndex].pieData.endRatio,
+              false,
+              false,
+              k,
+              this[optionName].series[selectedIndex].pieData.value
+            );
+          this[optionName].series[selectedIndex].pieStatus.selected = false;
+        }
+        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+        this[optionName].series[params.seriesIndex].parametricEquation =
+          getParametricEquation(
+            startRatio,
+            endRatio,
+            isSelected,
+            isHovered,
+            k,
+            this[optionName].series[params.seriesIndex].pieData.value
+          );
+        this[optionName].series[params.seriesIndex].pieStatus.selected =
+          isSelected;
+        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+        selectedIndex = isSelected ? params.seriesIndex : null;
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+      // 监听 mouseover，近似实现高亮（放大）效果
+      myChart.on("mouseover", (params) => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+          // 否则进行高亮及必要的取消高亮操作
+        } else {
+          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+          if (hoveredIndex !== "") {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+            isSelected =
+              this[optionName].series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            startRatio =
+              this[optionName].series[hoveredIndex].pieData.startRatio;
+            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+            k = this[optionName].series[hoveredIndex].pieStatus.k;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            this[optionName].series[hoveredIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[hoveredIndex].pieData.value
+              );
+            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = "";
+          }
+          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+          if (
+            params.seriesName !== "mouseoutSeries" &&
+            params.seriesName !== "pie2d"
+          ) {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected =
+              this[optionName].series[params.seriesIndex].pieStatus.selected;
+            isHovered = true;
+            startRatio =
+              this[optionName].series[params.seriesIndex].pieData.startRatio;
+            endRatio =
+              this[optionName].series[params.seriesIndex].pieData.endRatio;
+            k = this[optionName].series[params.seriesIndex].pieStatus.k;
+            // 对当前点击的扇形，执行高亮操作（对 option 更新）
+            this[optionName].series[params.seriesIndex].parametricEquation =
+              getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                this[optionName].series[params.seriesIndex].pieData.value + 60
+              );
+            this[optionName].series[params.seriesIndex].pieStatus.hovered =
+              isHovered;
+            // 记录上次高亮的扇形对应的系列号 seriesIndex
+            hoveredIndex = params.seriesIndex;
+          }
+          // 使用更新后的 option，渲染图表
+          myChart.setOption(this[optionName]);
+        }
+      });
+      // 修正取消高亮失败的 bug
+      myChart.on("globalout", () => {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== "") {
+          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
+          isHovered = false;
+          k = this[optionName].series[hoveredIndex].pieStatus.k;
+          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
+          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
+          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+          this[optionName].series[hoveredIndex].parametricEquation =
+            getParametricEquation(
+              startRatio,
+              endRatio,
+              isSelected,
+              isHovered,
+              k,
+              this[optionName].series[hoveredIndex].pieData.value
+            );
+          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
+          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+          hoveredIndex = "";
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(this[optionName]);
+      });
+    },
+    // 自适应宽高
+    changeSize() {
+      this.statusChart.resize();
+    },
+  },
+};
+</script>
+ 
+<style lang='scss' scoped>
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .chart,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    z-index: -1;
+    width: 180px;
+    height: 73px;
+    background: no-repeat center;
+    background-image: url("https://ks3-cn-beijing.ksyun.com/sxjg-elevator/datav-platform-2.0/images/chart_opacity_bg.png");
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+.activehide{
+  display: none;
+}
+</style>

src/views/kanban/dailyoutput/echarts3d2.vue

@@ -0,0 +1,540 @@
+<template>
+  <div class="chart-container">
+    <!-- 底座背景 -->
+    <div style="margin: auto; width: 439.17px; height: 183px" ref="pie3d" />
+  </div>
+</template>
+<script>
+export default {
+  props: ["list", "colorlist"],
+  data() {
+    return {
+      optionData: [],
+    };
+  },
+  watch: {
+    list: function (newVal, oldVal) {
+      // this.optionData = this.list;
+      if(this.optionData.length >0){
+
+      }
+      this.init();
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(this.$refs.pie3d);
+    this.setLabel();
+    this.init();
+  },
+  methods: {
+    setLabel() {
+      const that = this;
+      this.optionData.forEach((item, index) => {
+        // item.itemStyle = {
+        //   color: that.color[index],
+        // };
+        item.label = {
+          normal: {
+            show: true,
+            // color: that.color[index],
+            formatter: ["{b|{b}}", "{c|{c}}{b|台}", "{d|{d}%}"].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                color: "#fff",
+                lineHeight: 25,
+                align: "left",
+              },
+              c: {
+                fontSize: 22,
+                color: "#fff",
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+              },
+              d: {
+                // color: that.color[index],
+                align: "left",
+              },
+            },
+          },
+        };
+        item.labelLine = {
+          normal: {
+            lineStyle: {
+              width: 1,
+              color: "rgba(255,255,255,0.7)",
+            },
+          },
+        };
+      });
+    },
+    //初始化构建
+    init() {
+      // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
+      this.optionData = this.list;
+      this.option = this.getPie3D(this.optionData, 0.85)
+      this.option.series.push({
+        // backgroundColor: "transparent",
+        type: "pie",
+        label: {
+          // show: true,
+
+          opacity: 1,
+          alignTo: "labelLine",
+          color: "#FFFFFF",
+          fontSize: 12,
+          // lineHeight: 20,
+        },
+
+        labelLine: {
+          length: 50,
+          length2: 0,
+          maxSurfaceAngle: 100,
+        },
+        startAngle: -40, // 起始角度，支持范围[0, 360]。
+        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ["20%", "50%"],
+        center: ["50%", "48%"],
+        data: this.optionData,
+        itemStyle: {
+          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
+        },
+      });
+      //将配置项设置进去
+      this.myChart.setOption(this.option);
+      //鼠标移动上去特效效果
+      this.bindListen(this.myChart);
+    },
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    bindListen(myChart) {
+      let that = this;
+      let selectedIndex = "";
+      let hoveredIndex = "";
+      // 监听点击事件，实现选中效果（单选）
+      myChart.on("click", function (params) {
+        // 从 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);
+      });
+      // 监听 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);
+      });
+    },
+    getPie3D(pieData, 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,
+          },
+        };
+        //曲面的颜色、不透明度等样式。
+        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, 15); //通过传参设定3d饼/环的高度
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+      let option = {
+        //图例组件
+        legend: {
+          data: legendData,
+          //图例列表的布局朝向。
+          orient: "horizontal",
+          left: "0%",
+          //图例文字每项之间的间隔
+          itemGap: 10,
+          textStyle: {
+            color: "#A1E2FF",
+            fontSize: 12,
+          },
+          show: true,
+          icon: "circle",
+          //格式化图例文本（我是数值什么显示什么）
+          // formatter: function (name) {
+          //   var target;
+          //   for (var i = 0, l = pieData.length; i < l; i++) {
+          //     if (pieData[i].name == name) {
+          //       target = pieData[i].value;
+          //     }
+          //   }
+          //   return `${name}: ${target}`;
+          // }
+          // 这个可以显示百分比那种（可以根据你想要的来配置）
+          formatter: function (param) {
+            let item = legendBfb.filter((item) => item.name == param)[0];
+            let bfs = that.fomatFloat(item.value * 100, 2) + "%";
+            return `${item.name} :${bfs}`;
+          },
+        },
+        //移动上去提示的文本内容
+        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>` +
+                `${bfb}`+
+                `%`
+              );
+            }
+          },
+        },
+        //这个可以变形
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        //此处是修改样式的重点
+        grid3D: {
+          show: false,
+          boxHeight: boxHeight, //圆环的高度
+          //这是饼图的位置
+          top: "22%",
+          left:"-10%",
+          viewControl: {
+            //3d效果可以放大、旋转等，请自己去查看官方配置
+            alpha: 30, //角度(这个很重要 调节角度的)
+            distance: 175, //调整视角到主体的距离，类似调整zoom(这是整体大小)
+            rotateSensitivity: 1, //设置为0无法旋转
+            zoomSensitivity: 0, //设置为0无法缩放
+            panSensitivity: 0, //设置为0无法平移
+            autoRotate: true, //自动旋转
+          },
+        },
+        series: series,
+      };
+      return option;
+    },
+    getHeight3D(series, height) {
+      series.sort((a, b) => {
+        return b.pieData.value - a.pieData.value;
+      });
+      return (height * 25) / series[0].pieData.value;
+    },
+    getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+      // 计算
+      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;
+        },
+      };
+    },
+    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;
+    },
+  },
+};
+</script>
+<style lang='scss' scoped>
+.chart-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .chart,
+  .pie3d,
+  .bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .bg {
+    position: absolute;
+    bottom: 50px;
+    left: 50%;
+    z-index: -1;
+    width: 180px;
+    height: 73px;
+    background: no-repeat center;
+    background-image: url("https://ks3-cn-beijing.ksyun.com/sxjg-elevator/datav-platform-2.0/images/chart_opacity_bg.png");
+    background-size: 100% 100%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/views/system/datasource/index.vue

@@ -371,7 +371,7 @@ export default {
     /** 分配用户操作 */
     handleAuthUser: function(row) {
       const datasourceId = row.id;
-      debugger
+      // debugger
       this.$router.push("/system/datasource-auth/user/" + datasourceId);
     },
     /** 查询部门下拉树结构 */

src/views/technology/process/content.vue

@@ -328,7 +328,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      debugger
+      // debugger
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.contentId != null) {

src/views/technology/recipe/content.vue

@@ -292,7 +292,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      debugger
+      // debugger
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.contentId != null) {

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
+        target: `http://192.168.3.93:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''