Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/components/echartsTemplate/3dPie.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="sankey_echart" ref="echart"></div>
+  <div id="pie_echart" ref="echart"></div>
 </template>
 
 <script>
@@ -12,19 +12,30 @@ let option = {
 
     itemWidth: 12, // 设置宽度
     itemHeight: 12, // 设置高度
-    data: ["征收", "收购", "回收"],
+    data: [],
     bottom: "40%",
-    right: "40%",
+    right: "10%",
 
     itemGap: 10,
     textStyle: {
       color: "#fff",
       fontSize: 14,
     },
-    formatter: function (name) {
-      console.log(name);
-
-      return name;
+    textStyle: {
+      rich: {
+        name: {
+          color: "#BCD3E5",
+          fontSize: 14,
+        },
+        value: {
+          color: "#64DAFF",
+          fontSize: 14,
+        },
+        unit: {
+          color: "#BCD3E5",
+          fontSize: 14,
+        },
+      },
     },
   },
   animation: true,
@@ -72,7 +83,7 @@ let option = {
   series: [],
 };
 export default {
-  name: "sankey_echart",
+  name: "pie_echart",
   components: {},
   data() {
     return {
@@ -80,15 +91,30 @@ export default {
     };
   },
   methods: {
-    setOptions(data) {
+    setOptions(legend, data) {
       if (!this.myChart) {
-        // var dom = document.getElementById("sankey_echart");
+        // var dom = document.getElementById("pie_echart");
         this.myChart = echarts.init(this.$refs.echart);
       }
-      
-      this.initEchartXzqh(data);
+      this.initEchartXzqh(legend, data);
     },
-    initEchartXzqh(optionsData) {
+    initEchartXzqh(legend, optionsData) {
+      option.legend.data = legend;
+      option.legend.formatter = function (name) {
+        const sItem = optionsData.find((item) =>
+          `${item.name}`.includes(`${name}`)
+        );
+        if (sItem) {
+          console.log(sItem, "sItem");
+
+          return `{name|${name}}  {value|${sItem.value}}  {unit|km²} `;
+          // return name + 'sItem.value';
+        } else {
+          console.log(name);
+
+          return name;
+        }
+      };
       const series = this.getPie3D(optionsData, 0.6);
       option.series = series;
 
@@ -324,7 +350,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.sankey_echart {
+.pie_echart {
   width: 100%;
   height: 100%;
 }

src/views/cockpitNew1/gdbh.vue

@@ -46,6 +46,7 @@ export default {
     //   ["客2", 18],
     // ];
     // 传入数据生成 option
+    let legend = ["征收", "收购", "回收"];
     const optionsData = [
       {
         name: "回收",
@@ -74,7 +75,7 @@ export default {
       },
     ];
     this.$nextTick(() => {
-      this.$refs.echartRef.setOptions(optionsData);
+      this.$refs.echartRef.setOptions(legend, optionsData);
     });
   },
 };