更新

src/views/backOfficeSystem/IntelligentControl/warningControl/components/bkjbtj.vue

@@ -1,154 +1,287 @@
 <template>
-  <div class="echartsBox" ref="chartRef"></div>
+  <div ref="echart" class="echartDiv"></div>
 </template>
  
 <script setup>
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
-import 'echarts-gl';
+import "echarts-gl";
-import { ref, onMounted } from 'vue';
+import { fa } from "element-plus/es/locale.mjs";
-const chartRef = ref()
+import { onMounted, toRefs, ref, reactive } from "vue";
-const initChart = () => {
+const echart = ref()
-  const myChart = echarts.init(chartRef.value);
+
-  const option = {
+// 传入数据生成 option
-    backgroundColor: 'transparent',
+const optionsData = [
-    tooltip: {
-      trigger: 'item',
-      formatter: '{a} <br/>{b}: {c} ({d}%)',
-      backgroundColor: 'rgba(0,0,0,0.7)',
-      borderColor: '#0C2E5A',
-      textStyle: {
-        color: '#fff'
-      }
-    },
-    legend: {
-      top: 'middle',
-      right: '5%',
-      orient: 'vertical',
-      itemGap: 20,
-      textStyle: {
-        color: '#fff',
-        fontSize: 14
-      },
-      itemWidth: 15,
-      itemHeight: 15,
-      icon: 'roundRect',
-      formatter: function(name) {
-        const data = option.series[0].data;
-        const target = data.find(item => item.name === name);
-        if (target) {
-          return `${name}  ${target.value}  ${(target.value / 50 * 100).toFixed(0)}%`;
-        }
-        return name;
-      }
-    },
-    series: [
   {
-        name: '情报反馈统计',
+    name: "待办",
-        type: 'pie',
+    value: 2056,
-        radius: ['40%', '75%'],
-        center: ['30%', '50%'],
-        startAngle: 90,
-        zlevel: 10,
     itemStyle: {
-          borderRadius: 10,
+      // color: "#2A71FF"
-          borderWidth: 2,
+      echarts:'rgba(44,44,44,0.8)'
-          borderColor: '#0C2E5A'
+    }
   },
-        selectedMode: 'single',
+  {
-        selectedOffset: 30,
+    name: "已办",
-        animation: true,
+    value: 4356,
-        animationType: 'scale',
+    itemStyle: {
-        animationEasing: 'elasticOut',
+      color: "#00EDFE"
-        animationDelay: function (idx) {
+    }
-          return Math.random() * 200;
   },
+  {
+    name: "未处理",
+    value: 3018,
+    itemStyle: {
+      color: "#FEDB4B"
+    }
+  },
+  {
+    name: "忽略",
+    value: 1998,
+    itemStyle: {
+      color: "#FE7C2F"
+    }
+  }
+];
+
+//挂载
+onMounted(() => {
+  echartInit();
+});
+
+const echartInit = () => {
+  var myChart = echarts.init(echart.value);
+  const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+  series.push({
+    name: "pie2d",
+    type: "pie",
     label: {
-          show: false,
+      // show: false,
+      opacity: 1,
+      fontSize: 14,
+      lineHeight: 20,
+      textStyle: {
+        fontSize: 14,
+        color: "#fff"
+      }
     },
     labelLine: {
+      // show: false,
+      length: 20,
+      length2: 25
+    },
+    startAngle: -30, //起始角度，支持范围[0, 360]。
+    clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+    // radius: ["40%", "60%"],
+    center: ["40%", "50%"],
+    data: optionsData,
+    itemStyle: {
+      opacity: 0
+    }
+  });
+  // 准备待返回的配置项，把准备好的 legendData、series 传入。
+  let option = {
+    legend: {
+      show: true,
+      tooltip: {
+        show: true
+      },
+      orient: "vertical",
+      data: ["待办", "已办", "未处理", "忽略"],
+      top: "center",
+      itemGap: 14,
+      itemHeight: 8,
+      itemWidth: 17,
+      right: "2%",
+      textStyle: {
+        color: "#fff",
+        fontSize: 12
+      }
+    },
+    animation: true,
+    tooltip: {
+      formatter: (params) => {
+        if ( params.seriesName !== "mouseoutSeries" && params.seriesName !== "pie2d") {
+          return `${ params.seriesName  }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${ params.color };"></span>${option.series[params.seriesIndex].pieData.value + "人"}`;
+        }
+      },
+      textStyle: {
+        fontSize: 14
+      }
+    },
+    title: {
+      x: "center",
+      top: "20",
+      textStyle: {
+        color: "#fff",
+        fontSize: 22
+      }
+    },
+    backgroundColor: "rgba(0, 29, 75, 0.65)",
+    labelLine: {
+      show: true,
+      lineStyle: {
+        color: "#7BC0CB"
+      },
+      normal: {
         show: false,
-        },
+        length: 20,
-        itemStyle: {
+        length2:20
-          borderWidth: 2,
-          borderColor: '#0C2E5A',
-          opacity: 0.8,
-          shadowBlur: 20,
-          shadowColor: 'rgba(0,0,0,0.5)'
-        },
-        data: [
-          { 
-            value: 18, 
-            name: '实反馈', 
-            itemStyle: { 
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#FF6B9A' },
-                { offset: 1, color: '#FF4B7A' }
-              ])
       }
     },
-          { 
+    label: {
-            value: 13, 
+      show: true,
-            name: '超时反馈', 
+      position: "outside",
-            itemStyle: { 
+      formatter: "{b} \n{d}%",
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      textStyle: {
-                { offset: 0, color: '#FFAA33' },
+        color: "#fff",
-                { offset: 1, color: '#FF8A00' }
+        fontSize: "14px"
-              ])
       }
     },
-          { 
+    xAxis3D: {
-            value: 17, 
+      min: -1,
-            name: '处置下发', 
+      max: 1
-            itemStyle: { 
+    },
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    yAxis3D: {
-                { offset: 0, color: '#FFE699' },
+      min: -1,
-                { offset: 1, color: '#FFD666' }
+      max: 1
-              ])
+    },
+    zAxis3D: {
+      min: -1,
+      max: 1
+    },
+    grid3D: {
+      show: false,
+      boxHeight: 0.01,
+      bottom: "50%",
+      left:'-12%',
+      // environment: "rgba(255,255,255,0)",// 环境颜色
+      viewControl: {
+        distance: 180, //圆环的大小 ,值越大换越小
+        alpha: 25, //倾斜的角度
+        beta: 0,//旋转的角度
+        autoRotate: false // 取消自动旋转
       }
     },
-          { 
+    series: series
-            value: 2, 
+  };
-            name: '未反馈', 
+  // 使用刚指定的配置项和数据显示图表。
-            itemStyle: { 
+  myChart.setOption(option);
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#66B5FF' },
-                { offset: 1, color: '#3AA1FF' }
-              ])
-            } 
-          }
-        ],
-        zlevel: 10,
-        emphasis: {
-          scale: true,
-          scaleSize: 10,
-          itemStyle: {
-            shadowBlur: 30,
-            shadowColor: 'rgba(0,0,0,0.6)'
-          }
-        }
-      }
-    ],
-    
 };
 
-  option && myChart.setOption(option);
+function getParametricEquation(startRatio,endRatio,isSelected,isHovered,k,height) {
+  // 计算
+  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）
-  window.addEventListener('resize', () => {
+  k = typeof k !== "undefined" ? k : 1 / 3;
-    myChart.resize();
+
-  });
+  // 计算选中效果分别在 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);}
+      return Math.sin(v) > 0 ? 1 * height : -1;
+    }
+  };
+}
+// 生成模拟 3D 饼图的配置项
+function getPie3D(pieData, internalDiameterRatio) {
+  let series = [];
+  let sumValue = 0;
+  let startValue = 0;
+  let endValue = 0;
+  let legendData = [];
+  let k = typeof internalDiameterRatio !== "undefined" ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio): 1 / 3;
+
+  // 为每一个饼图数据，生成一个 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
+      },
     };
 
-onMounted(() => {
+    if (typeof pieData[i].itemStyle != "undefined") {
-  initChart();
+      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，也就是实现每一个扇形。
+  for (let i = 0; i < series.length; i++) {
+    endValue = startValue + series[i].pieData.value;
+    console.log(series[i]);
+    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;
+    legendData.push(series[i].name);
+  }
+  return series;
+}
 </script>
  
-<style lang="scss" scoped>
+<style lang='scss' scoped>
-.echartsBox {
+.echartDiv {
   width: 100%;
   height: 100%;
-  background: rgba(0,29,75,0.6);
-  border-radius: 0 0 4px 4px;
 }
 </style>

src/views/backOfficeSystem/IntelligentControl/warningControl/index.vue

@@ -88,6 +88,7 @@ import { reactive, ref } from "vue";
 const listQuery = ref({
   keyword: ""
 });
+
 const search = reactive({
   xd: [
     { label: "吸毒", value: "10" },