土地供应国有供应

src/components/echartsTemplate/3dPie.vue

@@ -10,8 +10,6 @@ let colors = [
 ];
 let option = {
   legend: {
-    show: false,
-
     tooltip: {
       show: true,
     },
@@ -20,14 +18,13 @@ let option = {
     itemWidth: 12, // 设置宽度
     itemHeight: 12, // 设置高度
     data: [],
-    // bottom: "20%",
-    // right: "2%",
-    x: 0,
-    y:100,
+    bottom: "20%",
+    right: "-3%",
+
     itemGap: 10,
     textStyle: {
-      color: "#ccc",
-      fontSize: 12,
+      color: "#fff",
+      fontSize: 14,
     },
     textStyle: {
       rich: {
@@ -96,6 +93,10 @@ export default {
     unit: {
       type: String,
     },
+    legendFlag: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -112,6 +113,7 @@ export default {
     },
     initEchartXzqh(optionsData, boxHeight) {
       let _this = this;
+      option.legend.show = _this.$props.legendFlag
       option.legend.formatter = function (name) {
         const sItem = optionsData.find((item) =>
           `${item.name}`.includes(`${name}`)

src/views/cockpit/gdbh.vue

@@ -8,8 +8,8 @@
         </el-select>
       </div>
     </div>
-    <pie3d id="gdbh_echart_gdlr" unit="" ref="gdbh_echart_gdlr"></pie3d>
-    <pie3d id="gdbh_echart_gdlc" unit="" ref="gdbh_echart_gdlc"></pie3d>
+    <pie3d id="gdbh_echart_gdlr" :legendFlag=false unit="" ref="gdbh_echart_gdlr"></pie3d>
+    <pie3d id="gdbh_echart_gdlc" :legendFlag=false unit="" ref="gdbh_echart_gdlc"></pie3d>
     <div class="legend_gdlx">
       <div class="gdbh_echart_gdlr_legend">
 

src/views/cockpit/hysy.vue

@@ -567,6 +567,7 @@ export default {
         font-style: normal;
         font-size: 12px;
         color: #ffffff;
+        // margin-bottom: ;
     }
 
     span {

src/views/cockpit/stxf.vue

@@ -26,7 +26,7 @@
         </div>
 
       </div>
-      <pie3d id="stxf_echart_tdzz" unit="个" ref="stxf_echart_tdzz"></pie3d>
+      <pie3d id="stxf_echart_tdzz" unit="个" :legendFlag=false ref="stxf_echart_tdzz"></pie3d>
     </div>
     <div v-show="tab == options[1].value">
       <div class="content">

src/views/cockpit/tdsc.vue

@@ -627,4 +627,29 @@ export default {
     }
   }
 }
+
+.text {
+  display: inline-block;
+  width: 100px;
+  // margin-top: 10px;
+  margin-left: 15px;
+
+  margin-top: 3px;
+
+  p {
+    font-kerning: normal;
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: 500;
+    font-style: normal;
+    font-size: 12px;
+    color: #ffffff;
+  }
+
+  span {
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: 700;
+    font-style: normal;
+    color: #68f4fb;
+  }
+}
 </style>

src/views/cockpit/tdsy.vue

@@ -64,7 +64,41 @@
         </div>
       </div>
       <div v-show="left_value == left_options[0].value && right_value == right_options[0].value">
-        国有/进度
+        <div class="content_scjd">
+          <div class="space">
+            <div class="lt_box box">
+              <div class="text">
+                <p>计划出让海域</p>
+                <span>66.23</span>公顷
+              </div>
+            </div>
+            <div class="lb_box box">
+              <div class="text">
+                <p>计划出让海域</p>
+                <span>66.23</span>公顷
+              </div>
+            </div>
+            <div id="dial_watch_gy_jd">
+
+
+            </div>
+            <div class="rt_box box">
+              <div class="text">
+                <p>计划出让海域</p>
+                <span>66.23</span>公顷
+              </div>
+            </div>
+            <div class="rb_box box">
+              <div class="text">
+                <p>计划出让海域</p>
+                <span>66.23</span>公顷
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <pie3d id="tdgy_echart_gyjd" unit="公顷" :legendFlag=true ref="tdgy_echart_gyjd"></pie3d>
+
       </div>
       <div v-show="left_value == left_options[0].value && right_value == right_options[1].value">
         国有/结构
@@ -84,9 +118,10 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 // 定义myCharts用于统计图自适应
 import { QueryOne, QueryList } from "../../api/cockpitNew";
+import pie3d from "../../components/echartsTemplate/3dPie.vue";
 
 export default {
-  components: {},
+  components: { pie3d },
   data() {
     return {
       right_value: 'gyjd',
@@ -329,14 +364,214 @@ export default {
       };
       myChart.setOption(option);
 
-    }
+    },
+    init_dial_watch_scjg() {
+
+      var dom = document.getElementById("dial_watch_gy_jd");
+      var myChart = window.echarts.init(dom);
+      var demoData = {
+        name: '城镇化率',
+        value: 60,
+      };
+      let option = {
+        backgroundColor: 'rgba(0,0,0,0)',
+        title: {
+          text: `{num|${demoData.value}%} ` + '\n' + `{label|完成率}`,
+
+          x: '49%',
+          y: '70%',
+          textAlign: 'center',
+          textStyle: {
+            rich: {
+              num: {
+                fontWeight: '600',
+                color: 'rgba(249, 180, 71, 1)',
+                fontFamily: '微软雅黑',
+                fontSize: 14,
+              }, label: {
+                color: "#fff",
+                fontSize: 12,
+              },
+            },
+          },
+        },
+        grid: { top: '0%', left: '0%' },
+        series: [
+          {
+            type: 'gauge',
+            radius: '90%', // 1行3个
+            center: ['50%', '70%'],
+            splitNumber: 10,
+            // min: 0,
+            max: 100,
+            startAngle: 220,
+            endAngle: -44,
+            z: 99,
+            // 线
+            axisLine: {
+              lineStyle: {
+                width: 1,
+                color: [[1, 'rgba(255,255,255,0)']],
+              },
+              detail: {
+                formatter: '{value}',
+              },
+              data: [
+                {
+                  value: 50,
+                  name: 'SCORE',
+                },
+              ],
+            },
+            //刻度标签。
+            axisTick: {
+              show: true,
+              splitNumber: 6, //刻度的段落数
+              lineStyle: {
+                color: '#ccc',
+                width: 1, //刻度的宽度
+                shadowColor: 'RGBA(60, 139, 232, 0)',
+                shadowBlur: 2,
+              },
+              length: 3, //刻度的长度
+            },
+            splitLine: {
+              //文字和刻度的偏移量
+              show: true,
+              length: 1, //长度
+              lineStyle: {
+                color: '#ccc',
+                width: 1,
+              },
+            },
+            // //刻度线文字
+            axisLabel: {
+              show: false,
+              color: '#ccc',
+              fontSize: 1,
+              distance: -30,
+            },
+            data: [
+              {
+                value: demoData.value,
+                name: 'SCORE',
+                itemStyle: {
+                  color: 'rgba(73, 148, 236, 1)',
+                },
+              },
+            ],
+            pointer: {
+              show: true,
+              length: '40%',
+              radius: '50%',
+              width: 5, //指针粗细
+              offsetCenter: [0, -10]
+            },
+            detail: {
+              show: false
+            },
+            title: {
+              // 仪表盘标题。
+              show: false,
+            },
+          },
+          {
+            name: demoData.name,
+            type: 'pie',
+            radius: ['65%', '50%'],
+            center: ['50%', '70%'],
+            startAngle: 220,
+            endAngle: -10,
+            color: [
+              {
+                type: 'linear',
+                x: 1,
+                y: 0,
+                x2: 0,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(62, 147, 244, 0.3)', // 0% 处的颜色
+                  },
+
+                  {
+                    offset: 1,
+                    color: 'rgba(62, 147, 244, 1)', // 100% 处的颜色
+                  },
+
+                ],
+              },
+              'transparent',
+            ],
+            hoverAnimation: true,
+            legendHoverLink: false,
+            z: 10,
+            labelLine: {
+              normal: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 60,
+              },
+              {
+                value: 20,
+              },
+            ],
+          },
+          {
+            type: 'pie',
+            hoverAnimation: false,
+            label: {
+              show: false,
+            },
+            center: ['50%', '70%'],
+            radius: ['0%', '60%'],
+            startAngle: 230,
+            data: [
+              {
+                value: 100,
+                itemStyle: {
+                  normal: {
+                    color: {
+                      type: 'radial',
+                      x: 0.5,
+                      y: 0.5,
+                      r: 0.5,
+                      colorStops: [
+                        { offset: 0, color: 'rgba(0,0,0,0)' },
+                        { offset: 1, color: 'rgba(0,0,0,0)' },
+                      ],
+                    },
+                    opacity: 0.2,
+                  },
+                },
+              },
+              {
+                value: 100,
+                color: 'transparent',
+              },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+
+    },
   },
   mounted() {
     const that = this;
     this.$nextTick(() => {
       that.getInfo();
       that.init_echart();
-
+      that.init_dial_watch_scjg();
+      this.$refs.tdgy_echart_gyjd.setOptions([
+        { name: "未供应", value: 12 },
+        { name: "以划拨", value: 21 },
+        { name: "已出让", value: 24 },
+      ]);
     });
   },
   beforeUpdate() { }, //生命周期 - 更新之前
@@ -607,4 +842,110 @@ export default {
     }
   }
 }
+
+
+
+.content_scjd {
+  #dial_watch_gy_jd {
+    // border: 1px red solid;
+    width: 26rem;
+    height: 8.5rem;
+    position: relative;
+    bottom: 1rem;
+    z-index: -1;
+  }
+
+
+  .box {
+    width: 10rem;
+    height: 5rem;
+    position: absolute;
+
+  }
+
+  .lt_box {
+
+    background: no-repeat;
+    background-size: 101% 50%;
+    background-image: url("/static/images/overview/ltback.png");
+    position: absolute;
+    top: 3rem;
+  }
+
+  .lb_box {
+
+    background: no-repeat;
+    background-size: 101% 50%;
+
+    background-image: url("/static/images/overview/lbback.png");
+    position: absolute;
+    top: 8rem;
+    right: 18rem;
+
+  }
+
+  .rt_box {
+    background: no-repeat;
+    background-size: 101% 50%;
+
+    background-image: url("/static/images/overview/rtback.png");
+    position: absolute;
+    top: 3rem;
+    right: 2rem;
+    z-index: -1;
+
+    .text {
+      margin-left: 4rem;
+    }
+  }
+
+  .rb_box {
+    background: no-repeat;
+    background-size: 101% 50%;
+    background-image: url("/static/images/overview/rbback.png");
+    position: absolute;
+    top: 8rem;
+    right: 2rem;
+    z-index: 100;
+
+    .text {
+      margin-left: 4rem;
+    }
+  }
+}
+
+.text {
+  display: inline-block;
+  width: 100px;
+  // margin-top: 10px;
+  margin-left: 15px;
+
+  margin-top: 3px;
+
+  p {
+    font-kerning: normal;
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: 500;
+    font-style: normal;
+    font-size: 12px;
+    color: #ffffff;
+  }
+
+  span {
+    font-family: "Arial Negreta", "Arial Normal", "Arial";
+    font-weight: 700;
+    font-style: normal;
+    color: #68f4fb;
+  }
+}
+
+#tdgy_echart_gyjd {
+
+  width: 17rem;
+  height: 10rem;
+  margin-bottom: 0rem;
+  position: fixed;
+  top: 47rem;
+  left: 2rem;
+}
 </style>