hysy样式

src/views/cockpit/bjxm.vue

@@ -328,8 +328,8 @@ export default {
   position: absolute;
   width: 385px;
   height: 310px;
-  top: 68%;
-  left: 29rem;
+  top: 67%;
+  left: 30rem;
   background: inherit;
   border: none;
   border-radius: 0px;

src/views/cockpit/hysy.vue

@@ -6,8 +6,37 @@
         </div>
 
         <div class="content_hysy">
-            <div id="dial_watch_hysy">
-
+            <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_hysy">
+                    <div class="text">
+                        <p>计划出让海域</p>
+                        <span>66.23</span>公顷
+                    </div>
+                </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 id="hysyEchart">
 
@@ -54,8 +83,8 @@ export default {
             var myChart = window.echarts.init(dom);
             // Mock数据
             const mockData = {
-                xdata: ['渔业用海', '工业用海', '交通运输用海', '旅游娱乐用海', '海底工程用海', '排污倾倒用海', '造地工程用海', '特殊用海', '其它用海'],               
-               
+                xdata: ['渔业用海', '工业用海', '交通运输用海', '旅游娱乐用海', '海底工程用海', '排污倾倒用海', '造地工程用海', '特殊用海', '其它用海'],
+
                 result: [
                     { name: '计划收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
                     { name: '完成收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
@@ -190,11 +219,203 @@ export default {
             myChart.setOption(option);
 
         },
+        init_dial_watch_hysy() {
+
+            var dom = document.getElementById("dial_watch_hysy");
+            var myChart = window.echarts.init(dom);
+            var demoData = {
+                name: '城镇化率',
+                value: 60,
+            };
+            let option = {
+                backgroundColor: 'rgba(0,0,0,0)',
+                title: {
+                    text: '{num|' + demoData.value + '%}',
+                    x: '50%',
+                    y: '70%',
+                    textAlign: 'center',
+                    textStyle: {
+                        rich: {
+                            num: {
+                                fontWeight: '900',
+                                color: 'rgba(249, 180, 71, 1)',
+                                fontFamily: '微软雅黑',
+                                fontSize: 18,
+                            },
+                        },
+                    },
+                },
+                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: -44,
+                        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((res) => {
             that.init_hysyEchart();
+            that.init_dial_watch_hysy();
         })
     },
     beforeUpdate() { }, //生命周期 - 更新之前
@@ -255,15 +476,95 @@ export default {
     top: 40rem;
 
     #dial_watch_hysy {
-        border: 1px red solid;
-        width: 29rem;
-        height: 7rem;
+        // border: 1px red solid;
+        width: 26rem;
+        height: 8.5rem;
+        position: relative;
+        left: 3rem;
+        bottom: 2rem;
     }
 
     #hysyEchart {
-        border: 1px red solid;
+        // border: 1px red solid;
         width: 34rem;
         height: 9rem;
     }
+
+    .box {
+        width: 10rem;
+        height: 5rem;
+        position: absolute;
+
+    }
+
+    .lt_box {
+
+        position: fixed;
+        background: no-repeat;
+        background-size: 101% 70%;
+        background-image: url("/static/images/overview/ltback.png");
+        left: 57rem;
+    }
+
+    .lb_box {
+
+        position: fixed;
+        background: no-repeat;
+        background-size: 101% 70%;
+        background-image: url("/static/images/overview/lbback.png");
+        left: 57rem;
+        top: 44rem;
+    }
+
+    .rt_box {
+        position: fixed;
+        background: no-repeat;
+        background-size: 101% 70%;
+        background-image: url("/static/images/overview/rtback.png");
+        left: 76rem;
+        top: 40rem;
+
+        .text {
+            margin-left: 4rem;
+        }
+    }
+
+    .rb_box {
+        position: fixed;
+        background: no-repeat;
+        background-size: 101% 70%;
+        background-image: url("/static/images/overview/rbback.png");
+        left: 76rem;
+        top: 44rem;
+        z-index: 100;
+
+        .text {
+            margin-left: 4rem;
+        }
+    }
+}
+
+
+.text {
+    display: inline-block;
+    width: 100px;
+    margin-top: 10px;
+    margin-left: 15px;
+
+    p {
+        font-kerning: normal;
+        font-family: "Arial Negreta", "Arial Normal", "Arial";
+        font-weight: 700;
+        font-style: normal;
+        font-size: 14px;
+        color: #ffffff;
+    }
+
+    span {
+        font-family: "Arial Negreta", "Arial Normal", "Arial";
+        font-weight: 700;
+        font-style: normal;
+        color: #68f4fb;
+    }
 }
 </style>

src/views/cockpit/tdsy.vue

@@ -20,7 +20,28 @@
           </el-select>
         </div>
       </div>
+      <div class="dial_watch_legend">
+        <div class="item_tdgy">
+          <div class="icon_tdgy">
 
+          </div>
+          <div class="text">
+            计划已入市面积
+            <span>213.44</span>公顷
+
+          </div>
+        </div>
+        <div class="item_tdgy">
+          <div class="icon_tdgy">
+
+          </div>
+          <div class="text">
+            已入市面积
+            <span>213.44</span>公顷
+
+          </div>
+        </div>
+      </div>
       <div id="dial_watch">
       </div>
       <div class="content">
@@ -199,7 +220,7 @@ export default {
               length: '40%',
               radius: '50%',
               width: 5, //指针粗细
-              offsetCenter: [0,-10]
+              offsetCenter: [0, -10]
             },
             detail: {
               show: false
@@ -526,4 +547,45 @@ export default {
     }
   }
 }
+
+.dial_watch_legend {
+  width: 14rem;
+  position: absolute;
+  left: 12rem;
+  top: 3rem;
+
+  .item_tdgy {
+    width: 100%;
+    margin-top: 1rem;
+    .icon_tdgy {
+      width: 10px;
+      height: 10px;
+      background: linear-gradient(180deg, rgba(37, 177, 255, 0.6) 0%, rgba(0, 48, 83, 0.48) 100%);
+      box-shadow: inset 0px 0 5px 0px #002B6C;
+      border-radius: 5px 5px 5px 5px;
+      border: 1px solid rgba(100, 218, 255, 0.5);
+      opacity: 0.6;
+      display: inline-block;
+    }
+
+    .text {
+      display: inline-block;
+      p {
+        font-kerning: normal;
+        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+        font-weight: 700;
+        font-style: normal;
+        font-size: 14px;
+        color: #FFFFFF;
+      }
+
+      span {
+        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+        font-weight: 700;
+        font-style: normal;
+        color: #68F4FB;
+      }
+    }
+  }
+}
 </style>