图表封装

src/views/cockpit/common/BarGraph3D.vue

@@ -89,7 +89,7 @@ export default {
                 right: '2%',
                 selectedMode: false
             }
-            const grid = { top: '10%', left: '5%', right: '10%', bottom: '20%' }
+            const grid = { top: '10%', left: '5%', right: '10%', bottom: '13%' }
             // xAxis
             const xAxis = {
                 axisTick: { show: false },

src/views/cockpit/common/DialWatch.vue

@@ -78,13 +78,13 @@ export default {
     },
     //方法集合
     methods: {
-        init_dial_watch_scjg() {
-
+        init_dial_watch(echart_data) {
+            console.log(this.$props.dial_watch_info);
             var dom = document.getElementById("dial_watch_scjg");
             var myChart = window.echarts.init(dom);
             var demoData = {
                 name: '城镇化率',
-                value: 0,
+                value: echart_data,
             };
             let option = {
                 backgroundColor: 'rgba(0,0,0,0)',
@@ -278,7 +278,7 @@ export default {
     created() { }, //生命周期 - 创建完成（可以访问当前this实例）
     beforeMount() { }, //生命周期 - 挂载之前
     mounted() {
-        this.init_dial_watch_scjg();
+        // this.init_dial_watch_scjg();
 
     }, //生命周期 - 挂在完成
     beforeUpdate() { }, //生命周期 - 更新之前
@@ -336,7 +336,7 @@ export default {
         background-image: url("/static/images/overview/rtback.png");
         position: absolute;
         top: 4rem;
-        
+
         left: 16rem;
 
         z-index: -1;

src/views/cockpit/tdsc.vue

@@ -17,7 +17,7 @@
       <!-- <div id="scje_echart"></div> -->
     </div>
     <div v-show="tab == options[0].value">
-      <DialWatch :dial_watch_info="dial_watch_info" />
+      <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" />
     </div>
   </div>
 </template>
@@ -45,6 +45,7 @@ export default {
         { name: '完成收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
       ],
       dial_watch_info: {
+        echart_data: 0,
         lt: {
           key: '计划收储',
           value: 0,
@@ -100,12 +101,12 @@ export default {
 
         }, lb: {
           key: "完成收储",
-          value: data.data.jh_xzqdm_number,
+          value: data.data.sj_mj,
           unit: "公顷",
 
         }, rt: {
           key: "计划收储项目",
-          value: data.data.sj_mj,
+          value: data.data.jh_xzqdm_number,
           unit: "个",
 
         }, rb: {
@@ -116,7 +117,17 @@ export default {
         },
       }
       that.dial_watch_info = proData;
-
+      let echart_data = 0;
+      console.log('echart_data: ', echart_data);
+      if (data.data.sj_mj == 0) {
+        echart_data = 0
+      } else if (data.data.jh_mj == 0 && data.data.sj_mj > 0) {
+        echart_data = 100
+      } else {
+        echart_data = data.data.sj_mj / data.data.jh_mj
+      }
+      that.dial_watch_info.echart_data = echart_data;
+      that.$refs.tdsc_scjd.init_dial_watch(echart_data);
       // store.state.cockpit_tdsc.scjd = data.data
     },
   },
@@ -151,7 +162,6 @@ export default {
   -webkit-box-shadow: none;
   box-shadow: none;
   z-index: 100;
-  border: 1px red solid;
 
 }
 
@@ -257,5 +267,4 @@ export default {
   width: 26rem;
   height: 10rem;
 }
-
 </style>

src/views/cockpit/tdsy.vue

@@ -64,38 +64,7 @@
         </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>{{ store.state.cockpit_tdgy.gy_jd_info.info.jh_crmj }}</span>公顷
-              </div>
-            </div>
-            <div class="lb_box box">
-              <div class="text">
-                <p>完成供应</p>
-                <span>{{ store.state.cockpit_tdgy.gy_jd_info.info.sj_crmj }}</span>公顷
-              </div>
-            </div>
-            <div id="dial_watch_gy_jd">
-
-
-            </div>
-            <div class="rt_box_gy_jd box">
-              <div class="text">
-                <p>计划供应项目</p>
-                <span>{{ store.state.cockpit_tdgy.gy_jd_info.info.jh_xzqhdm_number }}</span>个
-              </div>
-            </div>
-            <div class="rb_box_gy_jd box">
-              <div class="text">
-                <p>完成供应项目</p>
-                <span>{{ store.state.cockpit_tdgy.gy_jd_info.info.sj_xzqhdm_number }}</span>个
-              </div>
-            </div>
-          </div>
-        </div>
+       
 
         <pie3d id="tdgy_echart_gyjd" unit="公顷" :legendFlag=true ref="tdgy_echart_gyjd"></pie3d>
 
@@ -180,7 +149,6 @@ export default {
       };
       let data = await QueryList(obj);
       store.state.cockpit_tdgy.gy_jd_info.info = data.data[0]
-      that.init_dial_watch_scjg();
       store.state.cockpit_tdgy.gy_jd_info.pieData = {
         wgy: data.data[0].ce_crmj,
         yhb: data.data[0].sj_hb_crmj,
@@ -605,202 +573,7 @@ export default {
       myChart.setOption(option);
 
     },
-    init_dial_watch_scjg() {
-
-      var dom = document.getElementById("dial_watch_gy_jd");
-      var myChart = window.echarts.init(dom);
-      let value = (store.state.cockpit_tdgy.gy_jd_info.info.sj_crmj / store.state.cockpit_tdgy.gy_jd_info.info.jh_crmj * 100).toFixed(0)
-      var demoData = {
-        name: '城镇化率',
-        value: value,
-      };
-      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);
-
-    },
+  
     async init_tdgy_gy_jd(params) {
       const that = this;
       let obj = {
@@ -852,7 +625,6 @@ export default {
       this.init_tdgy_gy_jg();
       this.init_tdgy_gy_jd();
       // that.init_echart();
-      // that.init_dial_watch_scjg();
       that.getInfo();
       that.init_tdgy_jt_jd();
 
@@ -880,13 +652,13 @@ export default {
 
 <style lang="scss" scoped>
 .tdsy {
-  position: absolute;
+  position: relative;
   left: 1rem;
-  top: 67%;
+  top: 43rem;
   z-index: 100;
   border: 1px red solid;
   width: 416px;
-  height: 320px;
+  height: 300px;
 
   .box1 {
     border-width: 0px;
@@ -1141,101 +913,6 @@ 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_gy_jd {
-    background: no-repeat;
-    background-size: 101% 50%;
-
-    background-image: url("/static/images/overview/rtback.png");
-    position: absolute;
-    top: 3rem;
-    right: 4rem;
-    left: 16rem;
-    z-index: -1;
-
-    .text {
-      margin-left: 4rem;
-    }
-  }
-
-  .rb_box_gy_jd {
-    background: no-repeat;
-    background-size: 101% 50%;
-    background-image: url("/static/images/overview/rbback.png");
-    position: absolute;
-    top: 8rem;
-    left: 16rem;
-    z-index: 100;
-
-    .text {
-      margin-left: 4rem;
-    }
-  }
-}
-
-.text {
-  display: inline-block;
-  width: 100%;
-  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: 20rem;