仪表盘

src/views/cockpit/tdsc.vue

@@ -22,6 +22,7 @@ export default {
   components: {},
   data() {
     return {
+      tab: '收储结构',
       options: [
         { value: "scjg", label: "收储结构" },
         { value: "scjd", label: "收储进度" },
@@ -43,7 +44,6 @@ export default {
 
       var dom = document.getElementById("scje_echart");
       var myChart = window.echarts.init(dom);
-      var myChart = window.echarts.init(dom);
       // Mock数据
       const mockData = {
         xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
@@ -85,8 +85,9 @@ export default {
       const grid = { top: '15%', left: '12%', right: '2%', bottom: '25%' }
       // xAxis
       const xAxis = {
+        offset: 5,
         axisTick: { show: false },
-        axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
+        axisLine: { lineStyle: { color: 'rgba(255,255,255, .7)' } },
         axisLabel: {
           textStyle: { fontSize: 12, color: '#fff' },
         },
@@ -109,7 +110,7 @@ export default {
         axisTick: { show: false },
         axisLine: { show: false },
         splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
-        axisLabel: {show: false, textStyle: { fontSize: 14, color: '#fff' } }
+        axisLabel: { show: false, textStyle: { fontSize: 14, color: '#fff' } }
       }, {
         show: false,
         splitLine: { show: false },
@@ -322,10 +323,9 @@ export default {
 
 
 #scje_echart {
-  // position: fixed;
-  // left: -6rem;
-  // top: 2.1rem;
+  left: -2rem;
+  top: 0.1rem;
   width: 26rem;
-  height: 13rem;
+  height: 10rem;
 }
 </style>

src/views/cockpit/tdsy.vue

@@ -21,7 +21,7 @@
         </div>
       </div>
 
-      <div class="dial_watch">
+      <div id="dial_watch">
       </div>
       <div class="content">
 
@@ -103,11 +103,204 @@ export default {
       });
       this.jiDataInfo = res.data
     },
+    init_echart() {
+
+      var dom = document.getElementById("dial_watch");
+      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(() => {
       that.getInfo();
+      that.init_echart();
+
     });
   },
   beforeUpdate() { }, //生命周期 - 更新之前
@@ -126,8 +319,7 @@ export default {
   border-width: 0px;
   position: absolute;
   left: 1rem;
-  top: 72%;
-  width: 640px;
+  top: 67%;
   z-index: 100;
 
   .box1 {
@@ -242,22 +434,25 @@ export default {
   }
 }
 
-.dial_watch {
-  width: 28rem;
-  height: 6.5rem;
-  border: 1px solid red;
-
-
+#dial_watch {
+  width: 26rem;
+  height: 8.5rem;
+  // border: 1px solid red;
+  position: fixed;
+  left: -5rem;
+  top: 39.5rem;
 }
 
 .content {
-  border: 1px solid red;
-  height: 6rem;
+  // border: 1px solid red;
+  height: 8.5rem;
+  position: relative;
+  top: 6.9rem;
 }
 
 .infoLIst {
   width: 100%;
-  height: 6rem;
+  height: 8.5rem;
   overflow: hidden;
   overflow-y: auto;
   margin-right: 10px;