3d饼图

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,7 +12,7 @@ let option = {
 
     itemWidth: 12, // 设置宽度
     itemHeight: 12, // 设置高度
-    data: ["征收", "收购", "回收"],
+    data: [],
     bottom: "40%",
     right: "10%",
 
@@ -83,7 +83,7 @@ let option = {
   series: [],
 };
 export default {
-  name: "sankey_echart",
+  name: "pie_echart",
   components: {},
   data() {
     return {
@@ -91,21 +91,22 @@ 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 {
@@ -349,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);
     });
   },
 };