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

src/components/echartsTemplate/3dPie.vue

@@ -3,6 +3,11 @@
 </template>
 
 <script>
+let colors = [
+  "RGBA(235, 184, 86, 1)",
+  "RGBA(100, 184, 255, 1)",
+  "RGBA(71, 203, 129, 1)",
+];
 let option = {
   legend: {
     tooltip: {
@@ -85,33 +90,34 @@ let option = {
 export default {
   name: "pie_echart",
   components: {},
+  props: {
+    unit: {
+      type: String,
+    },
+  },
   data() {
     return {
       myChart: null,
     };
   },
   methods: {
-    setOptions(legend, data) {
+    setOptions(data) {
       if (!this.myChart) {
         // var dom = document.getElementById("pie_echart");
         this.myChart = echarts.init(this.$refs.echart);
       }
-      this.initEchartXzqh(legend, data);
+      this.initEchartXzqh(data);
     },
-    initEchartXzqh(legend, optionsData) {
-      option.legend.data = legend;
+    initEchartXzqh(optionsData) {
+      let _this = this;
       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|${name}}  {value|${sItem.value}}  {unit|${_this.$props.unit}} `;
           // return name + 'sItem.value';
         } else {
-          console.log(name);
-
           return name;
         }
       };
@@ -304,18 +310,7 @@ export default {
           },
         };
 
-        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;
-        }
+        seriesItem.itemStyle = { color: colors[i], opacity: 0.8 };
 
         series.push(seriesItem);
       }
@@ -340,13 +335,11 @@ export default {
 
         legendData.push(series[i].name);
       }
-
+      option.legend.data = legendData;
       return series;
     },
   },
-  mounted() {
-    this.setOptions();
-  },
+  mounted() {},
 };
 </script>
 <style lang="scss" scoped>

src/views/cockpitNew1/gdbh.vue

@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <pie3d id="gdbh_echart" ref="echartRef"></pie3d>
+    <pie3d id="gdbh_echart" unit="km²" ref="echartRef"></pie3d>
   </borderTemplate>
 </template>
 
@@ -46,36 +46,14 @@ export default {
     //   ["客2", 18],
     // ];
     // 传入数据生成 option
-    let legend = ["征收", "收购", "回收"];
-    const optionsData = [
-      {
-        name: "回收",
-        value: 50,
-        itemStyle: {
-          opacity: 0.8,
-          color: "RGBA(235, 184, 86, 1)",
-        },
-      },
-      {
-        name: "征收",
-        value: 20,
-        itemStyle: {
-          opacity: 0.8,
-          color: "RGBA(100, 184, 255, 1)",
-        },
-      },
 
-      {
-        name: "收购",
-        value: 30,
-        itemStyle: {
-          opacity: 0.8,
-          color: "RGBA(71, 203, 129, 1)",
-        },
-      },
+    const optionsData = [
+      { name: "水田", value: 50 },
+      { name: "水浇地", value: 20 },
+      { name: "旱地", value: 30 },
     ];
     this.$nextTick(() => {
-      this.$refs.echartRef.setOptions(legend, optionsData);
+      this.$refs.echartRef.setOptions(optionsData);
     });
   },
 };