提交

src/pages/questionBank/components/GradesChart.vue

@@ -10,37 +10,53 @@
 
 <script>
 export default {
+	props:{
+		color:{
+			type:String,
+			default:'#05C341'
+		},
+		titleName:{
+			type:String,
+			default:'80%'
+		},
+		actualValue:{
+			type:Number,
+			default:0.8
+		}
+	},
   data() {
     return {
       chartData: {},
       //您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
-      opts: {
-        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
-        padding: undefined,
-        title: {
-          name: "80%",
-          fontSize: 35,
-          color: "#05C341"
-        },
-        subtitle: {
-          name: "",
-          fontSize: 25,
-          color: "#05C341"
-        },
-        extra: {
-          arcbar: {
-            type: "default",
-            width: 18,
-            backgroundColor: "#E9E9E9",
-            startAngle: 0.95,
-            endAngle: 0.05,
-            gap: 2
-          }
-        }
-      }
+      opts: {}
     };
   },
   onReady() {
+		this.opts={
+			color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
+			padding: undefined,
+			title: {
+			  name: this.titleName,
+			  fontSize: 35,
+			  color: this.color
+			},
+			subtitle: {
+			  name: "",
+			  fontSize: 25,
+			  color: this.color
+			},
+			extra: {
+			  arcbar: {
+			    type: "default",
+			    width: 18,
+			    backgroundColor: "#E9E9E9",
+			    startAngle: 0.95,
+			    endAngle: 0.05,
+			    gap: 2
+			  }
+			}
+		}
+		console.log(this.opts);
     this.getServerData();
   },
   methods: {
@@ -52,8 +68,8 @@ export default {
             series: [
               {
                 name: "正确率",
-                color: "#05C341",
-                data: 0.8
+                color: this.color,
+                data: this.actualValue
               }
             ]
           };