stxf下拉切换

src/components/echartsTemplate/3dPie.vue

@@ -22,12 +22,12 @@ let option = {
     data: [],
     // bottom: "20%",
     // right: "2%",
-    x: 50,
+    x: 0,
     y:100,
     itemGap: 10,
     textStyle: {
-      color: "#fff",
-      fontSize: 14,
+      color: "#ccc",
+      fontSize: 12,
     },
     textStyle: {
       rich: {
@@ -117,9 +117,9 @@ export default {
           `${item.name}`.includes(`${name}`)
         );
         if (sItem) {
-          return `{name|${name}}  {unit|${_this.$props.unit}} `;
+          // return `{name|${name}}  {unit|${_this.$props.unit}} `;
 
-          // return `{name|${name}}  {value|${sItem.value}}  {unit|${_this.$props.unit}} `;
+          return `{name|${name}}  {value|${sItem.value}}  {unit|${_this.$props.unit}} `;
           // return name + 'sItem.value';
         } else {
           return name;

src/views/cockpit/stxf.vue

@@ -18,6 +18,19 @@
       </div>
     </div>
 
+    <div v-show="model_switch == tab">
+      <div class="legend_stxf">
+        <div class="stxf_echart_tdzz_legend">
+
+        </div>
+
+      </div>
+      <pie3d id="stxf_echart_tdzz" unit="个" ref="stxf_echart_tdzz"></pie3d>
+    </div>
+    <div v-show="model_switch == tab">
+      
+    </div>
+
   </borderTemplate>
 </template>
 
@@ -25,9 +38,10 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import borderTemplate from "./borderTemplate.vue";
 import { QueryOne, QueryList } from "../../api/cockpitNew";
+import pie3d from "../../components/echartsTemplate/3dPie.vue";
 
 export default {
-  components: { borderTemplate },
+  components: { borderTemplate, pie3d },
   data() {
     return {
       options: [
@@ -35,6 +49,7 @@ export default {
         { value: "ssxf", label: "山水工程" },
       ],
       tab: "tdzz",
+      model_switch:'tdzz',
       paramdatas: {},
       sdlist: {
         tdzz: [
@@ -70,7 +85,8 @@ export default {
   //监控data中的数据变化
   watch: {},
   methods: {
-    changeCharts() {
+    changeCharts(e) {
+      this.model_switch == e
     },
     GetQueryOne(datas) {
       let params = {
@@ -99,8 +115,20 @@ export default {
         });
       });
     },
+
+  },
+  mounted() {
+    this.$nextTick((res) => {
+
+      this.$refs.stxf_echart_tdzz.setOptions([
+        { name: "农用地整理项目", value: 12 },
+        { name: "建设用地整理项目", value: 21 },
+        { name: "生态修复项目", value: 54 },
+        { name: "历史文化保护项目", value: 22 },
+
+      ]);
+    })
   },
-  mounted() { },
 };
 </script>
 <style lang="scss" scoped>
@@ -144,4 +172,29 @@ export default {
     line-height: 18px;
   }
 }
+
+
+#stxf_echart_tdzz {
+
+  width: 24rem;
+  height: 10rem;
+  position: fixed;
+  top: 25rem;
+  left: 100rem;
+}
+
+
+.legend_stxf {
+  position: fixed;
+  top: 34rem;
+
+  .stxf_echart_tdzz_legend {
+    height: 4rem;
+    width: 25rem;
+    background: no-repeat;
+
+    background-image: url("/static/images/overview/stxf_echart_tdzz_legend.png");
+    display: inline-block;
+  }
+}
 </style>