syy

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

@@ -1351,11 +1351,20 @@ padding-right: 10px;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	margin-top: 50px;
 }
 .qkq_bjs p{
 	color: #fff;
-	line-height: 30px;
+	line-height: 30px;
+	height: 90px;
+	display: flex;
+	flex-direction: column;
+	padding-top: 10px;
+	padding-left: 10px;
+}
+.qkq_bjs p b i{
+	color: #fff;
+	font-size: 12px;
+	padding-left: 10px;
 }
 .qkq_bjs img{
 	height: 70px;
@@ -1363,8 +1372,15 @@ padding-right: 10px;
 .qkq_bjs p b{
 	color: #fff;
 	font-size: 20px;
-	padding-right: 10px;
-	color: #bceaf7;
+	
+	color: #bceaf7;
+	display: flex;
+	flex-direction: row;
+}
+.qkq_bjss{
+	padding-top: 50px;
+	margin-right: 50px;
+	margin-left: 55px;
 }
 /* .qkq_bjs:nth-child(1){
 	width: 60%;
@@ -1453,7 +1469,7 @@ display: block;
 	background:#1b232f;
 }
 #qkq_bjs_01{
-	width: 700px;
+	width: 200px;
 	height: 200px;
 }
 #qkq_bjs_02{

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

@@ -70,6 +70,14 @@
             </div> -->
           <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>
+				</div>
+				<div class="qkq_bjs qkq_bjss">
+				  <img src="../../assets/images/qkq_icon23.png"/>
+				  <p><b>1036<i>件</i></b><i>办结数</i></p>
+				</div>
               <div class="qkq_bjs">
                 <div id="qkq_bjs_01"></div>
               </div>
@@ -1208,190 +1216,133 @@ export default {
     },
     qkq_bjs_01() {
       var myChart = echarts.init(document.getElementById('qkq_bjs_01'));
-      var dataStyle = {
-        normal: {
-          label: {
-            show: false
-          },
-          labelLine: {
-            show: false
-          },
-          shadowBlur: 0,
-          shadowColor: '#203665'
-        }
-      };
       var option = {
-        series: [{
-          name: '第一个圆环',
-          type: 'pie',
-          clockWise: false,
-          radius: [70, 80],
-          itemStyle: dataStyle,
-          hoverAnimation: false,
-          center: ['15%', '50%'],
-          data: [{
-            value: 25,
-            label: {
-              normal: {
-                rich: {
-                  a: {
-                    color: '#3a7ad5',
-                    align: 'center',
-                    fontSize: 20,
-                    fontWeight: "bold"
+          title: [
+              {
+                  text: '办结率',
+                  x: 'center',
+                  top: '32%',
+                  textStyle: {
+                      color: '#fff',
+                      fontSize: 20,
+                      fontWeight: '100',
                   },
-                  b: {
-                    color: '#fff',
-                    align: 'center',
-                    fontSize: 16
-                  }
-                },
-                formatter: function (params) {
-                  return "{b|办件数}\n\n" + "{a|" + params.value + "个}";
-                },
-                position: 'center',
-                show: true,
-                textStyle: {
-                  fontSize: '14',
-                  fontWeight: 'normal',
-                  color: '#fff'
-                }
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: '#2c6cc4',
-                shadowColor: '#2c6cc4',
-                shadowBlur: 0
-              }
-            }
-          }, {
-            value: 75,
-            name: 'invisible',
-            itemStyle: {
-              normal: {
-                color: '#24375c'
               },
-              emphasis: {
-                color: '#24375c'
-              }
-            }
-          }]
-        }, {
-          name: '第二个圆环',
-          type: 'pie',
-          clockWise: false,
-          radius: [70, 80],
-          itemStyle: dataStyle,
-          hoverAnimation: false,
-          center: ['50%', '50%'],
-          data: [{
-            value: 50,
-            label: {
-              normal: {
-                rich: {
-                  a: {
-                    color: '#d03e93',
-                    align: 'center',
-                    fontSize: 20,
-                    fontWeight: "bold"
+              {
+                  text: '60%',
+                  x: 'center',
+                  top: '50%',
+                  textStyle: {
+                      fontSize: 30,
+                      color: '#00f0ff',
+                      foontWeight: '500',
                   },
-                  b: {
-                    color: '#fff',
-                    align: 'center',
-                    fontSize: 16
-                  }
-                },
-                formatter: function (params) {
-                  return "{b|办结数}\n\n" + "{a|" + params.value + "个}";
-                },
-                position: 'center',
-                show: true,
-                textStyle: {
-                  fontSize: '14',
-                  fontWeight: 'normal',
-                  color: '#fff'
-                }
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: '#ef45ac',
-                shadowColor: '#ef45ac',
-                shadowBlur: 0
-              }
-            }
-          }, {
-            value: 50,
-            name: 'invisible',
-            itemStyle: {
-              normal: {
-                color: '#412a4e'
               },
-              emphasis: {
-                color: '#412a4e'
-              }
-            }
-          }]
-        }, {
-          name: '第三个圆环',
-          type: 'pie',
-          clockWise: false,
-          radius: [70, 80],
-          itemStyle: dataStyle,
-          hoverAnimation: false,
-          center: ['85%', '50%'],
-          data: [{
-            value: 75,
-            label: {
-              normal: {
-                rich: {
-                  a: {
-                    color: '#603dd0',
-                    align: 'center',
-                    fontSize: 20,
-                    fontWeight: "bold"
+          ],
+          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)'
+                      },
                   },
-                  b: {
-                    color: '#fff',
-                    align: 'center',
-                    fontSize: 16
-                  }
-                },
-                formatter: function (params) {
-                  return "{b|办结率}\n\n" + "{a|" + params.value + "%}";
-                },
-                position: 'center',
-                show: true,
-                textStyle: {
-                  fontSize: '14',
-                  fontWeight: 'normal',
-                  color: '#fff'
-                }
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: '#613fd1',
-                shadowColor: '#613fd1',
-                shadowBlur: 0
-              }
-            }
-          }, {
-            value: 25,
-            name: 'invisible',
-            itemStyle: {
-              normal: {
-                color: '#453284'
+                  data: [
+                      {
+                          value: 100,
+                      },
+                  ],
               },
-              emphasis: {
-                color: '#453284'
-              }
-            }
-          }]
-        }]
-      }
-
+          ],
+      };
       if (option) {
         myChart.setOption(option);
       }