焦煤基础版完成

cokingCoal/cokingCoalD.html

@@ -86,7 +86,7 @@
                 <div class="flex items-center justify-between">
                   <span style="color: #417FAE;width: 200px;">山焦西山<span
                       style="margin-left: 10px;color: #fff;">完成：980万元/人</span></span>
-                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="68" color="#FBE139"></el-progress>
                 </div>
               </li>
               <li class="list-item">
@@ -94,7 +94,7 @@
                 <div class="flex items-center justify-between">
                   <span style="color: #417FAE;width: 200px;">山焦汾西<span
                       style="margin-left: 10px;color: #fff;">完成：1000万元/人</span></span>
-                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="35" color="#FBE139"></el-progress>
                 </div>
               </li>
               <li class="list-item">
@@ -102,7 +102,7 @@
                 <div class="flex items-center justify-between">
                   <span style="color: #417FAE;width: 200px;">山焦霍州<span
                       style="margin-left: 10px;color: #fff;">完成：1000万元/人</span></span>
-                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="97" color="#FBE139"></el-progress>
                 </div>
               </li>
               <li class="list-item">
@@ -110,7 +110,7 @@
                 <div class="flex items-center justify-between">
                   <span style="color: #417FAE;width: 200px;">山焦山煤<span
                       style="margin-left: 10px;color: #fff;">完成：1000万元/人</span></span>
-                  <el-progress class="flex1" style="margin: 0 10px;" percentage="80" color="#FBE139"></el-progress>
+                  <el-progress class="flex1" style="margin: 0 10px;" percentage="45" color="#FBE139"></el-progress>
                 </div>
               </li>
             </ul>

cokingCoal/cokingCoalE.html

@@ -107,6 +107,8 @@
             <div class="aiQuality dis-flex flex-dir-column ">
               <div id="aiQuality2" class="mx-auto" style="width: 100%; height: 100%"></div>
             </div>
+            <div class="top-title1 absolute">课程资源总数<span
+                style="color: #45DAD1;font-weight: bold;margin: 0 10px;">1680</span></div>
           </dv-border-box-8>
           <dv-border-box-8 class="bottom-right">
             <div class="center-title mx-auto flex flex-col justify-center">
@@ -116,8 +118,13 @@
               </div>
               <img src="./images/line.png" style="width: 100%;display: block;margin-top: 2px;" alt="">
             </div>
-            <div class="rb-item">
-              <div ref="echartR1" style="height:100%;width: 100%;"></div>
+            <div class="rb-item relative">
+              <div ref="echartR1" style="height:75%;width:100%;">
+              </div>
+              <div class="pitText absolute">
+                <p>2530</p>
+                <p>总人数</p>
+              </div>
             </div>
           </dv-border-box-8>
         </div>

cokingCoal/js/cokingCoalE.js

@@ -32,28 +32,38 @@ let app = new Vue({
         legend: {
           top: 'center',
           orient: 'vertical',
-          right: '2%',
+          left: '80%',
           textStyle: {
             color: '#9DB9EB',
           },
         },
         graphic: {
-          type: "text",
-          left: "center",
-          top: "45%",
-          style: {
-            text: "总人数2530",
-            textAlign: "center",
-            fill: "#fff",
-            fontSize: 20,
-            fontWeight: 700
-          }
+          elements: [{
+            type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
+            style: {
+              image: './images/pie-back.png', //这里添加图片地址
+              width: 180,
+              height: 180
+            },
+            left: 'center',//
+            top: 'middle' //配置图片居中
+          }]
+          // type: "text",
+          // left: "center",
+          // top: "45%",
+          // style: {
+          //   text: "总人数2530",
+          //   textAlign: "center",
+          //   fill: "#fff",
+          //   fontSize: 20,
+          //   fontWeight: 700
+          // }
         },
         series: [
           {
             name: '',
             type: 'pie',
-            radius: ['55%', '80%'],
+            radius: ['50%', '60%'],
             labelLine: {
               normal: {
                 lineStyle: {

cokingCoal/styles/cokingCoalE.css

@@ -234,6 +234,29 @@ item-tr {
   height: 80%;
   width: 100%;
   padding: 20px 0;
+  background: url('../images/pei-back-big.png') no-repeat center;
+  background-size: 100% auto;
+}
+.pitText {
+  width: 150px;
+  top: 45%;
+  right: 37%;
+  text-align: center;
+}
+.pitText > p:nth-child(1) {
+  color: #69c0ff;
+  font-weight: bold;
+  font-size: 20px;
+}
+.top-title1 {
+  width: 270px;
+  height: 50px;
+  line-height: 50px;
+  left: 45%;
+  top: 13.5%;
+  background: url('../images/title.png') no-repeat;
+  background-size: 100% 100%;
+  padding-left: 50px;
 }
 /* zhb */
 /* 宽高纵横比 */