图表优化

components/mainline-chart/mainline-chart.vue

@@ -1,6 +1,6 @@
 <template>
 		<view class="charts-box">
-			<qiun-data-charts class="chart" type="mainline" :chartData="chartData" :loadingType="4" background="none" />
+			<qiun-data-charts class="chart" type="mainline" :chartData="chartData" :loadingType="4"/>
 		</view>
 </template>
 

components/mainradar-chart/mainradar-chart.vue

@@ -1,6 +1,12 @@
-<template>
-	<view class="charts-box">
-		<qiun-data-charts type="mainradar" :chartData="chartData" :loadingType="4" background="none" />
+<template>	
+	<view class="chart-container">
+		<view class="chart-name">
+			<text class="chart-name-text">成绩雷达图</text>
+		</view>
+		<!-- 图表 -->
+		<view class="charts-box">
+			<qiun-data-charts type="mainradar" :chartData="chartData" :loadingType="4" background="none" />
+		</view>
 	</view>
 </template>
 
@@ -57,10 +63,37 @@
 	}
 </script>
 
-<style lang="scss">
-.charts-box{
-  width: 100%;
-  height:300px;
-	margin-top: -30px;
+<style lang="scss">
+	.chart-container {
+			margin: 20px 17px;
+			padding: 5px 5px 5px 2px;
+			border-radius: 15px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			background-color: #FFFFFF;
+			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+	
+			.chart-name {
+				width: 100%;
+				text-align: left;
+				margin-left: 30px;
+				margin-top: 8px;
+				font-weight: bold;
+				color: #3B4144;
+				display: flex;
+				justify-content: space-between;
+	
+				.chart-name-text {
+					font-size: 15px;
+				}
+			}
+			
+	.charts-box{
+		width: 100%;
+		height:300px;
+	}
+
 }
 </style>

pages/home/home.vue

@@ -18,7 +18,7 @@
 			<z-table class="table" :tableData="tableData" :columns="columns" stickSide="true" showBottomSum="true"></z-table>
 		</view>
 		
-		
+		<mainradar-chart></mainradar-chart>
 		<!-- 卡片区域 -->
 		<view class="home-card">
 			<view class="card-edit">
@@ -34,7 +34,7 @@
 			<bar-chart class="home-bar-chart"></bar-chart>
 		</view>
 		
-		<mainradar-chart></mainradar-chart>
+		
 
 		
 

uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -119,56 +119,6 @@ const cfu = {
 		}
 	},
 	//下面是自定义配置，请添加项目所需的通用配置
-	"pie": {
-		"type": "pie",
-		"color": color,
-		"padding": [5, 5, 5, 5],
-		"extra": {
-			"pie": {
-				"activeOpacity": 0.5,
-				"activeRadius": 10,
-				"offsetAngle": 0,
-				"labelWidth": 15,
-				"border": true,
-				"borderWidth": 3,
-				"borderColor": "#FFFFFF"
-			},
-		}
-	},
-	"ring": {
-		"type": "ring",
-		"color": color,
-		"padding": [5, 5, 5, 5],
-		"rotate": false,
-		"dataLabel": true,
-		"legend": {
-			"show": true,
-			"position": "right",
-			"lineHeight": 25,
-		},
-		"title": {
-			"name": "收益率",
-			"fontSize": 15,
-			"color": "#666666"
-		},
-		"subtitle": {
-			"name": "70%",
-			"fontSize": 25,
-			"color": "#7cb5ec"
-		},
-		"extra": {
-			"ring": {
-				"ringWidth": 30,
-				"activeOpacity": 0.5,
-				"activeRadius": 10,
-				"offsetAngle": 0,
-				"labelWidth": 15,
-				"border": true,
-				"borderWidth": 3,
-				"borderColor": "#FFFFFF"
-			},
-		},
-	},
 	"rose":{
 	    "type": "rose",
 	    "canvasId": "",
@@ -254,49 +204,6 @@ const cfu = {
 	        }
 	    }
 	},
-	"word": {
-		"type": "word",
-		"color": color,
-		"extra": {
-			"word": {
-				"type": "normal",
-				"autoColors": false
-			}
-		}
-	},
-	"funnel": {
-		"type": "funnel",
-		"color": color,
-		"padding": [15, 15, 0, 15],
-		"extra": {
-			"funnel": {
-				"activeOpacity": 0.3,
-				"activeWidth": 10,
-				"border": true,
-				"borderWidth": 2,
-				"borderColor": "#FFFFFF",
-				"fillOpacity": 1,
-				"labelAlign": "right"
-			},
-		}
-	},
-	"map": {
-		"type": "map",
-		"color": color,
-		"padding": [0, 0, 0, 0],
-		"dataLabel": true,
-		"extra": {
-			"map": {
-				"border": true,
-				"borderWidth": 1,
-				"borderColor": "#666666",
-				"fillOpacity": 0.6,
-				"activeBorderColor": "#F04864",
-				"activeFillColor": "#FACC14",
-				"activeFillOpacity": 1
-			},
-		}
-	},
 	"arcbar": {
 		"type": "arcbar",
 		"color": color,
@@ -433,57 +340,6 @@ const cfu = {
 			}
 		}
 	},
-	"tline": {
-		"type": "line",
-		"color": color,
-		"padding": [15, 10, 0, 15],
-		"xAxis": {
-			"disableGrid": false,
-			"boundaryGap": "justify",
-		},
-		"yAxis": {
-			"gridType": "dash",
-			"dashLength": 2,
-			"data": [{
-				"min": 0,
-				"max": 80
-			}]
-		},
-		"legend": {},
-		"extra": {
-			"line": {
-				"type": "curve",
-				"width": 2
-			},
-		}
-	},
-	"tarea": {
-		"type": "area",
-		"color": color,
-		"padding": [15, 10, 0, 15],
-		"xAxis": {
-			"disableGrid": true,
-			"boundaryGap": "justify",
-		},
-		"yAxis": {
-			"gridType": "dash",
-			"dashLength": 2,
-			"data": [{
-				"min": 0,
-				"max": 80
-			}]
-		},
-		"legend": {},
-		"extra": {
-			"area": {
-				"type": "curve",
-				"opacity": 0.2,
-				"addLine": true,
-				"width": 2,
-				"gradient": true
-			},
-		}
-	},
 	"column": {
 		"type": "column",
 		"canvasId": "",
@@ -941,175 +797,6 @@ const cfu = {
 			}
 		}
 	},
-	"gauge": {
-		"type": "gauge",
-		"color": color,
-		"title": {
-			"name": "66Km/H",
-			"fontSize": 25,
-			"color": "#2fc25b",
-			"offsetY": 50
-		},
-		"subtitle": {
-			"name": "实时速度",
-			"fontSize": 15,
-			"color": "#1890ff",
-			"offsetY": -50
-		},
-		"extra": {
-			"gauge": {
-				"type": "default",
-				"width": 30,
-				"labelColor": "#666666",
-				"startAngle": 0.75,
-				"endAngle": 0.25,
-				"startNumber": 0,
-				"endNumber": 100,
-				"labelFormat": "",
-				"splitLine": {
-					"fixRadius": 0,
-					"splitNumber": 10,
-					"width": 30,
-					"color": "#FFFFFF",
-					"childNumber": 5,
-					"childWidth": 12
-				},
-				"pointer": {
-					"width": 24,
-					"color": "auto"
-				}
-			}
-		}
-	},
-	"candle": {
-		"type": "candle",
-		"color": color,
-		"padding": [15, 15, 0, 15],
-		"enableScroll": true,
-		"enableMarkLine": true,
-		"dataLabel": false,
-		"xAxis": {
-			"labelCount": 4,
-			"itemCount": 40,
-			"disableGrid": true,
-			"gridColor": "#CCCCCC",
-			"gridType": "solid",
-			"dashLength": 4,
-			"scrollShow": true,
-			"scrollAlign": "left",
-			"scrollColor": "#A6A6A6",
-			"scrollBackgroundColor": "#EFEBEF"
-		},
-		"yAxis": {},
-		"legend": {},
-		"extra": {
-			"candle": {
-				"color": {
-					"upLine": "#f04864",
-					"upFill": "#f04864",
-					"downLine": "#2fc25b",
-					"downFill": "#2fc25b"
-				},
-				"average": {
-					"show": true,
-					"name": ["MA5", "MA10", "MA30"],
-					"day": [5, 10, 20],
-					"color": ["#1890ff", "#2fc25b", "#facc14"]
-				}
-			},
-			"markLine": {
-				"type": "dash",
-				"dashLength": 5,
-				"data": [{
-						"value": 2150,
-						"lineColor": "#f04864",
-						"showLabel": true
-					},
-					{
-						"value": 2350,
-						"lineColor": "#f04864",
-						"showLabel": true
-					}
-				]
-			}
-		}
-	},
-	"mix": {
-		"type": "mix",
-		"color": color,
-		"padding": [15, 15, 0, 15],
-		"xAxis": {
-			"disableGrid": true,
-		},
-		"yAxis": {
-			"disabled": false,
-			"disableGrid": false,
-			"splitNumber": 5,
-			"gridType": "dash",
-			"dashLength": 4,
-			"gridColor": "#CCCCCC",
-			"padding": 10,
-			"showTitle": true,
-			"data": []
-		},
-		"legend": {},
-		"extra": {
-			"mix": {
-				"column": {
-					"width": 20
-				}
-			},
-		}
-	},
-	"scatter": {
-		"type": "scatter",
-		"color": color,
-		"padding": [15, 15, 0, 15],
-		"dataLabel": false,
-		"xAxis": {
-			"disableGrid": false,
-			"gridType": "dash",
-			"splitNumber": 5,
-			"boundaryGap": "justify",
-			"min": 0
-		},
-		"yAxis": {
-			"disableGrid": false,
-			"gridType": "dash",
-		},
-		"legend": {},
-		"extra": {
-			"scatter": {},
-		}
-	},
-	"bubble": {
-		"type": "bubble",
-		"color": color,
-		"padding": [15, 15, 0, 15],
-		"xAxis": {
-			"disableGrid": false,
-			"gridType": "dash",
-			"splitNumber": 5,
-			"boundaryGap": "justify",
-			"min": 0,
-			"max": 250
-		},
-		"yAxis": {
-			"disableGrid": false,
-			"gridType": "dash",
-			"data": [{
-				"min": 0,
-				"max": 150
-			}]
-		},
-		"legend": {},
-		"extra": {
-			"bubble": {
-				"border": 2,
-				"opacity": 0.5,
-			},
-		}
-	},
 	"mainline": {
 		"type": "area",
 		"canvasId": "",
@@ -1122,7 +809,7 @@ const cfu = {
 			"#6495ed"
 		],
 		"padding": [
-			0,
+			5,
 			0,
 			0,
 			0
@@ -1135,8 +822,8 @@ const cfu = {
 		"touchMoveLimit": 60,
 		"enableMarkLine": false,
 		"dataLabel": false,
-		"dataPointShape": false,
-		"dataPointShapeType": "solid",
+		"dataPointShape": true,
+		"dataPointShapeType": "hollow",
 		"tapLegend": true,
 		"xAxis": {
 			"disabled": true,
@@ -1253,9 +940,9 @@ const cfu = {
 		"dataPointShapeType": "solid",
 		"tapLegend": true,
 		"legend": {
-			"show": false,
-			"position": "right",
-			"float": "center",
+			"show": true,
+			"position": "bottom",
+			"float": "right",
 			"padding": 5,
 			"margin": 5,
 			"backgroundColor": "rgba(0,0,0,0)",
@@ -1272,7 +959,7 @@ const cfu = {
 				"gridType": "radar",
 				"gridColor": "#CCCCCC",
 				"gridCount": 1,
-				"labelColor": "#f1f3f5",
+				"labelColor": "#666666",
 				"opacity": 0.2,
 				"border": true,
 				"borderWidth": 2,
@@ -1661,7 +1348,7 @@ const cfu = {
 			}
 		}
 	},
-"mini-rose":{
+	"mini-rose":{
     "type": "rose",
     "canvasId": "",
     "canvas2d": false,