增加3d依赖

index.html

@@ -36,6 +36,9 @@
     <script src="./static/js/iview.min.js"></script>
     <!-- <script src="https://unpkg.com/axios/dist/axios.min.js" async></script> -->
     <script src="./static/js/echarts.min.js" async></script>
+    <script src="./static/js/echarts-gl.min@2.0.8.js"></script>
+
+
 </body>
 
 </html>

src/views/cockpitNew1/tdsc.vue

@@ -4,31 +4,58 @@
       <div class="icon"></div>
       <span>土地收储</span>
     </div>
-    <div class="content">
-      <div class="icon_info">
+    <!-- <div v-if="is_xzqh"> -->
+    <div v-if="false">
 
-      </div>
-      <div class="info_left">
+      <div class="content">
+        <div class="icon_info">
 
-      </div>
-      <div class="info_main">
+        </div>
+        <div class="info_left">
+
+        </div>
+        <div class="info_main">
+
+        </div>
+        <div class="text">
+          <span>收储项目</span>
+          <span class="count1">33</span>
+          <span class="unit">个</span>
 
+          <span>收储总面积</span>
+          <span class="count2">213124.45</span>
+          <span class="unit">公顷</span>
       </div>
-      <div class="text">
-        <span>收储项目</span>
-        <span class="count1">33</span>
-        <span class="unit">个</span>
-
-        <span>收储总面积</span>
-        <span class="count2">213124.45</span>
-        <span class="unit">公顷</span>
       </div>
-    </div>
-    <div id="tdsc_echart">
+      <div id="tdsc_echart">
 
+      </div>
     </div>
-    <div id="tdsc_echart_xzqh">
 
+    <div>
+      <div class="content">
+        <div class="icon_info">
+
+        </div>
+        <div class="info_left">
+
+        </div>
+        <div class="info_main">
+
+        </div>
+        <div class="text">
+          <span>收储项目</span>
+          <span class="count1">33</span>
+          <span class="unit">个</span>
+
+          <span>收储总面积</span>
+          <span class="count2">213124.45</span>
+          <span class="unit">公顷</span>
+        </div>
+      </div>
+      <div id="tdsc_echart_xzqh">
+
+      </div>
     </div>
 
   </div>
@@ -40,7 +67,9 @@
 export default {
   components: {},
   data() {
-    return {};
+    return {
+      is_xzqh: false
+    };
   },
   //监听属性 类似于data概念
   computed: {},
@@ -53,8 +82,7 @@ export default {
   beforeMount() { }, //生命周期 - 挂载之前
   methods: {
     initEchart() {
-      var dom = document.getElementById('tdsc_echart');
-      var myChart = window.echarts.init(dom);
+      var tdsc_my_chart = window.echarts.init(document.getElementById('tdsc_echart'));
       const legendType = 'center'
       let option = {
         backgroundColor: 'rgba(0,0,0,0)',
@@ -229,195 +257,311 @@ export default {
         ],
       }
 
-      myChart.setOption(option);
+      tdsc_my_chart.setOption(option);
     },
     initEchartXzqh() {
-      var dom = document.getElementById('tdsc_echart_xzqh');
-      var myChart = window.echarts.init(dom);
+      var my_chart_xzqh = window.echarts.init(document.getElementById('tdsc_echart_xzqh'));
 
-      // const legendType = 'center'
-      const legendType = 'center'
+      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+      function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
 
-      let option = {
-        backgroundColor: 'rgba(0,0,0,0)',
-        grid: {
-          containLabel: true,
-          bottom: '1%',
-          top: '40%',
-          left: '5%',
-          right: legendType === 'center' ? '5%' : '25%',
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
+        // 计算
+        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
           },
-        },
-        legend: {
-          orient: legendType === 'center' ? '' : 'vertical',
-          bottom: "80%",
-          right: legendType === 'center' ? 'center' : '2%',
-          // data: ['2023/06/08', '2023/10/07','2023/10/11'],
-          data: ['征收', '回收', '收购'],
 
-          itemWidth: 12,
-          itemHeight: 12,
-          itemGap: 40,
-          icon: "rect",
-          textStyle: {
-            fontSize: 12,
-            color: '#fff',
-            padding: [5, 0, 0, 2],
-            rich: {
-              a: {
-                verticalAlign: 'middle',
-              },
-            },
+          v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20
           },
 
-        },
-        xAxis: {
-          triggerEvent: true,
-          data: ['崖州区', '天崖区', '吉阳区', '海棠区'],
-          axisLabel: {
-            show: true,
-            fontSize: 12,
-            color: '#fff',
-            align: 'center',
-            verticalAlign: 'top',
+          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;
           },
-          axisLine: {
-            show: false,
+
+          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;
           },
-          axisTick: {
-            show: false,
-            lineStyle: {
-              show: true,
-              color: '#0B3561',
-              width: 2,
+
+          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
             },
+          };
+
+          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，也就是实现每一个扇形。
+        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;
+
+          legendData.push(series[i].name);
+        }
+
+        return series;
+      }
+      // 传入数据生成 option
+      const optionsData = [{
+        name: '秸秆',
+        value: 20,
+        itemStyle: {
+          opacity: 0.8,
+          color: '#3b8584',
+        },
+      },
+
+      {
+        name: '粪污',
+        value: 50,
+        itemStyle: {
+          opacity: 0.8,
+          color: '#64d9e0',
+        },
+      },
+      {
+        name: '厨余',
+        value: 30,
+        itemStyle: {
+          opacity: 0.8,
+          color: '#dac254',
+        },
+      },
+      ];
+
+      const series = getPie3D(optionsData, 0.6);
+
+      series.push({
+        name: 'pie2d',
+        type: 'pie',
+
+        label: {
+          normal: {
+            show: false,              //设为false
+            position: 'center'       //center表示文本显示位置为内部
+          },
+          opacity: 1,
+          fontSize: 13,
+          lineHeight: 20,
+          textStyle: {
+            fontSize: 22,
           },
         },
-        yAxis: [
-          {
-            name: "面积/公顷",
-            nameTextStyle: {
-              color: "#fff",
-              fontSize: 12,
-              padding: [0, 0, 4, 0], //name文字位置 对应 上右下左
-            },
-            axisLabel: {
-              interval: 0,
-              show: true,
-              fontSize: 10,
-              color: '#fff',
-            },
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              lineStyle: {
-                type: 'solid',
-                color: '#0B3561',
-              },
-            },
+        labelLine: {
+          length: 20,
+          length2: 40,
+        },
+        startAngle: -30, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['30%', '55%'],
+        center: ['52%', '38%'],
+        data: [{
+          name: '秸秆',
+          value: 20,
+          itemStyle: {
+            //						 opacity: 0.8,
+            color: '#3b8584',
+          },
+        },
+
+        {
+          name: '粪污',
+          value: 50,
+          itemStyle: {
+            //						 opacity: 0.8,
+            color: '#64d9e0',
+          },
+        },
+        {
+          name: '厨余',
+          value: 30,
+          itemStyle: {
+            //						 opacity: 0.8,
+            color: '#dac254',
           },
+        },
         ],
-        series: [
-          {
-            name: '征收',
-            type: 'bar',
-            barWidth: 12,
-            silent: true,
-            itemStyle: {
-              normal: {
-                color: function (params) {
-                  let colorItem = ['#3b93e3', '#186bb8'];
-                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
-                    [
-                      {
-                        offset: 0,
-                        color: colorItem[0]
-                      },
-                      {
-                        offset: 1,
-                        color: colorItem[1]
-                      }
-                    ],
-                    false
-                  );
-                }
-              }
-            },
-            data: [120, 75, 90, 100],
+        itemStyle: {
+          opacity: 0,
+        },
+      });
+      // 准备待返回的配置项，把准备好的 legendData、series 传入。
+
+      let total = optionsData.reduce(function (prev, cur, index, arr) {
+
+        return prev + cur.value;
+      }, 0); //数据总和
+      let option = {
+        legend: {
+          tooltip: {
+            show: true,
           },
-          {
-            name: '回收',
-            type: 'bar',
-            barWidth: 12,
-            silent: true,
-            itemStyle: {
-              normal: {
-                color: function (params) {
+          orient: "vertical",
 
-                  let colorItem = ['#efc943', '#ec9a1b'];
-                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
-                    [
-                      {
-                        offset: 0,
-                        color: colorItem[0]
-                      },
-                      {
-                        offset: 1,
-                        color: colorItem[1]
-                      }
-                    ],
-                    false
-                  );
-                }
-              }
-            },
-            data: [120, 75, 90, 100],
+          itemWidth: 12, // 设置宽度
+          itemHeight: 12, // 设置高度
+          data: ['秸秆', '粪污', '厨余'],
+          bottom: '5%',
+          itemGap: 10,
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
           },
-          {
-            name: '收购',
-            type: 'bar',
-            barWidth: 12,
-            silent: true,
-            itemStyle: {
-              normal: {
-                color: function (params) {
-                  let colorItem = ['#4ee1ac', '#12a972'];
-                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, //y->y2
-                    [
-                      {
-                        offset: 0,
-                        color: colorItem[0]
-                      },
-                      {
-                        offset: 1,
-                        color: colorItem[1]
-                      }
-                    ],
-                    false
-                  );
-                }
-              }
-            },
-            data: [102, 130, 80, 100],
+          formatter: function (name) {
+            console.log(name)
+
+            return name;
           },
-        ],
-      }
+        },
+        animation: true,
+
+        backgroundColor: '#021041',
+        labelLine: {
+          show: false,
+          lineStyle: {
+            color: '#7BC0CB',
+          },
+        },
+        label: {
+          show: false,
+          position: 'outside',
+          formatter: '{d}%',
+          color: 'inherit'
+        },
+        xAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        yAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        zAxis3D: {
+          min: -1,
+          max: 1,
+        },
+        grid3D: {
+          show: false,
+          boxHeight: 1,
+          top: '-10%',
+          // bottom: '-80%',
+          //					environment: '#021041',
+          viewControl: {
+            distance: 180,
+            alpha: 25,
+            beta: 20,
+            // autoRotate: true, // 自动旋转
+          },
+
+        },
+
+        series: series,
+      };
 
-      myChart.setOption(option);
+      my_chart_xzqh.setOption(option);
     },
   },
   mounted() {
-    this.initEchart();
-    // this.initEchartXzqh();
+    const that = this;
+    this.$nextTick((res) => {
+      // that.initEchart();
+      that.initEchartXzqh();
+    })
 
   },
   beforeUpdate() { }, //生命周期 - 更新之前

src/views/map3d.vue

@@ -172,7 +172,6 @@ export default {
         this.menu_left = res.data[0].children.slice(0, 3);
         this.menu_right = res.data[0].children.slice(3, 5);
 
-        console.log(this.menu_left, "eqweqwe");
         let curRouter = this.$router.currentRoute.path;
         if (curRouter == "/") {
           this.activeIndex = this.menu[0].path;