syy

zhsq_qk-ui/src/assets/images/qkq_sprh.css

@@ -1313,8 +1313,8 @@ border-radius: 2px;
 
 .qkq_bjzs_txt{
 
-	width: 60%;
-	height: 100%;
+	/* width: 60%;
+	height: 100%; */
 }
 .qkq_bjzs_txt .bjzs_txt{
 	margin-bottom: 25px;
@@ -1359,7 +1359,7 @@ padding-right: 10px;
 	display: flex;
 	flex-direction: column;
 	padding-top: 10px;
-	padding-left: 10px;
+	margin: 12px auto;
 }
 .qkq_bjs p b i{
 	color: #fff;
@@ -1371,23 +1371,30 @@ padding-right: 10px;
 }
 .qkq_bjs p b{
 	color: #fff;
-	font-size: 20px;
-	
-	color: #bceaf7;
+	font-size: 24px;
+	padding-top: 31px;
+	color: #fff;
 	display: flex;
-	flex-direction: row;
+	flex-direction: row;
+	padding-bottom: 20px;
 }
 .qkq_bjss{
 	padding-top: 50px;
-	margin-right: 50px;
-	margin-left: 55px;
+	width: 200px;
+	margin: 0px 20px;
+	text-align: center;
 }
-/* .qkq_bjs:nth-child(1){
-	width: 60%;
+.qkq_bjss:nth-child(1){
+	background: url(../images/qkq_icon25.png) no-repeat center;
+	background-size: 98%;
+	position: relative;
 }
 .qkq_bjs:nth-child(2){
-	width: 40%;
-} */
+	background: url(../images/qkq_icon26.png) no-repeat center;
+background-size: 95%;
+position: relative;
+}
+
 #qkq_bj4{
 	width: 100%;
 	height: 200px;

zhsq_qk-ui/src/views/fusion/bjzshz.vue

@@ -71,12 +71,10 @@
           <div class="qkq_bjzs_txt clearfix fl">
             <div class="qkq_bjzs_txt_fl">
 				<div class="qkq_bjs qkq_bjss">
-				  <img src="../../assets/images/qkq_icon20.png"/>
-				  <p><b>1036<i>件</i></b><i>办件数</i></p>
+					 <p><b>1036</b><i>办件数</i></p>
 				</div>
 				<div class="qkq_bjs qkq_bjss">
-				  <img src="../../assets/images/qkq_icon23.png"/>
-				  <p><b>1036<i>件</i></b><i>办结数</i></p>
+				  <p><b>1036</b><i>办结数</i></p>
 				</div>
               <div class="qkq_bjs">
                 <div id="qkq_bjs_01"></div>
@@ -1216,133 +1214,130 @@ export default {
     },
     qkq_bjs_01() {
       var myChart = echarts.init(document.getElementById('qkq_bjs_01'));
-      var option = {
-          title: [
-              {
-                  text: '办结率',
-                  x: 'center',
-                  top: '32%',
-                  textStyle: {
-                      color: '#fff',
-                      fontSize: 20,
-                      fontWeight: '100',
-                  },
-              },
-              {
-                  text: '60%',
-                  x: 'center',
-                  top: '50%',
-                  textStyle: {
-                      fontSize: 30,
-                      color: '#00f0ff',
-                      foontWeight: '500',
-                  },
-              },
-          ],
-          polar: {
-              radius: ['44%', '50%'],
-              center: ['50%', '50%'],
-          },
-          angleAxis: {
-              max: 100,
-              show: false,
-          },
-          radiusAxis: {
-              type: 'category',
-              show: true,
-              axisLabel: {
-                  show: false,
-              },
-              axisLine: {
-                  show: false,
-              },
-              axisTick: {
-                  show: false,
-              },
-          },
-          series: [
-              {
-                  type: 'pie',
-                  startAngle: 0,
-                  radius: ['83%', '90%'],
-                  center: ['50%', '50%'],
-                  data: [
-                      {
-                          hoverOffset: 1,
-                          value: 75,
-                          name: '',
-                          itemStyle: {
-                              normal: {
-                                  color: '#00f0ff',
-                              },
-                          },
-                          label: {
-                              show: false,
-                          },
-                          labelLine: {
-                              normal: {
-                                  smooth: true,
-                                  lineStyle: {
-                                      width: 0,
-                                  },
-                              },
-                          },
-                          hoverAnimation: false,
-                      },
-                      {
-                          label: {
-                              show: false,
-                          },
-                          labelLine: {
-                              normal: {
-                                  smooth: true,
-                                  lineStyle: {
-                                      width: 0,
-                                  },
-                              },
-                          },
-                          value: 100 - 75,
-                          hoverAnimation: false,
-                          itemStyle: {
-                              color: 'rgba(251, 200, 79, 0)',
-                          },
-                      },
-                  ],
-              },
-              {
-                  name: '',
-                  type: 'pie',
-                  startAngle: 90,
-                  radius: '80%',
-                  hoverAnimation: false,
-                  center: ['50%', '50%'],
-                  itemStyle: {
-                      normal: {
-                          labelLine: {
-                              show: false,
-                          },
-                          color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
-                              {
-                                  offset: 1,
-                                  color: 'rgba(55,70,130, 1)',
-                              },
-                              {
-                                  offset: 0,
-                                  color: 'rgba(55,70,130, 0)',
-                              },
-                          ]),
-                          shadowBlur: 10,
-                          // shadowColor: 'rgba(55,70,130, 1)'
-                      },
-                  },
-                  data: [
-                      {
-                          value: 100,
-                      },
-                  ],
-              },
-          ],
-      };
+ let max = 100;
+ let value = 32;
+ 
+ let rate = Math.round((value * 100) / max);
+ var option = {
+     title: [
+         {
+             text: '{a|办结率}\n{b|' + rate + '%}',
+             show: true,
+             x: 'center',
+             y: 'center',
+             textStyle: {
+                 rich: {
+                     a: {
+                         fontSize: 18,
+                         color: '#fff',
+                         padding: [10, 0,25, 0],
+                     },
+                     b: {
+                         fontSize:28,
+                         color: '#00b6fd',
+                         fontFamily: 'alibabaPuhuiM',
+                     },
+                 },
+             },
+         },
+     ],
+     polar: {
+         center: ['50%', '50%'],
+         radius: ['60%', '75%'],
+     },
+     angleAxis: {
+         max: max,
+         show: false,
+     },
+     radiusAxis: {
+         type: 'category',
+         show: true,
+         axisLabel: {
+             show: false,
+         },
+         axisLine: {
+             show: false,
+         },
+         axisTick: {
+             show: false,
+         },
+     },
+     series: [
+         {
+             name: '',
+             type: 'bar',
+             roundCap: true,
+             showBackground: true,
+             backgroundStyle: {
+                 color: 'rgba(19, 84, 146, .4)',
+             },
+             data: [value],
+             coordinateSystem: 'polar',
+             itemStyle: {
+                 normal: {
+                     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                         {
+                             offset: 0,
+                             color: '#005DCF',
+                         },
+                         {
+                             offset: 1,
+                             color: '#00CCFF',
+                         },
+                     ]),
+                 },
+             },
+         },
+         {
+             name: '',
+             type: 'gauge',
+             radius: '54%',
+             axisLine: {
+                 lineStyle: {
+                     color: [
+                         [
+                             1,
+                             new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                                 {
+                                     offset: 0,
+                                     color: 'rgba(0, 182, 253, 0)',
+                                 },
+                                 {
+                                     offset: 0.5,
+                                     color: 'rgba(0, 182, 253, .2)',
+                                 },
+                                 {
+                                     offset: 1,
+                                     color: 'rgba(0, 182, 253, .4)',
+                                 },
+                             ]),
+                         ],
+                     ],
+                     width: 1,
+                 },
+             },
+             axisLabel: {
+                 show: false,
+             },
+             axisTick: {
+                 show: false,
+             },
+             splitLine: {
+                 show: false,
+             },
+             itemStyle: {
+                 show: false,
+             },
+             detail: {
+                 show: false,
+             },
+             data: [],
+             pointer: {
+                 show: false,
+             },
+         },
+     ],
+ };
       if (option) {
         myChart.setOption(option);
       }